浏览器加载JS方式全解析

浏览器加载外部JS文件的方式直接影响页面性能和用户体验。本文深入探讨了通过`

答案：浏览器加载外部JavaScript文件最直接的方式是通过HTML的

这种方式，如果脚本放在里，它会阻塞页面的渲染，直到脚本下载、解析并执行完毕。这在过去是个大问题，尤其对于体积大的脚本，用户会看到白屏。所以，很多时候我们会建议将脚本放在闭合标签之前，这样至少HTML内容可以先呈现出来。

但仅仅放到前还不够，为了更好地优化加载性能，我们引入了async和defer这两个属性。

• • 带有async属性的脚本，浏览器会异步下载它，即在下载的同时继续解析HTML文档。一旦下载完成，HTML解析就会暂停，脚本立即执行。执行完毕后，HTML解析继续。它的执行顺序不确定，哪个脚本先下载完哪个就先执行。

• • 带有defer属性的脚本，浏览器也会异步下载它，同时继续解析HTML。但与async不同的是，defer脚本的执行会推迟到HTML文档解析完成后、DOMContentLoaded事件触发之前。并且，多个defer脚本会按照它们在文档中出现的顺序依次执行。

除了直接在HTML中声明，我们也可以通过JavaScript动态地创建并加载脚本：

const script = document.createElement('script');
script.src = 'path/to/dynamic-script.js';
script.onload = () => {
    console.log('脚本加载并执行完毕！');
    // 可以在这里执行依赖此脚本的代码
};
script.onerror = () => {
    console.error('脚本加载失败！');
};
document.head.appendChild(script); // 或者 document.body.appendChild(script);

这种动态加载的方式非常灵活，可以根据条件按需加载脚本，避免一次性加载所有不必要的资源。它默认是异步的，不会阻塞HTML解析，但需要手动处理加载完成或失败的回调。

最后，如果你在用ES Modules，那么可以通过来加载。这种方式加载的脚本默认是defer行为的，也就是异步下载，延迟到HTML解析完毕后按序执行，并且在模块内部可以使用import和export语法。