Page 165 - Web性能权威指南

资源的瀑布图能够揭示出页面的结构和浏览器处理顺序。首先，取得 www.yahoo.
com 对应的文档，同时分派新的 HTTP 请求：HTTP 解析是递增执行的，这样浏览
器可以及早发现必要的资源，然后并行发送请求。实际上，何时获得什么资源很大
程度上取决于标记结构。浏览器可以变更某些请求的优先顺序，但递增地发现文档
中的每一个资源，最终造就了不同资源间的“瀑布效果”。

其次，“Start Render”（绿色的竖线）会在所有资源下载完成前开始，以便用户在页
面构建期间就能与之交互。其实，“Document Complete”事件（蓝色的竖线） 也会
在剩余资源下载完成前触发。换句话说，浏览器的加载旋转图标此时停止旋转，用
户可以继续与页面交互，但 Yahoo! 主页会渐进地在后台填充后续内容，比如广告
和社交部件。

最早渲染时间、文档完成时间和最后资源获取时间，这三个时间说明我们讨论 Web
性能时有三个不同测量指标。我们应该关注哪一个时间呢？答案并不唯一，因应用
而不同！ Yahoo! 的工程师们选择了利用浏览器递增加载机制，让用户能够尽早与
重要内容交互。而这样一来，他们必须根据应用不同，确定哪些内容重要（须先加
载），哪些内容不重要（可以后填充）。

什么时候请求什么资源，以什么顺序请求资源，这在不同的浏览器中可能
有不同的实现。结果，你的应用性能也会因浏览器而异。
提示：WebPageTest 支持选择位置和浏览器。

网络的瀑布图是个很强大的工具，有助于揭示任何页面或应用是否处于优化状态。
前面分析和优化资源瀑布的过程，一般称为前端性能分析和优化。不过，这个称呼
有误导性，好像所有性能瓶颈都在客户端似的。实际上，尽管 JavaScript、CSS 和
渲染流水线很重要，而且资源对性能影响很大，但服务器响应时间和网络延迟（“后
端性能”）对资源瀑布的影响也不容忽视。毕竟，如果网络被阻塞，也就谈不上什么
解析或运行资源了！
为了说明这一点，只要切换到 WebPageTest 资源瀑布的连接视图即可（图 10-5）。

资源瀑布图记录的是 HTTP 请求，而连接视图展示了每个 TCP 连接（这里共 30
个）的生命期，这些连接用于获取 Yahoo! 主页的资源。哪里比较突出呢？注意蓝
色的下载时间，很短，在每个连接的总延迟里几乎微不足道。这里总共发生了 15
次 DNS 查询，30 次 TCP 握手，还有很多等待接收每个响应第一个字节的网络延迟
（绿色）。

150 ｜ 第 10 章