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

Question

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

我怎样才能加快速度？基于Firebug中的网络图，它不是网络问题，但它似乎在日期选择器附件中排成一行。有没有办法加快速度呢？

此外，该行为仅在Firefox 3.0.11中出现。 Chrome浏览器快速而且快速，IE7也是如此。

Answer 1

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

分析器应该让你了解一下是什么：它是在代码中还是在jQuery UI中。

从更一般的意义上讲，请确保您使用高效的选择器来选择绑定日期选择器的元素。此外，日期选择器是否有可能将某些东西注入DOM（样式表，图像等），这些都是瓶颈（因为我使用了jQuery UI的日期选择器，所以这可能不是问题）？

Answer 2

dfa在我的主要帖子的评论中说得对。问题是Firebug。我猜它只是没有很好地与datepicker加载。一旦firebug关闭，页面加载时间约为0.5秒，就在它们应该的位置。

Answer 3

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

Answer 4

使用FireFox的FireBug和YSlow插件。前者允许执行时间和日志记录，后者有一个规则列表，并提供有关调整内容的建议。