前端性能优化--渲染优化

前端性能优化–渲染优化

前言

之前文章有讲过
《浏览器的工作原理：输入URL后，Web页面是如何呈现的？》
《【V8引擎】JavaScript变量提升》

我们需要进一步了解浏览器的渲染过程，才能更好的进行渲染优化

1、HTML解析过程

浏览器从上到下开始解析，生成DOM树

当解析到link标签的时候，它发现有一个css文件，则会开始解析这个css文件，生成CSSOM树，注意，生成DOM树和生成CSSOM树可以一同进行

如果遇到了js文件，浏览器会停止构建DOM树，因为js有可能对DOM进行操作所以必须停下来。

谷歌浏览器是通过V8引擎解析js代码的
V8引擎的运行原理：

1. Blink将源码交给V8引擎，Stream获取到源码并且进行编码转换；

2. Scanner会进行词法分析（lexical analysis），词法分析会将代码转换成tokens；

3. 接下来tokens会被转换成AST树，经过Parser和PreParser：

4. Parser就是直接将tokens转成AST树架构；

有了DOM树和CSSOM树之后，浏览器将两者合并为Render树，也就是渲染树,浏览器会对渲染树继续优化，只显示需要的节点，例如css display：none 在渲染树节点中就会被删除

接着，对渲染树Layout，也就是布局, 布局会计算每个节点的精确的位置和大小 - “盒模型”

最后，执行Pating，也就是绘制，绘制是像素化每个节点的过程，也就是像素点集合的画面出现在屏幕上的过程

2、性能优化：减少重排

了解了浏览器渲染过程，我们通过上一篇文章的performance性能工具检测，可以发现布局和绘制非常消耗时间

当我们进行交互操作时，页面可能发生回流（重排）导致浏览器发生渲染树和绘制的加载，所以
我们应该尽量减少回流

我们应该尽量避免layout thrashing，减少回流（重排），如果不可避免，我们此时可以使这些元素脱离文档流，以此减少页面回流和重绘的次数；

3、减少重绘（repaint）

尽量使用这些css属性可以减少页面的重绘

tip:他们必须是在同一图层中

transform
opacity
background
visibility

will-change( 兼容性不好 )

MDN：CSS 属性 will-change 为web开发者提供了一种告知浏览器该元素会有哪些变化的方法，这样浏览器可以在元素属性真正发生变化之前提前做好对应的优化准备工作。 这种优化可以将一部分复杂的计算工作提前准备好，使页面的反应更为快速灵敏。