带你认识什么是“回流重绘”
摘要:要想减少回流和重绘的次数,首先要了解回流和重绘是如何触发的。 本文分享自华为云社区《前端页面之“回流重绘”》,作者:CoderBin。 “回流重绘”是什么? 在HTML中,每个元素都可以理解成一个盒子,在浏览器解析过程中,会涉及到回流与重绘: 回流:布局引擎会根据各种样式计算每个盒子在页面上的大小与位置; 重绘:当计算好盒模型的位置、大小及其他属性后,浏览器根据每个盒子特性进行绘制。 具体的浏览器解析渲染机制如下所示: 解析HTML,生成DOM树,解析CSS,生成CSSOM树 将DOM树和CSSOM树结合,生成渲染树(Render Tree) Layout(回流):根据生成的渲染树,进行回流(Layout),得到节点的几何信息(位置,大小) Painting(重绘):根据渲染树以及回流得到的几何信息,得到节点的绝对像素 Display:将像素发送给GPU,展示在页面上 在页面初始渲染阶段,回流不可避免的触发,可以理解成页面一开始是空白的元素,后面添加了新的元素使页面布局发生改变。 当我们对 DOM 的修改引发了 DOM几何尺寸的变化(比如修改元素的宽、高或隐藏元素等)时,浏览器需...