浏览器工作原理

浏览器工作原理学习记录 原地址https://www.cnblogs.com/xiaohuochai/p/9174471.html#anchor6

一、重绘与回流

回流

概念：回流reflow是firefox里的术语，在chrome中称为重排relayout，回流是指窗口尺寸被修改、发生滚动操作，或者元素位置相关属性被更新时会触发布局过程，在布局过程中要计算所有元素的位置信息。由于HTML使用的是流式布局，如果页面中的一个元素的尺寸发生了变化，则其后续的元素位置都要跟着发生变化，也就是重新进行流式布局的过程，所以被称之为回流。

执行下列操作后出发重绘：
1.dom元素的几何变化
2.dom树的结构变化
3.获取下列属性offsetTop\offsetLeft\offsetWidth\offsetHeight\scrollTop\scrollLeft\scrollWidth\scrollHeight\clientTop\clientLeft\clientWidth\clientHeight\getComputedStyle()\currentStyle()
4.改变元素的某些样式
5.调整浏览器窗口大小
tip: 触发浏览器回流一定会触发后续的重绘操作。所以，性能优化的重点在于只触发小规模重绘，尽量不触发回流

重绘

概念：与视觉相关的样式属性被修改时会触发

example:

• display: none/block会引起回流
• visibility: visibile/hidden,只重绘
• opacity: 0/1 在0~1的变化中触发回流，0~0.9只触发重绘

优化建议

• 尽量不修改dom样式，可通过className或style.cssText
• 若需要多次操纵节点，等操作完成后，一次性加入节点中
• 对于一个元素进行复杂操作时，可以先影藏，待操作完成后再现实
• 在需要经常获取那些引起浏览器回流的属性值时，要缓存到变量中
• 不要使用table布局，因为一个小改动可能会造成整个table重新布局。而且table渲染通常要3倍于同等元素时间
• 此外，将需要多次重绘的元素独立为render layer渲染层，如设置absolute，可以减少重绘范围；对于一些进行动画的元素，可以进行硬件渲染，从而避免重绘和回流