如何测试网站部件的性能？

Question

实际上，我已经得到了一份测试一个网站的工作，这个网站不知何故在性能上苦苦挣扎。详细地说，我应该挑选出文档的不同部分，并检查它们的等待->加载->完成状态。因为我熟悉firebug，所以我测试了很多网站作为一个整体。但是现在我需要知道什么时候开始一个特殊的DIV渲染，它什么时候结束，它之前等待了多长时间。我们的目标是找出网站的哪一部分花了多长时间才被绘制。

Answer 1

我怀疑你是否能够用你想要的方式来衡量页面的各个部分。我会通过删除页面的部分，测量子集的页面，并从这些测量中推断出哪些部分是最慢的。

请记住，这种逻辑可能不正确。例如，您可能有一个包含两个部分的页面。您可以通过创建子集页面来单独测量这两个部分。两部分相加的时间不等于总和的时间。而且其中一部分看起来比另一部分慢并不意味着当“慢”部分组合在一起时，“慢”部分占了大部分时间。浏览器是非常复杂的机器，它们并不总是按照你想象的方式运行。

Answer 2

AFAIK，打印div的速度不是你应该担心的问题。如果有一些服务器端语言，那么我建议在部分开始之前为当前时间赋值一个变量，并将其与部分结束后的时间进行比较。你可以减去它们，得到做这部分工作所用的时间。

如果涉及到javascript，我建议使用chrome dev工具的时间线面板。它显示了所有内容，从css重新计算和打印style/div到ajax/(如果使用) db查询。

Answer 3

由于您熟悉Firebug，因此可以使用HttpWatch工具来记录浏览器发出的所有特定http请求的确切请求和响应时间。

因此，当一个特殊的DIV渲染开始时，这个工具将捕获相同的请求和响应时间。

http://www.httpwatch.com/

万事如意！