在 JS 中动态加载 JS - Javascript

在 Web 开发中，JavaScript 动态加载 JavaScript（JS）是一种常见且有用的技术，它可以帮助 Web 开发人员优化网页加载时间，提高用户体验。

前置知识

在学习动态加载 JS 之前，需要了解以下内容：

• 使用 <script> 元素来加载 JS 文件
• 使用 window.onload 事件确保页面完全加载完再执行 JS 代码

常见的动态加载 JS 的方法

1. createElement() 方法

这是最简单的方法之一。可以使用 createElement() 方法去创建一个 <script> 元素，将其添加到 body 元素中，最后设置 src 属性为 JS 文件的 URL。

const script = document.createElement('script');
script.src = 'path/to/your/javascript.js';
document.body.append(script);

2. appendChild() 方法

可以通过 appendChild() 方法直接将 <script> 元素追加到 body 元素的末尾。同样需要设置 src 属性为 JS 文件的 URL。

const script = document.createElement('script');
script.src = 'path/to/your/javascript.js';
document.body.appendChild(script);

3. async 和 defer 属性

HTML5 引入了 async 和 defer 两个属性，使 Web 开发者可以更好地控制页面的加载行为。

async 属性表示 JS 文件的加载是异步进行的，也就是说它不会阻塞页面的渲染，同时当该文件下载完毕后会立即执行。这适用于那些不需要周全加载的 JS 文件，比如页面统计代码。

<script async src="path/to/your/javascript.js"></script>

defer 属性表示 JS 文件的加载会延迟到页面所有的其他元素都加载完成后再执行，这保证了 JS 代码在 DOM 加载完成后才会进行操作。

<script defer src="path/to/your/javascript.js"></script>

总结

在 Web 开发中动态加载 JS 文件非常有用，许多大型网站都在使用此方法来优化页面性能。根据需求选择不同的方法和属性，可以让你更好地控制页面加载行为。

参考资料：

• Dynamically load JavaScript with cross-browser compatibility