Firebug Net 选项卡中报告的读取时间

Question

从 Firebug 的“网络”选项卡中查看此屏幕截图：

http://www.scdi.org/~avernet/try/firefox-times.png

我知道：

• 1 到 2 之间的时间是我的应用程序生成 HTML 和数据进入浏览器所用的时间。
• 3 到 4 之间的时间是我在 DOMContentLoaded 上运行的 JavaScript 初始化代码所用的时间。

但是 2 到 3 之间的时间呢？这就是 Firefox 需要“渲染”页面的时间吗？在这种情况下，它非常重要（大约 1.5 秒）。如何优化那部分？

Answer 1

2-3之间的时间是浏览器解析和渲染1-2之间下载的文件内容的时间。这包括可能存在的所有 HTML 和任何内联 CSS 或 javascript。缩短此时间的最简单方法是 1) 发送更少的数据供浏览器解析 2) 确保您的 HTML/CSS 验证和 3) 注意非常慢的 CSS 规则/表达式。

一般来说，大多数人不会关注浏览器需要多长时间才能完全呈现页面，而是关注它在客户端开始呈现的速度。通常称为渐进式渲染，它允许浏览器在整个页面被渲染之前开始显示部分页面。没有发生这种情况的最常见原因之一是将页面内容放在 a 中，这会阻止浏览器在完全解析之前呈现它。 This post 有一些关于如何做到这一点的不错的技巧。您可能想查看YSlow Firefox 扩展程序，它可以为您提供一些关于如何使您的网站更快的不错的提示。