前端性能优化二:布局和样式

重绘:其实就是触发浏览器的 paint 的过程。

回流:其实不仅仅是触发了 paint 的过程还触发 layout 的过程

回流必定触发重绘

能触发回流的样式:

 能触发回流的js:

除了上面的这些还有,只要是获取元素位置相关的,浏览器都会在当前时间点去计算得到该属性,该计算的过程就会触发回流。

 只触发重绘的样式:

1.减少回流和重绘

布局:

使用transform代替top/left等值的改变(启用GPU加速渲染)

用opacity代替visibility

DOM:

不要逐条修改 DOM 样式,可预先定义好 class,直接修改该值。

不要把 DOM 结点的属性值放在一个循环里当成循环里的变量,例如循环调用 getBoundingClientRect() 方法,将会导致页面一直处于回流的过程。

不要使用 table 布局,因为你改动一点点都将影响整个 table 的布局。

对于页面的动画,我们最好新建图层,把回流和重绘的消耗降低。

启用 GPU 硬件加速:使用  transformopacityfiltersWill-change可以启用GPU加速。

 

猜你喜欢

转载自www.cnblogs.com/150536FBB/p/12365697.html