gpt4 book ai didi

javascript - 使用 document.ready 与 window.load 加载延迟内容

转载 作者:行者123 更新时间:2023-11-29 15:49:04 25 4
gpt4 key购买 nike

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

  1. 注入(inject) <script src="..."><link rel="stylesheet" href="...">文档准备就绪
  2. 注入(inject) <script src="..."><link rel="stylesheet" href="...">在 window.load 上
  3. 注入(inject) <script src="..."><link rel="stylesheet" href="..."> document.ready 启动后几秒
  4. 注入(inject) <script src="..."><link rel="stylesheet" href="...">触发 window.load 几秒钟后

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

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

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

在 document.ready 中我注入(inject)了这些额外的标签:

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

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

  1. 什么时候触发 document.ready 事件
  2. 下载文件的顺序是什么
  3. 它会在尝试下载注入(inject)的文件时阻止页面吗

最佳答案

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

如果这不是您喜欢的,您可以设置 asyncdefer <script> 的属性标签。这意味着脚本的下载和执行将等到资源可用(例如完成下载的页面的带宽)。

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

关于javascript - 使用 document.ready 与 window.load 加载延迟内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7930296/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com