多个 document.ready() 的性能指标答案

【问题标题】：multiple document.ready()'s performance metrics多个 document.ready() 的性能指标
【发布时间】：2010-12-22 03:27:12
【问题描述】：

我有几个在运行时被合并和缩小的 javascript 文件。这适用于拥有 10 多个开发人员的企业应用程序。到处都有 document.ready 函数，导致 5 秒以上的 javascript 加载。我希望通过慢慢删除功能来找出瓶颈所在的更多帮助。

例如

file1.js

$(document).ready(function() {
  // 100s of lines of code
});

file2.js

// 100s of lines...
$(document).ready(function() {

  // 100s of lines of code

});
// 100s of lines...

我想加入一些指标，这样我就可以慢慢评论不同的功能，看看究竟是什么产生了影响。本质上，我需要一种方法来监控 document.ready 运行所需的总时间。

我在想也许我可以使用 jQuery 来完成这个。也许将我项目中的所有 $(document).ready 更改为使用 jquery 包装器，然后在其周围放置一个计时器。或者，我可以运行一个函数作为第一个脚本（在包含组合/压缩文件之前）来启动一个计时器。我只是不确定该计时器何时可以停止并显示。有什么想法吗？

编辑： 我知道 firebug 可以做到这一点，但我正在开发一个巨大的企业应用程序，不幸的是，firebug 目前不是我的选择。我真的希望只是在 HTML 中附加一个数字。例如：

document.ready 时间：653ms

【问题讨论】：

我相信你想要做的事情可以用 Firebug 来完成（也许是 YSlow！）

标签： javascript jquery performance

【解决方案1】：

我认为您应该做的第一件事是启动 Firebug 或 Safari 分析器并查看实际占用的时间。

在此之后，使用 Page-Speed 和 YSlow 可以帮助您找到有关加载速度瓶颈的更多信息。

仅在 document.ready 上拥有多个侦听器并不会真正减慢速度 - 很可能是在这些侦听器上运行的代码，或者您正在加载的代码量。

【讨论】：

Firebugs Profile 功能绝对是解决这个问题的正确工具。 +1
我很想用firebug，但不幸的是这是一个专为IE6设计的企业应用。由于某种原因，当我尝试在 Firefox 中运行它时，javascript 不起作用，我还没有时间弄清楚那个。我想我可以为 IE 尝试 firebug lite，但我希望能得到一个可以放在页面顶部的总数，以便我团队中的其他开发人员也可以使用它
除非您使用 ActiveX，否则修复它以使其适用于其他浏览器应该相对简单。这会让你的工作更轻松，如果你的老板不喜欢这个主意，请告诉他，将来只有 IE6 的应用程序可能无法运行 - 你的雇主愿意浪费那么多钱吗？ ;)

【解决方案2】：

感谢 blesh，这是我正在寻找的解决方案：

编辑生产的 jQuery-1.3.2 并用这个包围 jQuery.ready() 调用：

var startTime = new Date(); 
jQuery.ready(); 
var endTime = new Date(); 
var difference = endTime - startTime; 
alert("document.ready time: " + difference + " milliseconds");

对于 IE，jQuery.ready() 是第 3066 行。

当然，警报可以替换为直接输出到屏幕的内容，具体取决于您的布局。

谢谢你！

【讨论】：

我不确定这对他有什么好处，除了跨越整个 ready() 执行的时间。此外，在 jquery unminified 文件中进入 jQuery.ready() 并围绕它进行速度检查不是更容易吗？也许找到一些可疑代码并为这些区域计时会更好？

【解决方案3】：

这不是 $(document).ready(fn) 调用的数量让你...如果你看看 jQuery 的内部工作原理，它并没有做任何花哨的事情。它只是将您传入的所有函数放入一个数组中，然后在加载 DOM 后调用 jQuery.ready() 时执行每个函数。

如果我是你，我会看一些东西：

您的 html 输出有多大？是否有大量嵌套元素？这可能会减慢 DOM 加载速度。
您是否在页面加载开始时执行大量 ajax 调用，而您必须等待脚本才能完成？
您是否在 jQuery 中使用了非常低效的选择器？这里有很多posts 。

希望对您有所帮助。

【讨论】：

感谢您的建议。你是对的——我正在查看你提到的所有内容以及更多内容。该问题的目的是安装指标，以便当我查看您概述的内容时，我可以看到哪些改进实际上正在产生影响。不过，您上面的解决方案正是我一直在寻找的。span>

【解决方案4】：

如果您卡在 IE6 上，dynaTrace Ajax 可能值得关注。它应该允许以类似于您在 Firebug 的分析器中所做的方式检查和分析脚本。这将为您节省代码更改...

很遗憾，我（目前）还没有个人经验，但其他人有（请参阅推荐中的链接。抱歉，我没有足够的代表在这里发布链接）。

【讨论】：