2、浏览器的重排重绘

浏览器的重排重绘：
parse HTML => layout => paint => composite
我的翻译理解：解析HTML => 布局排版设计 => 发出绘画上色的指令 => 混合物；混合而成的绘制在屏幕上

重排重绘的本质就是触发layout和paint的过程，重排必定导致重绘。

引发重排重绘的常见操作：

• 重排：页面布局发生变化时会引起重排，如height、float、position等；
  获取布局信息是会导致重排，如offsetTop、getComputedStyle等
• 重绘：外观发生改变时会引起重绘，如color、background、opacity等

解决方案：

1. 对DOM进行批量写入和读取
2. 避免对样式进行频繁操作，合理使用样式
3. 使用变量对布局系信息进行缓存，避免因频繁读取布局信息 引发重排重绘
   等

减少重排重绘的意义：

• 降低浏览器的渲染耗费时间，使内容尽快渲染到屏幕上
• 提高浏览器的渲染效率，使页面交互流畅，让用户有更好的交互体验