页面回流与页面重绘

HTML5学堂：在代码优化当中，我们时常会提到页面回流与页面重绘，那么这两者到底是什么意思，又是如何引发的？为何我们要尽可能的防止页面回流？一起来看今天的文章！

页面回流与页面重绘的定义

DOM Tree 和样式结构体组合后构建render tree。一旦render tree构建完成，浏览器就会根据render tree来进行页面的绘制。

页面回流：当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而引起的页面重新渲染（或者叫做重新构建绘制）

页面重绘：当render tree中的一些元素需要更新属性，但这些属性只会影响元素的外观，风格，而不会影响到元素的布局，此类的页面渲染叫做页面重绘。

页面重绘与回流的关系：回流必将引起重绘，而重绘不一定会引起回流。

会引发页面回流的范例

DOM树发生变化 —— 如：增加一个元素或删除一个元素（元素为可见元素）

通过style控制元素的位置变化 —— 典型的例子是碰壁反弹

元素尺寸的改变 —— 盒模型的每种属性均算在其内

内容改变引发的尺寸变化 —— 如：文本改变或者图片大小改变而引起的计算值宽度和高度改变

浏览器窗口尺寸改变 —— resize事件发生时

欢迎沟通交流~HTML5学堂