浏览器的底层渲染知识

829 阅读1分钟

一、客户端从服务器获取到需要渲染页面的源代码后,「开辟一个“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);