当前位置：首页 > 前端开发 > 正文

html 如何加载js文件

admin
前端开发
2025-07-23
7

在HTML中通过` 引入JS文件，可添加defer 或async`优化加载顺序

在HTML中加载JavaScript（JS）文件有多种方法，每种方法都有其特定的用途和适用场景，以下是几种常见的加载JS文件的方法及其详细解释：

使用<script>标签加载外部JS文件

最常见的方法是使用<script>标签来加载外部的JS文件，这种方法简单直接，适用于大多数情况。

html 如何加载js文件第1张

优点：

简单易用：只需在HTML文件中添加一个<script>标签即可。
分离关注点：将JavaScript代码与HTML代码分离，便于维护和复用。

缺点：

阻塞渲染：默认情况下，<script>标签会阻塞页面的渲染，直到脚本加载并执行完毕，这可能会影响页面的加载速度和用户体验。

使用defer属性异步加载JS文件

为了解决<script>标签阻塞渲染的问题，可以使用defer属性。defer属性会让脚本在页面解析完成后再执行，但不会阻塞页面的渲染。

优点：

非阻塞：脚本会在页面解析完成后执行，不会阻塞页面的渲染。
顺序执行：多个带有defer属性的脚本会按照它们在HTML中出现的顺序依次执行。

缺点：

兼容性：虽然现代浏览器都支持defer属性，但在一些老旧浏览器中可能不支持。

使用async属性异步加载JS文件

async属性也可以用于异步加载JS文件，但它的行为与defer有所不同。async属性会让脚本尽快下载并执行，而不会保证脚本的执行顺序。

html 如何加载js文件第2张

优点：

非阻塞：脚本会尽快下载并执行，不会阻塞页面的渲染。
并行加载：多个带有async属性的脚本会并行下载和执行，不会保证执行顺序。

缺点：

执行顺序不确定：由于脚本是并行加载的，因此无法保证它们的执行顺序。
兼容性：虽然现代浏览器都支持async属性，但在一些老旧浏览器中可能不支持。

动态加载JS文件

在某些情况下,可能需要根据特定条件动态加载JS文件，这可以通过JavaScript代码来实现。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">Load JS Example</title> </head> <body> <h1>Hello, World!</h1> <button id="loadScript">Load Script</button> <script> document.getElementById('loadScript').addEventListener('click', function() { var script = document.createElement('script'); script.src = 'path/to/your-script.js'; script.onload = function() { console.log('Script loaded and executed.'); }; script.onerror = function() { console.error('Error loading script.'); }; document.head.appendChild(script); }); </script> </body> </html>

优点：

灵活性高：可以根据需要动态加载脚本，适用于复杂的应用场景。
控制性强：可以在脚本加载完成后执行特定的操作，如回调函数。

缺点：

复杂性增加：需要编写额外的JavaScript代码来管理脚本的加载和执行。
性能影响：动态加载脚本可能会增加页面的加载时间，特别是在网络状况不佳的情况下。

使用模块加载器（如Webpack、RequireJS）

对于大型项目,通常会使用模块加载器来管理和加载JavaScript文件，这些工具可以将多个JS文件打包成一个或多个文件，并根据需要按需加载。

Webpack示例：

# 安装Webpack npm install --save-dev webpack webpack-cli # 创建webpack.config.js配置文件 module.exports = { entry: './src/index.js', // 入口文件 output: { filename: 'bundle.js', // 输出文件名 path: __dirname + '/dist' // 输出目录 } }; # 运行Webpack打包命令 npx webpack --config webpack.config.js

RequireJS示例：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">Load JS Example</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script> <script> require(['path/to/your-module'], function(yourModule) { // 使用模块中的函数或对象 yourModule.doSomething(); }); </script> </head> <body> <h1>Hello, World!</h1> </body> </html>

优点：

模块化管理：将代码拆分成多个模块，便于维护和复用。
按需加载：只加载当前需要的模块，减少初始加载时间。
优化打包：通过工具进行代码压缩、合并等优化，提高性能。

缺点：

学习成本：需要学习和掌握模块加载器的使用方法和配置。
构建复杂度：增加了项目的构建步骤和依赖管理。

归纳对比表

方法	描述	优点	缺点	适用场景
<script>	直接在HTML中引入外部JS文件	简单易用，分离关注点	阻塞渲染	简单页面，脚本较少
defer属性	异步加载JS文件，不阻塞渲染	非阻塞，顺序执行	兼容性问题	需要按顺序执行的脚本
async属性	异步加载JS文件，不阻塞渲染	非阻塞，并行加载	执行顺序不确定，兼容性问题	不需要按顺序执行的脚本
动态加载	通过JavaScript代码动态加载JS文件	灵活性高，控制性强	复杂性增加，性能影响	需要根据条件加载脚本的场景
模块加载器	使用工具管理和加载JS模块	模块化管理，按需加载，优化打包	学习成本，构建复杂度	大型项目，需要模块化管理的场景