浏览器解析渲染页面优化手段

浏览器解析渲染页面的过程是:

图

  1. 解析 HTML,生成 DOM 树
  2. 解析 CSS,生成 CSS 规则树(CSS Rule Tree)
  3. 将 DOM Tree 和 CSS Rule Tree 相结合,生成 渲染树Render Tree
  4. 从根节点开始,计算每一个元素的大小、位置,给出每个节点所应该出现的屏幕精确坐标,从而得到基于渲染树的 布局渲染树Layout of the render tree)。
  5. 遍历渲染树,将每个节点用 UI 渲染引擎来绘制,从而将整棵树绘制到页面上,这个步骤叫 绘制渲染树Painting the render tree

关于这个步骤我们的优化方案有:

  1. CSS 选择器解析问题。编码过程中用尽可能少的选择器来表示一个元素,因为 CSS 是从右往左加载的。
  2. CSS 加载问题。尽可能在 head 位置加载 CSS,减少 HTML 加载完毕需要等待 CSS 加载的问题。
  3. JS 加载问题。JS 的加载会阻塞 HTML 和 CSS 的加载,所以 script 标签通常放 body 后面,同时可以利用 script 标签的 async 和 defer 属性,同步加载 JS 或者等 HTML 和 CSS 加载渲染完后再加载 JS。
  4. DOM 渲染问题。DOM 渲染的时候可能会触发回流和重绘,应该尽量避免触发。

如何避免触发回流:

  1. 【CSS】使用 visibility 替换 display
  2. 【CSS】避免 table 布局。对于 Render Tree 的计算通常只需要遍历一次就可以完成,但是 table 布局需要计算多次,通常要花 3 倍于等同元素的时间,因此要避免。
  3. 【JS】避免频繁做 widthheight 等会触发回流的操作。
  4. 【JS】操作 DOM 的时候,如果是添加 DOM 节点,可以将所有节点都在 JS 中操作完毕,再进行渲染(一次性)

评论

还没有评论...留下你的评论!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Sidebar