你如何进行页面性能测试？

Question

我知道读过这个问题的每个人都会想到“萤火虫！”马上。也许有人会想“YSlow！”和“Google Page Speed！”

虽然我非常喜欢这些工具，但我更关心的是如何在IE 6/7/8中快速呈现页面。以上所有工具都需要Firefox。这一切都很好，你绝对可以测试将页面提供给浏览器的基本速度，但是实际渲染页面的时候呢？

关于如何在浏览器级别测试优化，我没有看到任何真正好的答案。你如何在不同的浏览器中编写HTML / JS的性能测试？

Answer 1

我不确定只针对一家供应商进行优化是一项有用的工作：

• 关于HTML，大多数浏览器都是为了优化标准布局技术（表格，无表格等）而编写的。
• 渲染引擎很完美 IE6和IE8之间有所不同，所以 已经是两个不同的了 浏览器
• 大多数优化技术 是浏览器的标准（put 底部的JavaScript，所以你没有 阻止页面加载，将javascript移动到 外部文件，使用多个主机名 用于图像等利用 并行加载，不要使用表 对于整体布局，请确保缓存 标题是正确的，等等。）
• 一旦你有一个针对Firefox优化的网站，我认为只要为IE调整它就没有什么可以获得的;除非您的站点主要是静态内容，否则您可以在此时在应用程序级别执行更多操作（优化查询等），在这种情况下，您可以调查缓存，HTTP压缩等。
• 如果您的关注实际上是在优化IE的Javascript代码，那么有许多优秀的跨浏览器Javascript库可以跨越浏览器平台实现最佳执行时间，所以再次选择跨浏览器解决方案是要走的路
• 浏览器格局不断发展，您的客户可能会在某个时刻转移到另一个平台;现在，针对几种不同浏览器进行优化将会产生更多兼容代码，这些代码在将来的某个时刻进行平台更​​改时更有可能表现良好。
• 我认为编写跨浏览器优化的代码将导致代码库更易于维护，魔术IE黑客数量减少，其存在的原因很快就会在时间的迷雾中丢失

Answer 2

您可以使用IE high performance tester。

Answer 3

你可以获得适用于IE（以及Opera和Safari）的Firebug：

http://getfirebug.com/lite.html

Answer 4

在文档的开头放置一个脚本块，并将其设置为window.onload。通过Number(new Date)在每个“序列点”抓取当前时间戳，您可以首先了解页面需要以浏览器无关的方式呈现多长时间。

Answer 5

我不假装知道绝对的答案。但有一种方法是：

• 使用wget之类的工具来衡量获取页面的时间
• 使用像firebug这样的工具来衡量整体速度
• 差异为您提供浏览器所花费的时间

虽然这可能不是一个完全令人满意的答案，但我会发现这是最简单的。

顺便说一下，您认为使用“浏览器级别测试”可以突出显示的性能方面是什么，而不能通过“firebug级别测试”？

干杯，

JRH

Answer 6

我非常喜欢AOL's PageTest工具，它结合了Firebug，YSlow和PageTest中的大量实用工具，并将其包装在一个带有一些不错功能的漂亮网页界面中。首先，它可以在美国或国际地区的IE7或IE8（不是6，对不起）上运行，以便更好地了解那里的性能。它提供了类似于Firebug网络面板中的瀑布图，它们可用于确定花费的时间。它还提供了与YSlow中的内容类似的修复建议。最后，它允许您在同一站点上运行多个试验，以便您可以获得更准确的结果，同时最大限度地减少外部因素。

在大多数情况下，我同意OrbMan的意见，因为对所有浏览器进行优化非常重要。由于这些优化是跨浏览器，因此在性能方面您将获得最大的优势。只有这样才能开始考虑特定于浏览器的改进。

网上有很多Google Tech Talks谈论改善网络效果。 This blog post包含与此主题最相关的会谈列表。

Answer 7

WebWait可在任何浏览器中使用。

这是您的网络效果实用程序带中的另一种工具。