从用户输入浏览器输入url到页面最后呈现 有哪些过程?有什么办法能优化页面性能?

  1. 用户输入URL地址
  2. 浏览器解析URL解析出主机名
  3. 浏览器将主机名转换成服务器ip地址(浏览器先查找本地DNS缓存列表 没有的话 再向浏览器默认的DNS服务器发送查询请求 同时缓存)
  4. 浏览器将端口号从URL中解析出来
  5. 浏览器建立一条与目标Web服务器的TCP连接(三次握手)
  6. 浏览器向服务器发送一条HTTP请求报文
  7. 服务器向浏览器返回一条HTTP响应报文
  8. 关闭连接 浏览器解析文档
  9. 如果文档中有资源 重复6 7 8 动作 直至资源全部加载完毕

重排:

  1. 定义:DOM结构中的各个元素都有自己的盒子(模型),这些都需要浏览器根据各种样式来计算并根据计算结果将元素放到它该出现的位置,这个过程称之为reflow。

  2. 触发Reflow:

    • 当你增加、删除、修改DOM结点时,会导致Reflow或Repaint
    • 当你移动DOM的位置,或是搞个动画的时候
    • 当你修改CSS样式的时候
    • 当你Resize窗口的时候(移动端没有这个问题),或者是滚动的时候
    • 当你修改网页的

    最常问:如何减少Reflow?或者避免Reflow?

重绘:

  1. 定义:当各种盒子的位置、大小以及其他属性,例如颜色、字体大小等都确定下来后,浏览器于是便把这些元素都按照各自的特性绘制了一遍,于是页面的内容出现了,这个过程称之为repaint。

    页面要呈现的内容,通通都绘制到页面上。

  2. 触发Repaint

    • DOM改动
    • CSS改动

猜你喜欢

转载自www.cnblogs.com/liea/p/12499088.html