js加载js文件的方法

在JavaScript开发中，加载外部js文件是一项常见的操作。合理运用不同的加载方法，能够优化页面性能，提升用户体验。下面就为大家详细介绍几种常见的js加载js文件的方法。

1. <script>标签引入

这是最基本也是最常用的方法。在HTML文件中，通过<script>标签的src属性来指定要加载的js文件路径。例如：

<script src="example.js"></script>

这种方式会阻塞页面的渲染，即浏览器在解析到该标签时，会暂停其他操作，先去下载并执行js文件。如果有多个<script>标签，会按照顺序依次加载执行。若js文件体积较大或者网络不佳，可能导致页面长时间空白，影响用户体验。

2. 动态创建<script>元素

通过JavaScript动态创建<script>元素，然后将其添加到DOM中，也可以实现加载js文件。代码示例如下：

const script = document.createElement('script');
script.src = 'example.js';
document.head.appendChild(script);

这种方法是非阻塞的，不会影响页面的正常渲染。浏览器在下载js文件的可以继续解析和渲染页面。不过，由于是动态加载，无法保证脚本的执行顺序，在有依赖关系的脚本加载时需要特别注意。

3. import语句（ES6模块）

ES6引入了模块系统，使用import语句可以在一个js文件中导入另一个js文件。例如：

// main.js
import { functionName } from './example.js';
functionName();

// example.js
export function functionName() {
    console.log('This is a function from example.js');
}

import语句静态导入模块，在编译阶段就会确定依赖关系，而且具有块级作用域。使用这种方式，需要注意浏览器对ES6模块的兼容性问题。

不同的js加载js文件的方法各有优劣，开发者需要根据项目的实际需求和场景来选择合适的方式。在注重页面渲染速度的场景下，动态创建<script>元素或者使用ES6模块的方式更为合适；而对于简单项目且对脚本执行顺序要求严格时，<script>标签引入的传统方式也能很好地满足需求。掌握这些方法，有助于我们更好地构建高效、稳定的JavaScript应用。