页面的回流与重绘

136 阅读1分钟

什么是重绘、重排

重绘不一定导致重排,但重排一定会导致重绘

  1. 某些元素的外观改变所触发浏览器行为,例如:修改元素的填充颜色,会触发重绘
  2. 重新生成布局,重新排列元素,例如:改元素的宽高,会触发重排

重绘

改变color

样式集中改变可以减少重排次数

将 DOM 离线

当对DOM 节点有较大改动的时候,我们先将元素脱离文档流,然后对元素进行操作,最后再把操作后的元素放回文档流。修改DOM节点的display属性,临时将此节点从文档流中脱离,然后再恢复;

脱离文档流: 使用 absolute 或 fixed 脱离文档流(减小重排范围

善用内存:在内存中多次操作DOM,再整个添加到DOM树(减小重排范围)

异步请求接口获取数据,动态渲染到页面

读写分离:将写入的值缓存,读取缓存的值(减少重排次数