js是怎么加载的

JavaScript 是通过嵌入在 HTML 文档中的 <script> 标签加载的、可以同步或异步加载、可以通过外部文件或内嵌代码加载。其中，异步加载是一个非常重要的方面，可以显著改善网页的加载性能。

JavaScript 的加载方式有多种，不同的加载方式对网页性能和用户体验有着不同的影响。下面，我们将详细探讨 JavaScript 是如何加载的，并分析每种加载方式的优缺点。

一、同步加载与异步加载

同步加载

同步加载是最传统的 JavaScript 加载方式。当浏览器遇到一个 <script> 标签时，会暂停解析 HTML 文档，先去加载并执行 JavaScript 代码，然后再继续解析 HTML。这种方式的优点是简单直接，缺点是会阻塞页面的加载，导致较差的用户体验。

<!DOCTYPE html>
<html>
<head>
  <title>同步加载示例</title>
  <script src="example.js"></script>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

在上述示例中，浏览器会在加载并执行 example.js 后，才继续解析和渲染后面的 HTML 内容。

异步加载

异步加载可以通过 async 或 defer 属性来实现。这两种方式都不会阻塞 HTML 的解析，但有所不同。

`async` 属性

使用 async 属性的脚本会在后台加载，一旦加载完成就立即执行。这样做的好处是不会阻塞 HTML 的解析，但脚本的执行顺序不确定。

<!DOCTYPE html>
<html>
<head>
  <title>异步加载示例</title>
  <script src="example.js" async></script>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

`defer` 属性

使用 defer 属性的脚本也会在后台加载，但它们会在 HTML 完全解析完毕后按顺序执行。这种方式可以确保脚本的执行顺序，同时不会阻塞页面的加载。

<!DOCTYPE html>
<html>
<head>
  <title>延迟加载示例</title>
  <script src="example.js" defer></script>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

二、内嵌脚本与外部脚本

内嵌脚本

内嵌脚本是直接将 JavaScript 代码写在 <script> 标签中。这种方式适用于少量的脚本代码，但不利于代码的维护和复用。

<!DOCTYPE html>
<html>
<head>
  <title>内嵌脚本示例</title>
  <script>
    console.log('Hello World');
  </script>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

外部脚本

外部脚本是通过 src 属性引入外部 JavaScript 文件。这种方式便于代码的组织和复用，同时可以利用浏览器缓存提高性能。

<!DOCTYPE html>
<html>
<head>
  <title>外部脚本示例</title>
  <script src="example.js"></script>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

三、模块化加载

ES6 模块

ES6 引入了模块化的概念，通过 import 和 export 关键字来实现模块的加载和导出。模块化加载可以更好地组织代码，避免全局变量污染，并且支持异步加载。

// example.js
export function greet() {
  console.log('Hello World');
}
// main.js
import { greet } from './example.js';
greet();

动态导入

动态导入是指在代码执行过程中，根据需要动态加载模块。使用 import() 函数可以实现这一点。这种方式非常适合按需加载，提高性能。

document.getElementById('loadButton').addEventListener('click', () => {
  import('./example.js').then(module => {
    module.greet();
  });
});

四、加载优化技巧

放置脚本标签在底部

一种简单的优化方法是将 <script> 标签放在 HTML 的底部，这样可以确保在脚本加载和执行之前，页面的主要内容已经加载完毕。

<!DOCTYPE html>
<html>
<head>
  <title>脚本标签在底部</title>
</head>
<body>
  <h1>Hello World</h1>
  <script src="example.js"></script>
</body>
</html>

使用 CDN

将 JavaScript 文件托管在内容分发网络（CDN）上，可以利用 CDN 的分布式服务器，加快文件的加载速度。

<!DOCTYPE html>
<html>
<head>
  <title>使用 CDN</title>
  <script src="https://cdn.example.com/example.js"></script>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

按需加载

按需加载是指在用户操作触发时才加载必要的 JavaScript 文件。这种方式可以显著减少初始加载时间，提高用户体验。

document.getElementById('loadButton').addEventListener('click', () => {
  const script = document.createElement('script');
  script.src = 'example.js';
  document.body.appendChild(script);
});

五、JavaScript 加载的实际应用

单页面应用（SPA）

在单页面应用中，JavaScript 的加载和执行是至关重要的。使用框架如 React、Vue 或 Angular 可以更好地管理 JavaScript 的加载，提高开发效率和用户体验。

项目管理系统

在项目管理系统中，JavaScript 的加载和性能也非常关键。推荐使用 研发项目管理系统 PingCode 和 通用项目协作软件 Worktile 进行团队协作和项目管理。它们可以帮助团队更好地管理项目，提高工作效率。

电子商务网站

在电子商务网站中，优化 JavaScript 的加载可以显著提高页面加载速度，进而提升用户体验和转化率。使用异步加载和按需加载等技术，可以确保关键内容快速呈现。

六、总结

JavaScript 的加载方式多种多样，每种方式都有其适用场景和优缺点。通过合理选择加载方式和优化技巧，可以显著提高网页的加载速度和用户体验。无论是同步加载还是异步加载，内嵌脚本还是外部脚本，模块化加载还是按需加载，都需要根据具体需求和场景进行选择和优化。

希望本文能帮助你更好地理解 JavaScript 的加载方式，并应用到实际项目中。