如何使用 Firebug 来判断导致页面加载缓慢的原因？答案

【问题标题】：How can I use Firebug to tell what's causing slow page loads?如何使用 Firebug 来判断导致页面加载缓慢的原因？
【发布时间】：2012-08-22 05:43:57
【问题描述】：

我正在处理一个复杂的页面，其中包含多个脚本、CSS 文件、大量动态生成的 HTML、脚本加载脚本以及各种疯狂的东西。自然，有时页面加载速度很慢。

我发现很难实时判断到底是什么在减慢速度。 Firebug 的“网络”选项卡可以帮我解决这个问题吗？当然，我查看了“网络”选项卡，但它似乎只显示文件在加载之后。还有其他工具可以帮助我吗？我想要的是能够看到页面仍在加载，并确切地看到仍在加载的内容。

FireFox 的状态栏告诉我一点...它说“等待 www.mydomain.net”，但它并没有准确地告诉我它在等待哪个文件。我假设这里有一个文件是瓶颈，它会阻止所有后续文件加载，但我承认，我对浏览器如何获取文件的细节知之甚少。

【问题讨论】：

【解决方案1】：

有一个名为 YSlow 的 Firefox 插件应该会有所帮助。

【讨论】：

【解决方案2】：

在控制台标签 - 点击配置文件...它将帮助您查明哪些功能运行缓慢。

我也强烈推荐 Firebug 的 YSlow 插件。它将帮助诊断许多问题，从缓存和 gzip 到可能会减慢速度的 HTTP 请求数量。

【讨论】：

【解决方案3】：

还有Google Page Speed，它的作用与 YSlow 类似。

【讨论】：

【解决方案4】：

在这种情况下，您最好的选择是 Fiddler（独立程序）、Tamper Data 或 Live Headers（两个 Firefox 插件）。

每个都可以让您看到传入的 HTTP 请求。这些可以让您实时查看正在请求的内容，并且应该让您更深入地了解哪些问题正在挂起您的网站。祝你好运！

【讨论】：

【解决方案5】：

如果您等到页面完成加载，Firebug 会在“网络”选项卡中显示花费了很长时间的文件。

我同意 Firebug 显示所有当前加载的文件会很棒。

【讨论】：

【解决方案6】：

复杂的东西必然有改进的余地。我不是 Firebug 专家，但你能暂停执行，看看它在做什么，为什么？如果你这样做几次，you should be able to spot time expenditures that aren't really necessary。

【讨论】：