html首屏优化,浏览器是如何渲染页面的？如何优化首屏渲染性能？

先简要概述浏览器渲染的步骤：

处理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 事件触发之前完成。按顺序