JS 的异步加载方法: async、defer、动态加载

本文主要是介绍JS 的异步加载方法: async、defer、动态加载，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

JS 的异步加载方法: async、defer、动态加载
- JS异步加载
- - defer
  - async
  - defer与async对比
  - 动态加载
- window.onload 与 DOMContentLoaded

JS 的异步加载方法: async、defer、动态加载

JS异步加载

一般写法里 script 脚本会阻塞 HTML 的 DOM 构建，会影响页面渲染，导致白屏时间长等问题。
（优化之一：将 JS 脚本放在 body 最下面，这样能确保脚本能访问一个完整 DOM 树，也不会阻止页面的渲染。）

defer

defer：<script defer src="xx.js"></script>
带有 defer 属性的 JS 脚本不会阻塞 DOM 树的构建，会先加载资源，但执行要等到所有文档元素解析完成后，DOMContentLoaded事件前完成。开发中可以将 defer 脚本放到 head 标签下。

async

async：<script async src="xx.js"></script>
带有 async 属性的 JS 脚本也不会阻塞，也会先加载资源，不同点在于它会在下载完成后立刻执行。

defer与async对比

相同点：都不会阻塞后续元素渲染，都会立刻加载。都只适用于外部脚本。
不同点：async 脚本加载完后会立刻执行，defer 的会在文档元素加载完后，DOMContentLoaded事件前执行。所以需要对DOM元素进行操作的脚本就不应该用async，因为元素可能没加载出来。

动态加载

一般会放在 onLoad 里加载，以避免阻塞页面渲染，并确保页面内容加载完整：

function addScript(src) {var script = document.createElement('script');script.setAttribute('type', 'text/javascript');script.src = src;document.body.appendChild(script);
}
window.onload = function() {addScript('xx.js');
}// 也可以在 DOMContentLoaded 事件中执行动态加载操作
document.addEventListener('DOMContentLoaded', function() {addScript('xx.js');
});