Page 174 - Web性能权威指南
P. 174
探寻的过程中，我们怎么利用浏览器的这些机制呢？首先，要密切关注每个页面的
结构和交付：
• CSS 和 JavaScript 等重要资源应该尽早在文档中出现；
• 应该尽早交付 CSS，从而解除渲染阻塞并让 JavaScript 执行；
• 非关键性 JavaScript 应该推迟，以避免阻塞 DOM 和 CSSOM 构建；
• HTML 文档由解析器递增解析，从而保证文档可以间隙性发送，以求得最佳性能。
除了优化页面结构，还可以在文档中嵌入提示，以触发浏览器为我们采用其他优化
机制：
<link rel="dns-prefetch" href="//hostname_to_resolve.com"> ➊
<link rel="subresource" href="/javascript/myapp.js"> ➋
<link rel="prefetch" href="/images/big.jpeg"> ➌
<link rel="prerender" href="//example.org/next_page.html"> ➍
➊ 预解析特定的域名
➋ 预取得页面后面要用到的关键性资源
➌ 预取得将来导航要用的资源
➍ 根据对用户下一个目标的预测，预渲染特定页面
这里的每一个提示都会触发一个推测性优化机制。浏览器虽然不能保证落实，但可
以利用这些提示优化加载策略。可惜的是，并非所有浏览器都支持这些提示（表
10-2）。不过，如果它们不支持，也只会把提示当成空操作，有益无害。因此，一定
要尽可能利用这些手段。
表10-2：推测性浏览器优化提示
浏览器 DNS预获取 重要资源 预获取 预渲染
Firefox 3.5+ N/A 3.5+ N/A
Chrome 1.0+ 1.0+ 1.0+ 13+
Safari 5.01+ N/A N/A N/A
IE 9+（预获取） N/A 10+ 11+
IE9 支持“DNS 预获取”，但叫“预获取”（prefetch）。在 IE10+ 中，dns-prefetch
和 prefetch 是等价的，都能用于指定 DNS 预获取。
对大多数用户甚至 Web 开发者而言，DNS、TCP 和 SSL 延迟完全不可见，它们都是
在网络层协商确定的，我们中很少有人关注它们。然而，这其中每一步都关乎整体的
用户体验，因为每一次额外的网络往返都会增加几十甚至几百 ms 的网络延迟。通过
帮助浏览器预测这些往返，可以消除这些瓶颈，从而向用户交付更快更好的体验。
Web性能要点 ｜ 159
