JavaScript异步加载的三种方式

1. defer —— 以前适用于 IE,现在适用于所有主流浏览器

defer 属性规定是否对脚本进行延迟执行;

这个布尔属性被设定用来通知浏览器该脚本将在文档完成解析后,触发 DOMContentLoaded 事件前执行。如果缺少 src 属性(即内嵌脚本),该属性不应被使用,因为这种情况下它不起作用。对动态嵌入的脚本使用 async=false 来达到类似的效果。

defer 属性的值只有 defer 一个,即 defer = ‘defer’,可直接写 defer

用法:在 script 标签里加入 defer 属性即可,适用于所有 script 脚本

1
<script src="http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js" defer></script>

添加 defer 属性后,js 脚本在所有元素加载完成后执行,而且是按照 js 脚本声明的顺序执行

2. async —— h5 新属性

async 是否在允许的情况下异步执行该脚本。

async 的用法和 defer 一样,但 async 只适用于外部引用的脚本,即 script 有 src 属性时才可使用

1
<script src="http://cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js" async></script>

不同的是,添加 async 属性后,js 脚本是乱序执行的,不管你声明的顺序如何,只要某个 js 脚本加载完就立即执行

3. 动态生成 script 标签

在 js 里创建 script 标签,插入 DOM 中,加载完成后 callback

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function loadScript(url, callback) {
var s = document.createElement("script");
s.type = "text/javascript";
if (s.readyState) {
s.onreadystatechange = function() {
//兼容IE
if (s.readyState == "complete" || s.readyState == "loaded") {
callback();
}
};
} else {
s.onload = function() {
//safari chrome opera firefox
callback();
};
}

s.src = url;
document.head.appendChild(s);
}

这样所有的 js 脚本都会在 onload 事件后才加载,onload 事件会在所有文件内容(包括文本、图片、CSS 文件等)加载完成后才开始执行,极大的优化了网页的加载速度,提高了用户体验

文章作者: wenmu
文章链接: http://blog.wangpengpeng.site/2020/01/09/JavaScript%E5%BC%82%E6%AD%A5%E5%8A%A0%E8%BD%BD%E7%9A%84%E4%B8%89%E7%A7%8D%E6%96%B9%E5%BC%8F/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 温木的博客
微信打赏