如何确定页面加载的瓶颈？答案

【问题标题】：How can I determine the bottle neck on page load?如何确定页面加载的瓶颈？
【发布时间】：2010-11-04 03:11:56
【问题描述】：

我有一个使用 jQuery UI 的页面，并在 2 个不同的文本框上调用 datepicker。没有电话，即。只需加载页面而不附加任何日期选择器，页面将在 1.20 秒内加载。附加日期选择器后，页面加载时间为 3.92 秒。（这是在Firefox中）

如何才能加快速度？根据 Firebug 中的网络图，这不是网络问题，但它似乎在 datepicker 附件中。有没有办法加快速度？

此外，该行为仅在 Firefox 3.0.11 中可见。 Chrome 又快又快，IE7 也是如此。

【问题讨论】：

【解决方案1】：

尝试运行Firebug's code profiler 以查看哪些功能使事情陷入困境。基本上，点击“配置文件”按钮，刷新页面，让它加载，然后再次点击“配置文件”按钮以读取消耗最多资源或花费时间最长的内容。

分析器应该让您了解正在发生的事情：无论是在您的代码中还是在 jQuery UI 中。

在更一般的意义上，请确保您使用高效的选择器来选择将日期选择器绑定到的元素。此外，日期选择器是否有可能向 DOM（样式表、图像等）注入一些瓶颈（自从我使用 jQuery UI 的日期选择器以来已经有一段时间了，所以这可能不是问题）？

【讨论】：

【解决方案2】：

dfa 在我的主要帖子的 cmets 中正确。问题是萤火虫。我猜它只是不能很好地加载日期选择器。关闭 firebug 后，页面加载时间大约为 0.5 秒，正是它们应该在的地方。

【讨论】：

【解决方案3】：

我建议看看这个链接：http://net.tutsplus.com/articles/web-roundups/20-tools-to-make-the-life-of-a-web-developer-easier/。在那里，您会找到指向 http://tools.pingdom.com/ 的链接，这将帮助您确定页面加载问题。试试你的页面的两个版本，看看这个工具能为你发现什么。

【讨论】：

【解决方案4】：

为 FireFox 使用 FireBug 和 YSlow 插件。前者允许执行计时和日志记录，后者有一个规则列表并就调整什么提出建议。

【讨论】：