面试题 咱们来一起探讨一下吧

如何减少浏览器重绘和回流?

我是这样理解的:他们是浏览器渲染页面的两个步骤.

在整个过程中,回流是计算每个元素在页面上的大小与位置,重绘是当计算好元素的位置,大小及其他属性后,浏览器根据每个盒子特征进行绘制.

回流一定会导致重绘,重绘不一定会导致回流.

减少不必要的回流能提升页面的渲染性能.具体的做法有三点:

第一,用css来实现动画,而不要用js操作dom

第二,复杂的动画可以通过布局或绝对定位让她脱离文档流,从而减少对其他元素的影响

第三,如果非要使用javespript动画插入多个节点时,可以使用documentfragment.创建后一次插入,就能避免多次的渲染性能.