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

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 执行时间早。