zoukankan      html  css  js  c++  java
  • js的渲染

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
    /*从一个url地址到最终页面渲染完成发生了什么?
    * 1.DNS解析,将域名解析为ip地址
    * --浏览器DNS解析
    * --系统DNS解析
    * --路由DNS解析
    * --网络运营商DNS解析
    * --递归搜索,blog.baidu.com
    2.TCP连接,TCP三次握手
    -------第一次握手:由浏览器发起,告诉服务器我要发送请求了
    -------第二次握手:由服务器发起,告诉浏览器我要准备接收了,你发吧
    -------第三次握手:由浏览器发起,告诉服务器,我要发了,准备接收吧
    3.发送请求
    ---请求报文,HTTP协议的通信内容
    4.接收响应
    ----响应报文
    5.渲染页面
    -----遇见HTML标记,浏览器调用HTML解析器解析成Token并创建成dom树;
    -----遇见style/link标记,浏览器会调用css解析器,处理css标记并创建css树;
    -----遇见script标记,调用javascript解析器,处理script代码(绑定事件,修改dom树/css树);
    -----将dom树和css树合并成一个渲染树
    -----根据渲染书来计算布局,计算每个节点的几何信息;
    -----将各个节点颜色绘制到屏幕上(渲染)


    注意:
    这五个步骤不一定是顺序执行的,如果dom树或css树被修改了,可能会执行多次布局和渲染。
    往往实际页面中,这些步骤会执行多次;

    6.断开连接,TCP四次挥手
    第一次挥手:有浏览器发起的,发送给服务器,我东西发送完了(请求报文),你准备关闭吧;
    第一次挥手:有服务器发起的,发送给浏览器,我东西接收完了(请求报文),我准备关闭吧,你也准备吧;
    第一次挥手:有服务器发起的,发送给浏览器,我东西发送完了(响应报文),你准备关闭吧;
    第一次挥手:有浏览器发起的,发送给服务器,我东西发送完了(响应报文),我准备关闭吧,你也准备吧;




    *
    * */
    </script>
    </head>
    <body>
    </body>
    </html>

  • 相关阅读:
    简单的2D变形 CSS transform transition
    利用文字阴影实现火焰字
    图片拖拽的继承,引用 3
    图片拖拽的继承,引用 2
    图片拖拽的继承,引用 1 (需要引入2,3两个js才能运行)
    GNU make
    GDB
    1.GCC程序编译
    设计模式之装饰者模式
    设计模式之观察者模式
  • 原文地址:https://www.cnblogs.com/dys6/p/11303916.html
Copyright © 2011-2022 走看看