10

这不是一个真正的编码问题，更像是一个真实世界的陈述。

我之前已经注意到事件DOMReady很慢，非常慢。因此，我在浏览 jQuery 源代码时注意到，可以使用$.ready(). 然后我想，在关闭正文之前放置这个简单的执行脚本应该会触发之前附加的所有“onDomReady”侦听器。是的，它按预期工作：

     <script>$.ready()</script>
</body>

这里有两个例子，一个测量等待 DOMReady 所花费的毫秒数：

http://jsbin.com/aqifon/10

如您所见，DOMReady 触发器本身非常慢，用户必须等待整整 200-300 毫秒才能启动 domready 脚本。

无论如何，如果我们$.ready()在关闭标签之前放置，BODY我们会得到：

http://jsbin.com/aqifon/16

看到不同？通过手动触发 domready，我们可以切断 100-300 毫秒的执行延迟。这是一个大问题，因为我们可以在看到 DOM 操作之前依靠 jQuery 来处理它们。

现在，对于一个问题，我以前从未见过有人推荐或讨论过这个问题，但它似乎仍然是一个主要的性能问题。一切都是为了优化代码本身，这当然很好，但是如果执行延迟这么长时间，用户看到“unjQueryedContent”的闪光，那是徒劳的。

任何想法为什么不更频繁地讨论/推荐？

4

3 回答 3

4

通过自己触发事件，您是在向您的 ready() 处理程序声明您的 dom 已加载但可能尚未加载！DOM 就绪事件没有捷径可走。如果确实有很长的等待时间，那么请使用 firebug、chrome 等令人惊叹的调试工具......检查您的资源及其时序问题。这一切都是黑白的，并会指出什么需要这么长时间（请求、渲染、多少资源等。）

于 2012-10-12T00:39:30.067 回答
3

实际上，在标签之前放置一个函数调用</body>使得使用 jQuery 的ready(). 只需将本机 JS-wrapper 函数调用包含在文档就绪时应调用的所有其他函数的调用。

一般来说，对于作者根本不需要/不想使用 jQuery 的情况，它是一种可行的替代方案（尽管 HTML 代码有些乱七八糟，因此对于完美主义者来说是不可接受的）。不过，在这种情况下，我更愿意使用DOMContentLoaded大多数浏览器（包括 IE9+）都支持的本机事件处理程序（对于 IE8，我们可以将window.load()其用作可接受的后备）。

于 2012-10-12T00:52:01.603 回答
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. 但是，我们仍然每天在 StackOverflow 上到处都能看到带有脚本的 spaghetti-HTML。所以我不确定今天推荐在正文结尾之前放置脚本是否合适，因为它可能被解释为在正文中的任何位置添加脚本的许可。

Finally, if you're really concerned about loading your script fast, and your code does not manipulate the DOM, the fastest way to load it is to put it in the <head> before any stylesheets. And I'm stating that just to say that there's no silver bullet, no optimal way to init scripts that is the fastest and most elegant in every scenario. I think that's why the community sticks with recommending something that looks sane and tends to create more maintainable code, instead of other better performing alternatives.

于 2012-10-14T02:16:29.890 回答