阅读时间

Question

请参阅从Firebug的Net选项卡这个截图：

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

我知道：

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

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

Answer 1

2-3之间的时间是浏览器解析并呈现1-2之间下载的文件内容。这包括所有的HTML和任何内联CSS或JavaScript。最简单的方法是1）发送较少的数据以便浏览器解析2）确保HTML/CSS验证并且3）注意真正缓慢的CSS规则/表达式。

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