3

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

  1. 注入<script src="...">并<link rel="stylesheet" href="...">在 document.ready 上
  2. 注入<script src="...">并<link rel="stylesheet" href="...">在 window.load 上
  3. 在 document.ready 被触发后注入<script src="...">和<link rel="stylesheet" href="...">几秒钟
  4. 在 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>

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

  1. 它什么时候会触发 document.ready 事件
  2. 它将按什么顺序下载文件
  3. 尝试下载注入的文件时是否会阻止页面
4

2 回答 2

1

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

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

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

于 2011-10-30T13:37:59.883 回答
0

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

于 2011-10-30T11:58:41.340 回答