浏览器是如何渲染页面的

浏览器是如何渲染页面的？如何优化首屏渲染性能？
96 cccccchenyuhao
2018.10.10 16:50 字数 973 阅读 1414评论 0喜欢 2赞赏 1
先简要概述浏览器渲染的步骤：

处理HTML标记并构建DOM树
处理CSS标记并构建CSSOM树
将DOM与CSSOM合并成一个渲染树
根据渲染树来布局，计算每个节点的布局信息
将各个节点绘制到屏幕上
如果DOM或CSSOM被修改，就会重新执行上面所有步骤

构建对象模型(DOM，CSSOM）
浏览器解析HTML文档时，会完成以下步骤：

读取HTML的原始字节，根据文件制定编码（例：utf-8）解析为各个字符
将字符串转化为各种标签
将标签转化为node节点
DOM构建

浏览器解析HTML时，遇到link标签，会发出请求并返回资源，开始解析CSS：

CSS字节转换为字符，接着转换成令牌和节点，最后构建生成CSSOM

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 事件触发之前完成。按顺序
转载文章