|
我们一起来学习一下页面重构应注意的repaint和reflow，首先了解一下什么是repaint和reflow。
1. 什么是 repaint 和 reflow？
一个页面由两部分组成：
DOM：描述该页面的结构
render：描述 DOM 节点 (nodes) 在页面上如何呈现
当 DOM 元素的属性发生变化 (如 color) 时, 浏览器会通知 render 重新描绘相应的元素, 此过程称为 repaint。
如果该次变化涉及元素布局 (如 width), 浏览器则抛弃原有属性, 重新计算并把结果传递给 render 以重新描绘页面元素, 此过程称为 reflow。
这两个过程是很耗费浏览器性能的, 从 IE 系列和 Chrome 渲染页面速度上的差距即可看出渲染引擎计算对应值和呈现并不一定高效, 而每次对元素的操作都会发生 repaints 或 reflow, 因此编写 DOM 交互时如果不注意就会导致页面性能低下.
页面渲染的过程如下：
1.解析HTML代码并生成一个 DOM 树。
2.解析CSS文件，顺序为：浏览器默认样式->自定义样式->页面内的样式。
3.生成一个渲染树（render tree）。这个渲染树和DOM树的不同之处在于，它是受样式影响的。它不包括那些不可见的节点。
4.当渲染树生成之后，浏览器就会在屏幕上“画”出所有渲染树中的节点。
2. 什么情况下会触发浏览器的repaint/reflow?
除了页面在首次加载时必然要经历该过程之外，还有以下行为会触发这个行为：
引用:
1. DOM元素的添加、修改（内容）、删除( Reflow + Repaint)
1/2 1 2 下一页 尾页 |
