浏览器是如何渲染页面的？如何优化首屏渲染性能？
先简要概述浏览器渲染的步骤：
- 处理HTML标记并构建DOM树
- 处理CSS标记并构建CSSOM树
- 将DOM与CSSOM合并成一个渲染树
- 根据渲染树来布局，计算每个节点的布局信息
- 将各个节点绘制到屏幕上
如果DOM或CSSOM被修改，就会重新执行上面所有步骤
3055132361-55169ffa877a0_articlex.png
构建对象模型(DOM，CSSOM）
浏览器解析HTML文档时，会完成以下步骤：
- 读取HTML的原始字节，根据文件制定编码（例：utf-8）解析为各个字符
- 将字符串转化为各种标签
- 将标签转化为node节点
- DOM构建
full-process.png
浏览器解析HTML时，遇到link标签，会发出请求并返回资源，开始解析CSS：
CSS字节转换为字符，接着转换成令牌和节点，最后构建生成CSSOM
cssom-tree.png
CSSOM和DOM是独立的数据结构
渲染树构建、布局及绘制
CSSOM树和DOM树合并成渲染树，然后用于计算每个可见元素的布局，并输出给绘制流程，将像素渲染到屏幕上。
构建渲染树的步骤：
- 从DOM树的根节点开始遍历每个可见节点（display:none与visibility:hidden的区别）
- 对于每个可见节点，为其找到适配的CSSOM规则并应用它
- 生成渲染树
布局阶段：输出盒模型
绘制：输出到屏幕上的像素
CSS阻塞渲染
CSS 是阻塞渲染的资源。需要将它尽早、尽快地下载到客户端，以便缩短首次渲染的时间。
这就是为什么我们将外部样式的引入放在head标签中的原因，在body渲染前先把相对完整CSSOM Tree构建好。
对于某些CSS样式只在特定条件下叉用，添加媒体查询解决。
请注意“阻塞渲染”仅是指浏览器是否需要暂停网页的首次渲染，直至该资源准备就绪。无论哪一种情况，浏览器仍会下载 CSS 资产，只不过不阻塞渲染的资源优先级较低罢了。
JavaScript阻塞渲染
JavaScript 会阻止 DOM 构建和延缓网页渲染。 为了实现最佳性能，可以让您的 JavaScript 异步执行，并去除关键渲染路径中任何不必要的 JavaScript。
- JavaScript 可以查询和修改 DOM 与 CSSOM。
- JavaScript 执行会阻止 CSSOM。
- 除非将 JavaScript 显式声明为异步，否则它会阻止构建 DOM。
- 如果浏览器尚未完成 CSSOM 的下载和构建，而我们却想在此时运行脚本，浏览器将延迟脚本执行和 DOM 构建，直至其完成 CSSOM 的下载和构建。
简言之，JavaScript 在 DOM、CSSOM 和 JavaScript 执行之间引入了大量新的依赖关系，从而可能导致浏览器在处理以及在屏幕上渲染网页时出现大幅延迟：
- 脚本在文档中的位置很重要
- 当浏览器遇到一个 script 标记时，DOM 构建将暂停，直至脚本完成执行。
- JavaScript 可以查询和修改 DOM 与 CSSOM。
- JavaScript 执行将暂停，直至 CSSOM 就绪。
async属性：加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。无顺序
defer属性： 加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。按顺序
