浏览器的回流和重绘

重绘

• 仅仅是改变单个元素的样式 颜色 背景等～ 重新渲染 开销效果对较小
  • 修改元素的颜色、背景等样式。
  • 修改元素的文本样式，例如字体、字体大小等。
  • 修改元素的阴影、边框等效果样式。
• 由于重绘仍然需要重新绘制并提交受到影响的元素，因此如果重绘的操作过于频繁还是会造成卡顿

回流

• 回流是一种计算密集型的操作，需要浏览器重新计算多个元素的样式和布局，因此会消耗大量的CPU资源。
  * 修改元素的尺寸（宽度、高度）或位置（top、left）。
  * 添加或删除可见的DOM元素。
  * 修改文档的结构，例如改变元素的父子关系。
  * 修改元素的样式，如修改元素的背景颜色、字体大小等。
• 流的频繁发生可能会导致页面性能下降，特别是在较复杂的页面或涉及到大量元素的情况下 会造成页面卡顿
• 避免页面的回流

升级

• 为了提声性能 很多框架 在DOM 树的基础上建立一个抽象层，即虚拟DOM树，
• 对数据和状态所做的任何改动，都会被自动且高效的同步到虚拟 DOM ，
• 通过 Diff 算法，计算出树中变化的部分，然后只更新变化的部分（DOM操作），
• 从而避免整棵树重构，提高性能

思考题：

• Diff操作和DOM批量更新难道不应该是浏览器的职责吗？第三方框架中去做合不合适？