浏览器从网络或硬盘中获得HTML字节数据后会经过一个流程将字节解析为DOM树：
<html>、<body>这样的标签以及标签中的字符串和属性等都会被转化为令牌，每个令牌具有特殊含义和一组规则）。令牌记录了标签的开始与结束，通过这个特性可以轻松判断一个标签是否为子标签（假设有<html>与<body>两个标签，当<html>标签的令牌还未遇到它的结束令牌</html>就遇见了<body>标签令牌，那么<body>就是<html>的子标签）。DOM是一个树形结构，这是因为标签之间含有复杂的父子关系，树形结构正好可以诠释这个关系（CSSOS同理，层叠样式也含有父子关系。例如： div p {font-size: 18px}，会先寻找所有p标签并判断它的父标签是否为div之后才会决定要不要采用这个样式进行渲染）。整个DOM树的构建过程其实就是： 字节 -> 字符 -> 令牌 -> 节点对象 -> 对象模型，下面将通过一个示例HTML代码与配图更形象地解释这个过程。
如下面的这段HTML
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="style.css" rel="stylesheet">
<title>Critical Path</title>
</head>
<body>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg"></div>
</body>
</html>当出现了页面性能问题时，或者在设计我们的应用之前，就可以参考如下的条目进行快速检查。
<head> 中link 替代 @import假设有一个HTML页面，它只引入了一个CSS外部文件：
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="style.css" rel="stylesheet">
</head>
<body>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg"></div>
</body>
</html>首先浏览器要先对服务器发送请求获得HTML文件，得到HTML文件后开始构建DOM树，在遇见<link>标签时浏览器需要向服务器再次发出请求来获得CSS文件，然后则是继续构建DOM树和CSSOM树，浏览器合并出渲染树，根据渲染树进行布局计算，执行绘制操作，页面渲染完成。
有以下几个用于描述关键渲染路径性能的词汇：
HTML文件与外部CSS文件style.css）。HTML文件，一次获取CSS文件，这个次数基于TCP协议的最大拥塞窗口，一个文件不一定能在一次连接内传输完毕）。9KB）。接下来，案例代码的需求发生了变化，它新增了一个JavaScript文件。
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="style.css" rel="stylesheet">
</head>
<body>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg"></div>
<script src="app.js"></script>
</body>
</html>
JavaScript文件阻塞了DOM树的构建，并且在执行JavaScript脚本时还需要先等待构建CSSOM树，上图的关键渲染路径特性如下：
HTML、style.css、app.js）style.css和app.js）现在，我们要优化关键渲染路径，首先将<script>标签添加异步属性async，这样浏览器的HTML解析器就不会阻塞这个JavaScript文件了。
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="style.css" rel="stylesheet">
</head>
<body>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg"></div>
<script src="app.js" async></script>
</body>
</html>app.js为异步加载，不会成为阻塞渲染的资源）app.js不再是关键资源，所以没有算上它的大小）接下来对CSS进行优化，比如添加上媒体查询。
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="style.css" rel="stylesheet" media="print">
</head>
<body>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg"></div>
<script src="app.js" async></script>
</body>
</html>app.js为异步加载，style.css只有在打印时才会使用，所以只剩下HTML一个关键资源，也就是说当DOM树构建完毕，浏览器就会开始进行渲染）优化关键渲染路径就是在对关键资源、关键路径长度和关键字节进行优化。关键资源越少，浏览器在渲染前的准备工作就越少；同样，关键路径长度和关键字节关系到浏览器下载资源的效率，它们越少，浏览器下载资源的速度就越快。
原文：https://www.cnblogs.com/liea/p/12499187.html