Question

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

E.g。

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包装器然后在其周围放置一个计时器。或者，我可以运行一个函数作为第一个脚本（在包含组合/ minfied文件之前）来启动计时器。我只是不确定该计时器何时可以停止并显示。有什么想法吗？

修改我知道firebug可以做到这一点，但是我正在研究一个巨大的企业应用程序，但很遗憾，firebug不适合我。我真的希望只是在HTML上附加一个数字。 E.g：

document.ready time：653ms

Answer 1

我认为你应该做的第一件事是启动Firebug或Safari分析器，看看实际上一直在做什么。

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

在document.ready上只有多个监听器不应该让事情变慢 - 这些都是在那些监听器上运行的代码，或者是你加载的代码量。

Answer 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");

jQuery.ready（）是IE的第3066行。

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

谢谢你！

Answer 3

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

如果我是你，我会看一些事情：

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

希望这有帮助。

Answer 4

如果你被困在IE6上，dynaTrace Ajax可能值得一试。它应该允许以类似于您在Firebug的分析器中执行的方式检查和分析脚本。这样可以节省代码更改......

不幸的是，我没有个人经验（但是），但其他人有（请参阅推荐链接。对不起，但我没有足够的代表在这里发布链接）。

多个document.ready（）的性能指标

4 个答案: