当前位置：首页 > 行业动态 > 正文

html加载多个js

admin
行业动态
2025-05-12
8

可通过分次引用多个标签加载，或合并压缩为单文件，也可按需使用async/defer属性实现异步/延后加载

直接在HTML中写入多个

<script>
在HTML文件中，通过多个<script>标签引入JavaScript文件,浏览器会按顺序同步加载并执行脚本。
示例：
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">多JS加载示例</title>
  <script src="script1.js"></script>
  <script src="script2.js"></script>
</head>
<body>
  <h1>页面内容</h1>
  <script src="script3.js"></script>
</body>
</html>
特点：
  执行顺序：从上到下依次加载和执行。
 阻塞行为：每个脚本加载时会阻塞后续内容（包括其他脚本）的解析和渲染。
 适用场景：简单页面,脚本之间有强依赖关系。
 
 
使用async或defer属性
通过async（异步）或defer（延迟）属性控制脚本加载行为。
    属性  说明  执行时机  是否阻塞HTML解析  
 
   无  默认同步加载，按顺序执行。  立即执行  是（阻塞）  
  async  异步加载，不保证执行顺序。  下载完成后立即执行  否（不阻塞）  
  defer  延迟执行，按顺序执行，但DOM解析完成后才执行。  DOM完全解析后按顺序执行  否（不阻塞）  
 
 
示例：
<head>
  <script src="script1.js" defer></script>
  <script src="script2.js" async></script>
</head>
<body>
  <script src="script3.js" defer></script>
</body>
特点：
  defer：适合需要按顺序执行且不影响页面渲染的脚本（如依赖库）。
 async：适合无依赖关系的独立脚本（如第三方统计代码）。
 兼容性：IE9+支持async和defer。
 
 
动态加载脚本（通过JavaScript）
通过JavaScript动态创建<script>标签,可灵活控制加载时机和顺序。
示例：
<script>
  function loadScript(url, callback) {
    const script = document.createElement('script');
    script.src = url;
    script.onload = callback; // 可选：加载完成后的回调
    document.head.appendChild(script);
  }
  // 加载顺序：script1 → script2 → script3
  loadScript('script1.js', () => {
    loadScript('script2.js', () => {
      loadScript('script3.js');
    });
  });
</script>
特点：
  灵活性：可按需加载,支持回调或Promise处理依赖。
 非阻塞：不会阻塞HTML解析。
 适用场景：复杂依赖管理或条件加载。
 
 
使用模块加载器或打包工具
通过工具（如Webpack、Rollup）将多个JS文件打包为单个文件，或使用模块系统（如ES6模块、CommonJS）管理依赖。
示例（ES6模块）：
<script type="module">
  import { func1 } from './script1.js';
  import { func2 } from './script2.js';
  func1();
  func2();
</script>
特点：
  自动化管理：打包工具自动处理依赖和加载顺序。
 性能优化：支持代码分割、懒加载等。
 现代化开发：适合大型项目,需配合构建工具。
 
 
对比表格：多种加载方式的核心区别
    方法  执行顺序  是否阻塞HTML解析  是否支持并行加载  典型用途  
 
   普通<script>  按顺序  是  否  简单页面，强依赖脚本  
  defer  按顺序  否  否  依赖库，需按顺序执行  
  async  无序  否  是  独立脚本（如广告、统计）  
  动态加载（JS）  可控  否  是  复杂依赖或条件加载  
  模块加载器/打包工具  自动  否  是（代码分割）  大型项目，模块化开发  
 
 
 
相关问题与解答
问题1：多个脚本的加载顺序会影响页面功能吗？
解答：
是的，如果脚本之间存在依赖关系（例如script2.js依赖script1.js），必须确保script1.js先加载并执行，否则会出现“未定义变量”等错误，使用defer或动态加载可明确控制顺序。
 
问题2：如何避免脚本阻塞页面渲染？
解答： 
  使用defer或async：将非关键脚本标记为defer或async，避免阻塞DOM解析。 
 将脚本放在</body>前：同步脚本放在</body>末尾，减少对渲染的干扰。 
 动态加载：通过JS动态插入脚本，非阻塞地加载资源。 
 代码分割：使用打包工具仅加载当前页面所需的

属性	说明	执行时机	是否阻塞HTML解析
无	默认同步加载，按顺序执行。	立即执行	是（阻塞）
`async`	异步加载，不保证执行顺序。	下载完成后立即执行	否（不阻塞）
`defer`	延迟执行，按顺序执行，但DOM解析完成后才执行。	DOM完全解析后按顺序执行	否（不阻塞）

方法	执行顺序	是否阻塞HTML解析	是否支持并行加载	典型用途
普通`<script>`	按顺序	是	否	简单页面，强依赖脚本
`defer`	按顺序	否	否	依赖库，需按顺序执行
`async`	无序	否	是	独立脚本（如广告、统计）
动态加载（JS）	可控	否	是	复杂依赖或条件加载
模块加载器/打包工具	自动	否	是（代码分割）	大型项目，模块化开发