DOM的重绘和回流及代码性能优化

1.DOM的重绘和回流Repaint&Reflow


1.1重绘:元素样式的改变(但宽高、大小、位置等不变)


如outline、visibility、color、background-color等

1.2回流:元素的大小或者位置发生了变化(当页面布局和几何信息发生变化的时候),触发了重新布局,导致渲染树重新设计布局和渲染。


如添加或删除可见的DOM元素;元素的位置发生变化,元素的尺寸发生变化,内容发生变化(比如文本变化或者图片被另一个尺寸不一样的图片替换);页面一开始渲染的时候(这是无法避免);因为回流是根据视口的大小来计算元素的位置和大小的,所以浏览器的窗口尺寸变化也会引发回流。

注意回流一定会触发重绘,重绘不一定会回流。

2.前端性能优化:避免DOM的回流


2.1放弃传统操作DOM,基于vue/react开始数据影响视图模式


可通过vue或react等框架中的virtual dom/dom diff,避免对DOM的直接操作。

2.2分离读写操作(现代的浏览器都有渲染队列的机制)


style样式

body代码


    

2.3样式集中改变


style样式

body代码


    

2.4缓存布局信息


body代码


    

2.5元素批量修改


body代码


    

2.6动画效果应该使用position属性absolute或者fixed(脱离文档流)


如果使用margin等属性对元素进行定位,会对其他元素的位置造成影响并导致回流。而使用position属性进行定位的元素能够脱离文档流,在一个新的平面上操作,虽然也会引起回流,但是不会影响其他元素,性能更好。

2.7CSS3硬件加速(GPU加速)


比起考虑如何减少回流、重绘,我们更期望的是,根本不需要回流和重绘;transform、opacity、filters...这些属性会触发硬件加速,不会引发回流和重绘。
通常用的比较多的是transform(能用transform改变的样式绝对不用普通样式)。比如用translate属性来移动元素不会引起回流。
缺点:用的多会导致占用大量内存,性能消耗严重。

2.8牺牲平滑度换取速度


简单地说就是动画总移动100px的情况下,每一秒钟移动1px,平滑度高,但是会引发100次回流;每一秒钟移动10px,平滑度相对较差,但是只会引起10次回流。当电脑比较快时可取前者,电脑较慢应取后者。

2.9避免使用table布局


由于table布局要一层一层的嵌套,添加完底层样式,才开始往外一层一层添加样式,不仅不好写样式,而且不利于DOM的性能优化。

你可能感兴趣的:(DOM的重绘和回流及代码性能优化)