Page 161 - Web性能权威指南
P. 161
然而，此时不得不提到我们最大的朋友和祸害：JavaScript。脚本执行过程中可能
遇到一个同步的 document.write，从而阻塞 DOM 的解析和构建。类似地，脚本
也可能查询任何对象的计算样式，从而阻塞 CSS 处理。结果，DOM 及 CSSOM
的构建频繁地交织在一起：DOM 构建在 JavaScript 执行完毕前无法进行，而
JavaScript 在 CSSOM 构建完成前也无法进行。
应用的性能，特别是首次加载时的“渲染前时间”，直接取决于标记、样式表和
JavaScript 这三者之间的依赖关系。顺便说一句，还记得流行的“样式在上，脚本
在下”的最佳实践吗？现在你该知道为什么了。渲染和脚本执行都会受样式表的
阻塞，因此必须让 CSS 以最快的速度下载完。
10.2 剖析现代Web应用
现代 Web 应用到底长啥样？ HTTP Archive （http://httparchive.org/）可以回答这个问
题。这个网站项目一直在抓取世界上是热门的网站（Alexa 前 100 万名中的 30 多万
名），记录、聚合并分析每个网站使用的资源、内容类型、首部及其他元数据的数量。
2013 年初，一个普通的 Web 应用由下列内容构成。
• 90 个请求，发送到 15 个主机，总下载量 1311 KB
HTML：10 个请求，52 KB
图片：55 个请求，812 KB
JavaScript：15 个请求，216 KB
CSS：5 个请求，36 KB
其他资源：5 个请求，195 KB
在你读到这里的时候，前面所有数字都会变大（图 10-2），持续向上的趋势一直都
很稳定，而且没有停止的迹象。不过，抛开实际的请求和字节数不提，更值得关注
的还是个别组件的量级：现在，一个普通的 Web 应用大约就有 1 MB，有 100 个左
右的资源分散在 15 台不同的主机上！
与桌面应用相比，Web 应用不需要单独安装，只要输入 URL，按下回车键，就可
以正常运行。可是，桌面应用只需要安装一次，而 Web 应用每次访问都需要走一遍
“安装过程”——下载资源、构建 DOM 和 CSSOM、运行 JavaScript。正因为如此，
Web 性能研究迅速发展，成为人们热议的话题也就不足为怪了。上百个资源、成兆
字节的数据、数十个不同的主机，所有这些都必须在短短几百 ms 内亲密接触一次，
才能带来即刻呈现的 Web 体验。
146 ｜ 第 10 章
