当前位置：首页 > news >正文

JavaScript 延迟加载的方法（ 7种）

news 2025/6/30 10:09:56

JavaScript脚本的延迟加载（也称为懒加载）是指在网页的主要内容已经加载并显示给用户之后，再加载或执行额外的JavaScript代码。这样做可以加快页面的初始加载速度，改善用户体验，并减少服务器的压力。

在这里插入图片描述

以下是几种常见的延迟加载JavaScript的方法：

defer 属性：
- 使用 <script> 标签的 defer 属性可以让浏览器在解析文档的同时下载脚本文件，但会在整个文档解析完成后再执行这些脚本。
- 语法：<script src="example.js" defer></script>
async 属性：
- async 属性告诉浏览器立即开始下载脚本，并且在下载完成后尽快执行它，而不需要等待HTML文档解析完成。这适用于与页面内容无关的脚本，因为它不会阻塞DOM构建。
- 语法：<script src="example.js" async></script>
动态创建 <script> 元素：
- 通过JavaScript动态地创建 <script> 元素并添加到文档中，可以在特定事件发生时（如窗口加载完成、用户滚动到某个位置等）才加载脚本。
- 示例代码：
```
var script = document.createElement('script');
script.src = 'example.js';
document.body.appendChild(script);
```

使用 Intersection Observer API：

对于按需加载的内容（例如，当用户滚动到页面的某一部分时），可以使用 Intersection Observer API 来监听元素是否进入视口，并在该时刻加载相应的脚本。

示例代码：

let observer = new IntersectionObserver((entries) => {entries.forEach(entry => {if (entry.isIntersecting) {// 加载脚本let script = document.createElement('script');script.src = 'example.js';document.body.appendChild(script);observer.unobserve(entry.target); // 取消观察}});
});
observer.observe(document.querySelector('.lazy-load-script'));

模块化和代码分割：
- 在现代JavaScript开发中，可以使用模块化工具（如 Webpack）进行代码分割。根据路由或者组件的需求来加载必要的JavaScript代码，这样可以确保只有需要的代码被加载，提高性能。
preload 和 prefetch：
- preload 提示浏览器尽早开始加载资源，但并不立即执行；prefetch 则是提示浏览器在空闲时间预取可能会在未来使用的资源。它们都可以帮助优化加载策略，但不是严格意义上的延迟加载。
- 语法：<link rel="preload" href="example.js" as="script"> 或 <link rel="prefetch" href="example.js">
服务端渲染 (SSR) 和客户端水合作用 (hydration)：
- 对于使用框架如React, Vue, Angular的应用程序，可以通过服务端渲染生成静态HTML，并在客户端进行水合作用（即应用JavaScript行为）。这种方式可以让用户更快看到页面内容，同时保证交互性。