为什么jQuery.ready这么慢却被推荐?

我以前也问过类似的问题,但我从来没有明确表达我的观点,或者至少我认为这是一个非常相关的问题,值得提出,看看是否有人能给出一些有见地的想法

在使用jQuery时,我们中的许多人都使用jQuery.ready函数在加载DOM时执行init。它已经成为使用jQuery向网页添加DOM操作程序的事实上的标准方式。某些浏览器本机存在一个相关事件,但jQuery在其他浏览器(如某些IE版本)中模拟它。例如:

<头>
<脚本>
var init=function(){alert('hello world');};
$.ready(init);
&lt/脚本>

现在,我们所有的测试都表明这个事件可能非常缓慢。它的速度远没有window.onload慢,但通常在执行前仍有大约100毫秒的延迟。如果是FF,则最长可达200-300毫秒,尤其是在刷新时

这是一些非常重要的毫秒,因为这是在进行任何DOM操作(例如隐藏下拉列表)之前显示初始布局的时间量。很多时候,布局“闪烁”主要是由于使用缓慢的DOM就绪事件造成的,这迫使程序员使用CSS隐藏元素,并可能降低其可访问性

现在,如果我们在关闭body标记之前将init函数放在脚本标记中,它的执行速度会快得多,通常是一半左右,但有时甚至更快:

<头>
<脚本>
var init=function(){alert('hello world');};
&lt/脚本>
&lt/头>
<车身>
<!--一些HTML-->
<脚本>init()&lt/脚本>
&lt/车身>

一个简单的测试页面可以证明这些差异:http://jsbin.com/aqifon/10

我的意思是,我们不是在谈论一些“优化警察”在使用有效选择器时所提倡的几乎不明显的差异。我们正在讨论在加载时执行DOM操作时的一些主要延迟。在FF中尝试这个例子,domready有时会慢100多倍(300ms vs 2ms)

现在我的问题是:为什么jQuery.ready在明显比其他替代方法慢得多的情况下推荐使用?在关闭主体之前调用init与使用jQuery.ready相比有哪些缺点?可以说,使用domReady更“安全”,但在什么情况下它比其他选项更安全?(我在想document.write和延迟脚本)我们在许多客户端网站上使用BODY的方式已经有近5年了,我们从未遇到任何问题。只是速度快了很多

我还想知道,既然jsPerf和优化选择器对于每10000次执行几毫秒有如此多的模糊性,为什么对此没有太多的讨论?这基本上是用户面临的第一次延迟,在每个页面加载上划分50-100毫秒似乎相当简单

第一点:

否,在关闭之前给您打电话init没有任何不利之处<车身&gt正如您所注意到的,依赖$.ready()的性能会更好,并且可以完美地与所有浏览器配合使用(即使是在IE上)

但是,现在有理由使用$.ready(),在您的情况下,它们可能不适用:

  1. $.ready()使开发人员能够轻松地按正确的顺序完成工作。特别是,关键是不要引用尚未加载的DOM元素。虽然这很简单,但许多开发人员仍然感到困惑$.ready()是一个不需要动脑筋的工具,尽管速度很慢
  2. 在您所说的几个脚本中,需要init(),在您的身体末端手动这样做并不一定容易/方便。它需要对这些脚本所做的工作进行规范和了解。尤其是在依赖jQuery的库中,您经常会看到$.ready(),因为无论开发人员使用何种方式加载lib,它都能使事情正常工作
  3. 随着异步模块定义(例如require.js)作为加载javascript的一种方式越来越流行,<正文/&gt方法不受保证

发表评论