我将所有JS作为外部文件包含在页面的最底部.在这些文件中,我有几个像这样定义的方法,我从ready事件中调用它:
var SomeNamepsace = {};
SomeNamepsace.firstMethod = function () {
// do something
};
SomeNamepsace.secondMethod = function () {
// do something else
};
$(document).ready(function () {
SomeNamepsace.firstMethod();
SomeNamepsace.secondMethod();
});
然而,当我删除ready函数并直接调用方法时,一切都运行相同,但执行速度明显更快 - 在一个非常基本的文件上几乎快一秒!由于此时应该加载文档(因为所有标记都出现在脚本标记之前),还有什么理由仍然使用ready事件吗？
我以前曾问过类似的问题,但我从未明确表达过我的观点,或者至少我认为这是一个相关的问题,值得提出来,看看是否有人能提出一些有见地的想法.
当使用jQuery时,我们中的许多人使用该jQuery.ready函数init在DOM加载时执行.它已成为使用jQuery将DOM操作程序添加到网页的事实上的标准方法.相关事件本身存在于某些浏览器中,但jQuery在其他浏览器中模拟它,例如某些IE版本.例:
<head>
<script>
var init = function() { alert('hello world'); };
$.ready(init);
</script>
现在,我们所有的测试都表明这个事件可能很慢.它并没有那么慢window.onload,但在执行之前它仍然经常延迟大约100毫秒.如果FF它可以高达200-300毫秒,特别是在刷新时.
这些是非常重要的毫秒,因为这是在进行任何DOM操作之前显示初始布局的时间量(例如隐藏下拉列表).很多时候,布局"闪烁"主要是由于使用缓慢的DOM就绪事件,迫使程序员使用CSS隐藏元素,并可能使其不易访问.
现在,如果我们在关闭body标签之前将init函数放在脚本标记中,它将更快地执行,通常大约一半时间但有时甚至更快:
<head>
<script>
var init = function() { alert('hello world'); };
</script>
</head>
<body>
<!-- some HTML -->
<script>init();</script>
</body>
一个简单的测试页面,证明了差异:http://jsbin.com/aqifon/10
我的意思是,我们并没有谈论几乎没有明显的差异,因为一些"优化警察"在使用有效选择器时会提升.我们正在讨论在进行DOM操作onload时的一些主要延迟.在FF中尝试这个例子,domready有时会慢100多倍(300ms vs 2ms).
现在我的问题:为什么jQuery.ready建议使用它显然比其他替代品慢得多？init在关闭BODY与使用之前调用之前的缺点是什么jQuery.ready？它可以说更安全"使用domReady,但在什么情况下它比其他选项更安全？(我正在考虑像document.write延迟脚本这样的东西)我们BODY在许多客户端网站上使用了近5年的方式,我们从未遇到过任何问题.它的速度要快得多.
我也很想知道,因为有很多关于jsPerf和优化选择器的模糊,每10000次执行几毫秒,为什么没有太多谈论这个？它基本上是用户面临的第一个延迟,并且在每个页面加载时切片50-100毫秒似乎相当简单......