我问你：“当你从搜索引擎的结果页面选择打开一条搜索结果时，你觉得多长时间之后，如果页面还处于白屏或者没有加载到关键信息，你会选择关掉这个窗口？”
《Designing for Performance》的作者 Lara Swanson 在2014年写过一篇文章《Web性能即用户体验》，她在文中提到“网站页面的快速加载，能够建立用户对网站的信任，增加回访率，大部分的用户其实都期待页面能够在2秒内加载完成，而当超过3秒以后，就会有接近40%的用户离开你的网站”。
Google和亚马逊的研究表明，Google页面加载的时间从0.4秒提升到0.9秒导致丢失了20%流量和广告收入，对于亚马逊，页面加载时间每增加100毫秒就意味着1%的销售额损失。可见，页面的加载速度对于用户可能的下一步操作是多么的举足轻重。
想一想，如果你希望你的网站在一秒钟之内呈现用户想看的关键信息，有哪些可行的手段？Minify，压缩，雪碧图等等。
Google的Web性能工程师 Ilya Grigorik 会告诉你，你只需要理解浏览器的关键渲染路径。
页面性能可能是一个感性的东西
页面的性能，看似是一个理性和量化的概念，实则也来自于用户的感知，主观的评价，是一个偏感性的东西。
如果页面可以做到优先显示与用户操作有关的内容，就可以让用户更快速的感知到操作得到响应，这个过程叫做“优化关键渲染路径”。
什么是关键渲染路径
我记得，有一个非常经典的面试题叫做：《当浏览器地址栏输入URL并回车后，发生了什么？》。
关键渲染路径就是描述浏览器从收到 HTML、CSS 和 JavaScript 字节开始，到如何使用HTML、CSS 和 JavaScript 在屏幕上渲染像素的中间过程。
如果我们能够优化这条路径，就能让页面更快速的展示内容，给用户更好的体验。
全景图
我们先尝试站在高处，看一眼关键渲染路径的全景图，这样能够快速的领略一个大致轮廓和一些关键概念。
文档对象模型 (DOM)
DOM概念之于Web开发人员再熟悉不过了，当浏览器发出请求并接收到HTML文档后，它会有这样一个流程来构建DOM：字节 → 字符 → 令牌 → 节点 → 对象模型。
以下面这段代码为例：
<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>浏览器接收到HTML请求的返回结果，根据预定的流程解析HTML，文档中的“开标签”，比如<html>，<head>等会转换成一个令牌（Token），然后令牌转换成节点对象（Node）。
这个令牌解析并转换为节点对象的过程，也是每个节点建立关系（树形结构）的过程。例如：head的令牌出现在html令牌之后，但其闭标签出现在html闭标签之前，这就意味着head是html的子节点，以此类推，建立节点的父子关系。
这个过程在浏览器中，叫做“Parse HTML”。
CSS 对象模型 (CSSOM)
当DOM捕获了页面的内容，我们还需要知道页面如何展示这些内容，所以需要构建CSS 对象模型（CSSOM）。
浏览器解析DOM，遇到了link标签，发现它引用了一个外部样式资源：style.css，于是浏览器会向外部请求样式资源，然后进
最低0.47元/天 解锁文章
727
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
