Question

我知道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 event
以何种顺序下载文件
尝试下载注入的文件时是否会阻止页面

Answer 1

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

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

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

Answer 2

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

使用document.ready vs window.load加载延迟内容

2 个答案: