浏览器渲染机制

1. 浏览器渲染机制

   1. style样式渲染：

      1. style标签中的样式由html解析器进行解析；
      2. style标签内的样式是异步解析的（分组解析渲染，容易出现闪屏现象）

   2. link样式渲染：

      1. link引入的样式由stylesheet解析器解析
      2. 同步解析（css解析器会阻塞页面的渲染，但不干扰解析过程）
      3. 推荐使用link引入样式
   3. js对渲染的影响：

      JS会阻塞渲染

2. 浏览器的渲染过程

   • 请求（HTML request）并接收到HTML文件（receive Response；receive Data），解析转化为DOM树

     当然，在解析 HTML 文件的时候，浏览器还会遇到 CSS 和 JS 文件，这时候浏览器也会去下载并解析这些文件。

   • 将CSS文件转换为CSS样式树

     在这一过程中，浏览器会确定下每一个节点的样式到底是什么，并且这一过程其实是很消耗资源的。

   • 遇到 script 标签时调用JavaScript引擎 执行JS代码，绑定事件，修改 dom 树和 css 树
   • 生成渲染树（依赖GPU）

     渲染树只会包括需要显示的节点和这些节点的样式信息。

     比如说，如果某个节点是 display: none 的，那么就不会在渲染树中显示。

   • 会根据渲染树来进行布局（也可以叫做回流）；然后调用 GPU 绘制（paint），合成图层（composite），显示在屏幕上。

1. 阻塞

   1. css阻塞：

      1. style标签：

         • 由html解析
         • 不阻塞浏览器渲染
         • 不阻塞 DOM 解析

      2. link引入css：（推荐使用）

         • 由 css 解析器进行解析
         • 阻塞浏览器渲染
         • 阻塞 script 标签中 js 执行
         • 不阻塞 DOM 解析

      3. 优化的核心理念：尽可能提高外部 css 加载速度

         • 优化 css 代码
         • 通过合并css文件，减少http请求数
         • 对css进行压缩

   2. JS阻塞

      1. 阻塞后续DOM解析
      2. 阻塞渲染
      3. 阻塞后续JS执行

2. 图层

   浏览器渲染DOM所做的实际工作是：

   1. 获取dom，分割成多个图层
   2. recalculate style ：重新计算每个图层样式
   3. layout：回流（生成布局）
   4. paint：重绘（绘制图形）
   5. composite Layers：组合多个图层，呈现在页面上

3. 回流（重排）和重绘

   • 回流：布局或者几何属性需要改变就称为回流。

   • 重绘：当节点需要更改外观而不会影响布局的，比如改变 color 就叫称为重绘

     可能触发重绘的操作：

     • 浏览器窗口大小改变
     • dom 尺寸、位置、内容发生改变
     • 元素字体大小变化
     • 添加或者删除可见的 dom 元素
     • 查询某些属性时（例如clientWidth）
   • 回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多。

   • 优化方法：

     1. js：

        • 尽量使用class进行样式修改
        • 减少dom的增删次数，可使用 字符串 或者 documentFragment 一次性插入

     2. css：

        • 避免使用table布局
        • 将动画效果应用到position属性为absolute或fixed的元素上