使用 document.ready 与 window.load 加载延迟内容答案

【问题标题】：Using document.ready vs window.load to load deferred content使用 document.ready 与 window.load 加载延迟内容
【发布时间】：2011-10-28 14:04:58
【问题描述】：

我知道 document.ready 和 window.load 事件之间的区别。现在为了提高我网站的性能，我打算defer loading of javascript。我见过很多延迟加载内容的例子：

在 document.ready 上注入 <script src="..."> 和 <link rel="stylesheet" href="...">
在 window.load 上注入 <script src="..."> 和 <link rel="stylesheet" href="...">
在 document.ready 被触发几秒后注入 <script src="..."> 和 <link rel="stylesheet" href="...">
在 window.load 触发几秒后注入 <script src="..."> 和 <link rel="stylesheet" href="...">

我的第一个问题是这些方法中哪一种更可取。

我的第二个问题是，我想知道当我使用方法 #1 时究竟会发生什么。如果我的文档在 HTML 源代码中定义了此内容：

<!-- head -->
<link>
<script>
<!-- body -->

在 document.ready 中我注入了这些额外的标签：

<!-- head -->
<link>
<script>
<link class="lazyload">
<script class="lazyload">
<!-- body -->
<img><img><img><img><img>

我想知道浏览器到底会做什么：

什么时候触发 document.ready 事件
下载文件的顺序是什么
在尝试下载注入的文件时会阻止页面

【问题讨论】：

你的意思是 jquery 的 $(document).ready() 吗？当然 3 和 4 是不可靠的。我会使用第一个而不是第二个。
您可能想查看LABjs 之类的内容，因为有很多奇怪的事情需要处理。那个库非常小而且很坚固。
我想要一个一般性的答案，而不是特定于图书馆的答案。使用$(document).ready(foo) (jQuery)、document.observe("dom:loaded", foo) (prototype) 或 window.onload = foo (vanilla javascript) 都没有关系。
您是否忘记在问题中附加链接？如果是，请编辑您的问题并添加它。此外，除非您使用@，否则人们不会收到您发布评论的通知，也不会回来阅读它，例如@Pointy 会通知 Pointy 您的评论。

标签： javascript lazy-loading document-ready window-load

【解决方案1】：

我做事的方式是在任何地方加载脚本，主要是在<head> 中，然后保留要运行的类似队列的函数数组，然后在</body> 之前遍历这些脚本并运行它们。如果我愿意，我可以将所有脚本放在<body> 的末尾，但我发现将<script> 标签放在它们相关的旁边更容易 - 再次找到它们更容易。

如果您不喜欢这样，您可以设置<script> 标签的async 和defer 属性。这意味着脚本的下载和执行将等到资源可用（例如完成下载的页面的带宽）。

如果您需要在运行特定代码之前加载图像和其他内容，请使用window.load。否则，document.ready 可以。

【讨论】：

【解决方案2】：

这可能会有所帮助：Loading Scripts Without Blocking，但它只回答了几个问题。

【讨论】：

谢谢，您提供的链接确实回答了几个问题。仅供参考，我选择了 Script DOM Element (with async=true) 技术。无论脚本元素如何以及何时注入，现代浏览器都会在方便的时候异步下载脚本而不会阻塞页面