浏览器渲染流程及涉及到的性能优化

Hone
143 阅读2分钟

一、浏览器渲染流程

查看渲染流水线：chrome > 开发者工具 > Performance

流程概要：DOM解析-->CSS解析-->样式计算-->布局树--> 图层树 --> 绘制 --> 合并图层

  1. 使用html解析器将html解析成浏览器能理解的DOM树
  2. 根据 CSS 样式表，计算出 DOM 树所有节点的样式，即CSS树
  3. 样式计算(Recalculate Style)
    • 把css转换为浏览器内容理解的结构，样式表stylesheets
    • 转换样式表中的属性值，使其标准化
    • 计算出DOM树种每一个节点的具体样式
  4. DOM树结合CSS树生成布局树Layout
  5. 对布局树进行分层，并生成图层树
  6. 对每个图层进行单独的绘制（在GPU线程）
  7. 合并图层，生成最终的页面

二、Web性能优化

1、元素位置移动变换时尽量使用css3的transform来代替top left等操作

直接使用transform会触发重排和重绘

配合position:relative，只会触发重绘

元素作为一个单独的图层使用transform，不会触发重排和重绘。

2、使用opacity来替代visibility

opacity配合图层使用，不会触发重绘也不触发重排

3、将多次改变样式的操作合并成一次

不要一条条第修改DOM的样式，预先定义好class，然后修改DOM的className;

4、利用文档碎片(documentFragment)

5、不要把获取某些DOM节点的属性值放在一个循环里面当成循环的变量

当获取文档的width,height的时候会触发重绘和重排

6、为动画元素新建图层

will-change:tansform

三、涉及到的知识点

1、元素就被单独提升为一个图层的情况

1.拥有层叠上下文属性的元素会被提升为单独的图层

1、position:fixed
2、css 3d   例如:transform:rotateX(30deg)
3、video
4、canvas
5、有css3动画的节点

2.需要剪裁的地方也会被创建为图层

文字内容溢出div的情况

3. 额外的知识点

  1. 浏览器每次只能接收64kb的数据
  2. 可以打开Chrome的"开发工具"，选择Layers标签，就可以查看可视化页面的分层情况
  3. CSS will-change 属性：通过告知浏览器该元素会有哪些变化,使浏览器提前做好优化准备,增强页面渲染性能
avatar
文章
阅读
粉丝