收盘前$ .ready()

Dav*_*ing 10 javascript performance jquery delay domready

这不是一个真正的编码问题,而是一个现实世界的陈述.

前面我已经提到DOMReady事件是慢,很慢.所以,我注意到在浏览jQuery源代码时可以触发jQuery domeready事件$.ready().然后我想,在关闭正文之前放置这个简单的执行脚本应该触发所有先前附加的"onDomReady"监听器.是的,它按预期工作:

     <script>$.ready()</script>
</body>
Run Code Online (Sandbox Code Playgroud)

这里有两个例子,这个例子测量等待DOMReady时花费的ms:

http://jsbin.com/aqifon/10

正如您所看到的,DOMReady触发器本身非常慢,用户必须在domready脚本启动之前等待整整200-300毫秒.

无论如何,如果我们$.ready()在关闭BODY标签之前放置,我们得到这个:

http://jsbin.com/aqifon/16

看到不同?通过手动触发domready,我们可以切断100-300 ms的执行延迟.这是一个重要的交易,因为在我们看到它们之前,我们可以依赖jQuery来处理DOM操作.

现在,对于一个问题,我从未见过这个被推荐或讨论过,但它似乎仍然是一个主要的性能问题.一切都是关于优化代码本身的,这当然是好的,但是如果执行被延迟了很长时间以至于用户看到"flash of"unjQueryedContent",则是徒劳的."

有没有想过为什么不经常讨论/推荐这个?

bfa*_*tto 3

有什么想法为什么没有更频繁地讨论/推荐这个问题吗?

将 JavaScript 放在前面</body>已经讨论了很多,并且如您所知,如果您正在寻求更快的页面加载,建议您这样做。ready事实上,手动触发 jQuery处理程序的讨论很少。为什么?好吧,我认为对此没有一个客观的答案,但我将尝试在这里概述一些可能性:

  1. 性能不是 jQuery 的主要目标(尽管它绝对是一个问题),性能狂热者通常会寻找更轻的库来进行跨浏览器 DOM 操作和事件处理,或者推出自己的库。

  2. 这是一个额外的步骤,而且看起来不干净。jQuery 试图变得干净和优雅,并且推荐一个额外的步骤来初始化脚本听起来不像是会发生的事情。他们建议绑定到ready,因此建议强制.ready()并忽略实际的浏览器事件看起来“错误”。关心这一点的人可能知道,之前初始化脚本</body>会更快。

  3. 优化DOMContentLoaded听起来像是浏览器供应商的任务。不过,我不确定为什么它会慢,也许没有太大的优化空间 - 根据我的理解,之前调用 init 脚本</body>应该始终是初始化内容的最快方法(因为它在解析容器<script>标签时立即执行,而浏览器必须在触发之前完成整个文件的解析DOMContentLoaded)。

您可能还记得,不久前,将<script>块分散在 HTML 上的各处是一种常见的做法。然后 Web 标准运动来了,并推荐了更明智和可维护的做事方式。其中包括从一个地方引导脚本 - 最初是 ,window.onload然后被认为是有问题的缓慢,然后DOMContentLoaded是它对 IE8 及更低版本的模拟。然而,我们仍然每天在 StackOverflow 上看到带有脚本的 spaghetti-HTML。因此,我不确定今天建议将脚本放置在正文末尾之前是否是一个好的选择,因为它可能被解释为在正文中的任何位置添加脚本的许可证。

最后,如果您确实关心快速加载脚本,并且您的代码不操作 DOM,则加载脚本的最快方法是将其放在<head>任何样式表之前。我只是想说,没有灵丹妙药,也没有在每种情况下都最快、最优雅的初始化脚本的最佳方法。我认为这就是为什么社区坚持推荐看起来理智并且倾向于创建更易于维护的代码的东西,而不是其他性能更好的替代方案。