延迟加载JS的方式

原创已于 2023-03-30 14:04:17 修改 · 2.2k 阅读

本内容遵循CC 4.0 BY-SA版权协议

于 2023-03-30 14:04:12 首次发布

JavaScript延迟加载可以提高页面加载速度，常用方法包括将JS放底部、使用window.onload、setTimeout以及HTML的defer和async属性。defer保证脚本按顺序执行，async则不保证执行顺序，适合无依赖的脚本。

JavaScript 延迟加载就是等DOM（页面）加载完成之后再加载js文件，这样有助于提高页面加载速度，用户体验更好

常用延迟加载js方式有：

将JS放在页面底部,html页面内容从上到下按顺序加载。
window.onload()=function(){}，window全局函数
使用setTimeout，增加延时处理，异常线程，延时时间要自己预估。
HTML4新增的script标签属性：defer, 基本等同于在window.onload时执行
HTML5新增的script标签属性：async，在DOM完成加载之后，window.onload之前执行

常用defer , async。

示例：

script.js

console.log(  document.getElementById('box')   );

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>延迟加载JS</title>
    <script type="text/javascript" src='script.js'></script>
</head>
<body>
<div id='box'>我一只小小盒子：box</div>
</body>
</html>

效果：如下，在不加defer 或者 async放在页面顶部是获取不到这个div元素的，因为页面还没有加载出来。

调用的地方加上defer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>延迟加载JS</title>
    <script defer type="text/javascript" src='script.js'></script>
</head>
<body>
<div id='box'>我一只小小盒子：box</div>
</body>
</html>

async

同样的我们把在header的引入，上面的defer换成async，如下：

  <title>延迟加载JS</title>
  <script async type="text/javascript" src='script.js'></script>

执行效果同上面defer一样，是拿到DOM元素：div的。

defer async区别

示例：

a1.js

console.log('执行a1.js')

b2.js

console.log('执行b2.js')

c3.js

console.log('执行c3.js')

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>延迟加载JS</title>
</head>
<body>
<div id='box'>我一只小小盒子：box</div>
<script defer src="a1.js"></script>
<script defer src="b2.js"></script>
<script defer src="c3.js"></script>
</body>
</html>

使用async

<script async src="a1.js"></script>
<script async src="b2.js"></script>
<script async src="c3.js"></script>

上面放在底部下的调用3个js，使用async, defer执行效果都是一样如图：

延迟加载3个脚本，如果使用的是defer，加载脚本的时候，一定会是按照以下顺序执行：

a1.js
b2.js
c3.js

使用async，也是延迟加载js脚本，但是这3个脚本执行顺序是不确定的，先完成加载先执行，如果这3个脚本有依赖关系，使用是async是不合适的。

如果无法判断用defer,async,优先使用 defer.

标签

#javascript #前端 #开发语言