掌握回流与重绘面试回答：优化网页加载与响应速度
认识回流reflow和重绘repaint
理解回流reflow:(也可以称之为重排)
第一次确定节点的大小和位置，称之为布局(layout)。
之后对节点的大小、位置修改重新计算称之为回流
什么情况下引起回流呢？
比如DOM结构发生改变（添加新的节点或者移除节点）
比如改变了布局（修改了width、height、padding、font-size等值）
比如窗口resize（修改了窗口的尺寸等）
比如调用getcomputedstyle方法获取尺寸、位置信息
理解重绘repaint
第一次渲染内容称之为绘制（paint）之后重新渲染称之为重绘
什么情况下会引起重绘呢？
比如修改背景色、文字颜色、 边框颜色、样式等；
回流和重绘的性能优化
回流一定会引起重绘，所以回流是一件很消耗性能的事情
所以在开发中要尽量避免发生回流：
- 修改样式时尽量一次性修改
比如通过cssText修改，比如通过添加class修改 - 尽量避免频繁的操作DOM
我们可以在一个DocumentFragment或者父元素中将要操作的DOM操作完成，再一次性的操作 - 尽量避免通过getcomputedstyle获取尺寸、位置等信息
频繁调用getcomputedstyle会导致回流，因为浏览器需要提供准确的计算值 - 对某些元素使用position的absolute或者fixed
并不是不会引起回流，而是开销相对较小，不会对其他元素造成影响
额外的方法：
新的合成层（compositingLayer）：在特定情况下，可以创建新的合成层，并且新的图层可以利用GPU来加速绘制也可以提供性能
特殊解析-composite合成
绘制的过程，可以将布局后的元素绘制到多个合成图层中
这是浏览器的一种优化手段；
默认情况下，标准流中的内容都是被绘制在同一个图层（Layer）中的；
而一些特殊的属性，会创建一个新的合成层(compositinglayer)，并且新的图层可以利用GPU来加速绘制
因为每个合成层都是单独染的；
那么哪些属性可以形成新的合成层呢？常见的一些属性
- 3Dtransforms
- video、 canvas、 iframe
- opacity动画转换时；
- position:fixed
- will-change：一个实验性的属性，提前告诉浏览器元素可能发生哪些变化；
- animation或transition设置了opacity、transform
分层确实可以提高性能，但是它以内存管理为代价，因此不应作为web性能优化策略的一部分过度使用。
面试回答
定义回流（Reflow）在浏览器染过程中的意义，并解释何时回触发回流？
回流是器染过程中的一个阶 涉及计算所有元素的位置和大小
当DOM的结构发生任何改变时（例如元素的添加、 移除、移动或大小变化） 浏览器需要重新计算元素的几何属性 然后确定它们在页面上的确切位置文个过程是必需的 因为页面布局是动态的元素的变化可能影响它元的布局。
但是我们要尽量避免或者减少回流的发生，因为这个过程也是非常消耗性能的。
什么情况下引起回流呢？
比如DOM结构发生改变（添加新的节点或者移除节点）；
比如改变了布局（修改了width、height、padding、font-size等值
比如窗口resize（修改了窗口的尺寸等）
比如调用getcomputedstyle方法获取尺寸、位置信息
等等
回流是一个计算密集的过程，可能会影响到网页的性能，特别是在复杂的页面布局中。
因此，优化网页以减少不必要的回流是提高性能的重要策略和手段。
这包括尽量减少在一个操作过程中对DOM的多次修改 用CSS的类进行样式变更等
这也是现代框架Vue、Reac的源码内部经常会涉及到的优化手段.(这里可能引出进一步问你Vue、Rect源码的问题)
解释什么是重绘（Repaint儿以及它在浏览器染网页时的作用
绘是浏览器染过程中的个步骤，它涉及到更新页面中元素的视觉表现 但不涉及这些元条的布局位置
重绘发生在元素的外观变化时，如改变颜色、阴影或者透明度等
这些变化不会影响到元素的几何结构(即位置和形状).
什么情况下会引起重绘呢？
比如修改背景色、文字颜色、边框颜色、样式等
⭐⭐⭐ 回流一定会引起重绘，所以回流是一件很消耗性能的事
虽然重绘不涉及布局的变化，因此比回流成本低，但是也会对性能造成负面影响。我们开发中可以通过下面的方案来进行优化
合并视觉变更：尽可能在一次操作中合并多个视觉变更，以减少绘的次数
新的合成层 (CompositingLayer):在特定情况，可以创建新的合成层，并新的图层可以利用GPU来加速绘制也可以提供性能