Page 160 - Web性能权威指南

最后，Web 应用把网页的简单依赖关系（在标签中使用媒体作为基本内容的补充）
转换成了复杂的依赖关系：标记定义结构、样式表定义布局，而脚本构建最终的交
互式应用，响应用户输入，并在交互期间创建样式表和标记。

结果，页面加载时间，这个一直以来衡量 Web 性能的事实标准，作为一个性能基础
也越来越显得不够了。我们不再是构建网页，而是在构建一个动态、交互的 Web 应
用。除了测量每个资源及整个页面的加载时间（PLT），还要回答有关应用的如下几
个问题：

• 应用加载过程中的里程碑是什么？
• 用户第一次交互的时机何在？
• 什么交互应该吸引用户参与？
• 每个用户的参与及转化率如何？

性能好坏及优化策略成功与否，与你定义应用的特定基准和条件，并反复测试的效
果直接相关。没有什么比得上应用特定的知识和测量，在关系到赢利目标和商业指
标的情况下更是如此。

DOM、CSSOM 和 JavaScript

前所说的“脚本、样式表和标记文档之间复杂依赖”到底指什么呢？要回答这个
问题，我们得先回顾一下浏览器架构，了解一下解析、布局和脚本如何相互配合
在屏幕上绘制出像素来（图 10-1）。

៺කຏ քਆ ࣼ዆

图 10-1：浏览器处理流水线：HTML、CSS 和 JavaScript

浏览器在解析 HTML 文档的基础上构建 DOM（Document Object Model，文档
对象模型）。与此同时，还有一个常常被忽略的模型——CSSOM（CSS Object
Model，CSS 对象模型），也会基于特定的样式表规则和资源构建而成。这两个模
型共同创建“渲染树”，之后浏览器就有了足够的信息去进行布局，并在屏幕上绘
制图形。到目前为止，一切都很好理解。

Web性能要点 ｜ 145