浏览器回流和重绘

浏览器渲染过程图:

重上图可以大致了解到浏览器渲染文档过程

1.HTML Parser 解析HTML,生成DOM Tree,CSS Parser 解析CSS,生成CSSOM树

2.结合DOM Tree 和 CSSOM树,生成Render Tree。

3.根据生成的渲染树,计算元素节点的几何信息,包括位置大小等信息,此操作对应回流

4.根据渲染树和回流得到信息,进行页面渲染的过程,此操作对应重绘。

如果直接对DOM节点进行操作,修改DOM节点的大小、位置等几何属性,会导致DOM树的结构变化,浏览器会重新构建DOM树,这个过程叫做回流。

如果直接修改DOM的颜色,DOM的结构不会发生变化,页面布局也不会改变,浏览器不会重新构建DOM树,但是会重新渲染页面,这个过程就是重绘的过程。

从上面可以看出,回流一定会重绘,但是重绘不一定导致回流。

浏览器优化:

 一 尽量减少一下属性的优化,如果一定要访问,对它们进行批量操作。

  • offsetTop,offsetLeft,offsetWidth,offsetHeight
  • scrollTop,scrollLeft,scrollWidth,scrollHeight
  • clientTop,clientLeft,clientWidth,clientHeight
  • width,height
  • getComputedStyle()

二 让要操作的元素进行”离线处理”,处理完后一起更新

a) 使用DocumentFragment进行缓存操作,引发一次回流和重绘;
b) 使用display:none技术,只引发两次回流和重绘;
c) 使用cloneNode(true or false) 和 replaceChild 技术,引发一次回流和重绘;

三 给元素添加绝对定位,使其脱离文档流再进行操作。
 

©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页