浏览器的底层渲染知识

一、客户端从服务器获取到需要渲染页面的源代码后，「开辟一个“GUI渲染线程”，自上而下解析代码，最后绘制出对应的页面」；自上而下渲染解析代码的过程是“同步”的，但是有些操作也是异步的；

二、 页面渲染的步骤：

三、前端性能优化 「CRP：关键渲染路径」减少DOM的“回流/重排”和重绘：

1、Layout/Painting：重要的优化手段（减少DOM的“回流/重排”和重绘）

• 第一次加载页面必然会有一次回流和重绘
• 触发回流操作后，也必然绘触发重绘；如果只是单纯的重绘，则不会引发回流；性能优化点，重点都在回流上；

2、 操作DOM消耗性能？ =>DOM的回流

这些操作都需要浏览器重新计算每一个元素在视口中的位置和大小（也就是重新Layout/Reflow）

四、修改样式的时候，巧妙的利用获取样式的操作，触发回流解决一些bug

  setTimeout(() => {
      // 立即回到left:0的位置
      box.style.transitionDuration = '0s';
      box.style.left = 0;

      // 刷新渲染队列（会增加一次回流）
      box.offsetLeft;

      // 回到开始位置后，再次运动到left:200位置(有动画)
      box.style.transitionDuration = '0.5s';
      box.style.left = '200px';
  }, 1000);复制代码