前端不止：Web性能优化 - 关键渲染路径以及优化策略
作者：网友投稿 时间：2018-06-28 09:27
我问你：“当你从搜索引擎的结果页面选择打开一条搜索结果时，你觉得多长时间之后，如果页面还处于白屏或者没有加载到关键信息，你会选择关掉这个窗口?”
《Designing for Performance》的作者 Lara Swanson 在2014年写过一篇文章《Web性能即用户体验》，她在文中提到“网站页面的快速加载，能够建立用户对网站的信任，增加回访率，大部分的用户其实都期待页面能够在2秒内加载完成，而当超过3秒以后，就会有接近40%的用户离开你的网站”。
Google和亚马逊的研究表明，Google页面加载的时间从0.4秒提升到0.9秒导致丢失了20%流量和广告收入，对于亚马逊，页面加载时间每增加100毫秒就意味着1%的销售额损失。可见，页面的加载速度对于用户可能的下一步操作是多么的举足轻重。
想一想，如果你希望你的网站在一秒钟之内呈现用户想看的关键信息，有哪些可行的手段?Minify，压缩，雪碧图等等。
Google的Web性能工程师 Ilya Grigorik 会告诉你，你只需要理解浏览器的关键渲染路径。
页面性能可能是一个感性的东西
页面的性能，看似是一个理性和量化的概念，实则也来自于用户的感知，主观的评价，是一个偏感性的东西。
(参考自Google关键渲染路径)
如果页面可以做到优先显示与用户操作有关的内容，就可以让用户更快速的感知到操作得到响应，这个过程叫做“优化关键渲染路径”。
什么是关键渲染路径
我记得，有一个非常经典的面试题叫做：《当浏览器地址栏输入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>
;){kind=link}
;){kind=link}
;){kind=link}
;){kind=link}