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

Using document.ready vs window.load to load deferred content

本文关键字：延迟 加载 load document ready vs window 使用      更新时间：2023-09-26

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

  1. 在 document.ready 上注入<script src="...">和<link rel="stylesheet" href="...">
  2. 在窗口上注入<script src="...">和<link rel="stylesheet" href="...">。
  3. 注入<script src="...">并在 document.ready 触发后几秒钟内<link rel="stylesheet" href="...">
  4. 注入<script src="...">并在触发窗口后几秒钟内<link rel="stylesheet" href="...">
    5. 加载

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

我的第二个问题是，我想知道当我使用方法#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. 在尝试下载注入的文件时是否会阻止页面

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

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

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

这可能会有所帮助： 加载脚本而不阻塞，但它只回答了几个问题。

相关文章：