关键渲染过程学习笔记——浏览器渲染

[yuqingc]

渲染过程

整体过程

• DOM 解析过程

• CSSOM 解析

• Render Tree

• Layout (Reflow) 布局/回流

• Paint (Rasterizing) 绘制/栅格化

DOM 解析

• 渐进式（incrementally），可以边下载，边构造 DOM Tree

• DOM 根据 HTML 从上至下解析

• 解析过程

  • 二进制 -> 字符串（根据特定的 encoding，如 UTF-8）
  • 字符串 -> Token
  • Lexing：把 Token 解析为一个个 Node 对象
  • 构造 DOM Tree

CSSOM 解析

• 阻塞，需要全部 CSS 文件，才能解析 CSSOM

• 解析过程于 DOM 解析类似

Render Tree 解析

• 需要等 DOM 和 CSS 解析完毕才开始 Render Tree 的解析

• 因为 CSSOM 的解析是阻塞的，要等 CSS 全部下载完成才能开始 Render Tree，所以需要尽早下载 CSS

• display: none; 不会出现在 Render Tree

JavaScript

• 默认情况下，下载和执行会阻塞 DOM 的解析

• CSS 放在开头，为了更早下载完，因为 CSS 会阻塞 Render Tree 渲染

• JS 放在底部，是为了执行的时候 DOM 已经解析完毕，而不阻塞 DOM 的解析和渲染

• async，异步下载，下载完执行

• defer，异步下载，DOM 渲染完执行

Layout

Paint

Performance（性能）

Frame（帧）

• 60 FPS，一帧 1/60 秒（16ms）

• 理想情况下，一般一帧会发生：

  • 代码执行
  • 样式计算
  • Layout
  • GC
  • Paint

• 如果 JS 执行时间长，上述事务总时间超过了 1/60s，则后面的帧就会被占用和丢弃，导致画面卡顿

• 所以代码尽量在远小于 16ms 内完成，给浏览器 GC、Reflow、Paint 留出时间

[xyxiao001]