性能优化（三）：浏览器渲染原理 和 关键渲染路径

一，浏览器的渲染流程

浏览器渲染原理：读取html，css文本，构建DOM树。（DOM ，CSSOM）- DOMtree 

关键渲染路径：

javascript（触发视觉变化） - style（样式计算，css改变） - Layout（布局）- Paint（绘制）- Composite（合层）

 

二，回流与重绘，避免布局抖动。

a，布局关心的是位置和大小。（如css：height，offset改变位置，大小），所以如果只是更改background，opcity，不需要Layout（布局），只需Paint（重绘）。

b，回流：首次加载叫布局。再次叫回流。影响回流的操作：

　　b1，添加/删除 元素，

　　b2，操作styles，display：none。

　　b3，offsetLeft，offsetTop ，scrollTop，clientWidth。使用这些属性，会引起强制布局更新。

　　b4，移动元素位置

　　b5，修改浏览器大小，字体

* 通过devtools，performance 可以查看回流的过程。

* 连续的读写操作，会引起强制的布局更新，强制布局更新会造成页面抖动。

* 回流不可避免的情况 - 布局抖动（layout thrashing）

解决布局抖动方案一：使用FastDom 解决布局抖动：批量的读（var wid = element.clientWidth;），批量的写入 (element.style.width = wid + 'px';)

 

三，复合线程 （ compositor thread ）与图层 layers

介绍：复合就是把页面拆成多个图层，图层之间是互不影响的。只绘制自己的那个图层，再进行复合。

　　默认是浏览器来做，如果某个元素对其他元素影响比较大，独立图层。

只触发复合，不触发回流与重绘。可以采用如下样式代替：

position：transform：translate（）

Scale：transform：scale（n）

Rotation：transform：rotate（n deg）

Opacity：opacity

 

四，减少重绘 repaint。（只影响复合的以上动画）

willChange: transform  -  告诉浏览器提到单独的图层

查看重绘：command shift p   ->  show rendering