本文主要是介绍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');
});
window.onload 与 DOMContentLoaded
window.onLoad 是一个 JS 事件处理函数，它在整个页面以及所有资源（如照片、样式表、脚本等）完全加载后触发。
DOMContentLoaded 只要 DOM 加载完成就触发，无需等待依赖资源的加载。
DOMContentLoaded 比 window.onLoad 执行时间早。
这篇关于JS 的异步加载方法: async、defer、动态加载的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
