JavaScript中的延迟加载

太阳与星辰

已于 2025-03-24 21:49:19 修改

阅读量1k

点赞数 26

分类专栏：前端 JavaScript 文章标签： javascript 前端延迟加载

于 2025-02-19 13:45:01 首次发布

本文链接：https://blog.youkuaiyun.com/fageaaa/article/details/145726684

版权

前端同时被 2 个专栏收录

250 篇文章

订阅专栏

JavaScript

20 篇文章

订阅专栏

JavaScript中的延迟加载

1.把script代码写在底部
2.onload
3.监听DOMContentLoaded事件
4.延时器加载setTimeout
5.defer属性和async属性

1.把script代码写在底部

 <div>
      <div class="box">
        <div class="btn"></div>
      </div>
</div>
<script>
      let box = document.querySelector(".box");
      console.log(box);//可以打印box节点
</script>

2.onload

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script>
    window.onload=function (){
      console.log("我是onload");//这个最后打印(可以打印出box节点)，先执行a.js和b.js中的内容;
    }
  </script>
</head>
<body>
<div>
  <div class="box">
    <div class="btn">
    </div>
  </div>
</div>
<script src="../javascript/a.js"></script>
<script src="../javascript/b.js">
  console.log("我是内部脚本")//不会打印
</script>
</body>
</html>

3.监听DOMContentLoaded事件

DOMContentLoaded是在html文档加载完成即可执行(无需等待样式表、图像和子框架的完全加载);而onload则需要html，js，css等资源全部加载完后才会触发load事件。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        let box = document.querySelector(".box");
        console.log(box, "DOMContentLoaded"); //先打印b.js中的内容，后打印box节点
      });
    </script>
  </head>
  <body>
    <div>
      <div class="box">
        <div class="btn"></div>
      </div>
    </div>
    <script src="../javascript/b.js">
      console.log("我是内部脚本")//不会打印
    </script>
  </body>
</html>

4.延时器加载setTimeout

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
      setTimeout(function (){
          let box=document.querySelector(".box");
          console.log(box)
      },0)
  </script>
</head>
<body>
<div>
  <div class="box">
    <div class="btn">
    </div>
  </div>
</div>
</body>
</html>

5.defer属性和async属性

defer和async都是异步加载(下载),加载的过程都不会阻塞html的解析。

5.1 defer属性

defer是推迟的意思,defer加载的特点如下:

script异步加载(下载)(边下载script边解析html)
script延迟执行(等html解析完才会执行下载的script代码)
按顺序执行(在html解析完之后,按顺序执行下载的script代码)

//a.js
let box=document.querySelector(".box")
console.log(box)//因为是defer，dom元素会被打印出来

//b.js
let a=11;
console.log(a)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <!--  defer会按顺序执行-->
    <script defer src="../javascript/a.js"></script>
    <script defer src="../javascript/b.js">
      console.log("我是内部脚本")//不会打印
    </script>
    <script>
      console.log("333"); //这个最先执行，然后执行a文件,最后执行b文件(a和b按顺序执行)
    </script>
  </head>
  <body>
    <div>
      <div class="box">
        <div class="btn"></div>
      </div>
    </div>
  </body>
</html>

5.2 async属性

async是异步的意思。async加载的特点如下:

script异步加载(下载)(边下载script边解析html)
script立即执行(script加载完后就会立即执行,执行script时会阻塞html的解析)
不按顺序执行(谁先加载完谁先执行)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <!--  async不会按顺序执行-->
    <script async src="./javascript/b.js">
      console.log("我是内部脚本")//不会打印
    </script>
    <script async src="./javascript/a.js"></script>
  </head>
  <body>
    <div>
      <div class="box">
        <div class="btn"></div>
      </div>
    </div>
  </body>
</html>

5.3 defer属性 vs async属性

5.3.1 相同点

都是并行加载(下载)script。也就是说，两者都能让script的下载阶段变成并行处理(加载的过程都不会阻塞html的解析)。

5.3.2 不同点

defer:等html解析完才会全部执行下载的script代码;多个script(带有defer属性)标签会按顺序执行;与在底部写script很相似，区别是defer在下载阶段是异步的，相比之下可以节约点时间；
async:script标签中的文件下载完毕之后就会立即执行script代码;多个script(带有async属性)标签不会按顺序执行(谁下载好就先执行)。