js延迟加载的方式有哪些？

JS延迟加载的方式有很多种，它们的目的都是为了优化网页性能，减少初始加载时间，提升用户体验。以下是几种常见的方式：

1. <script> 标签的 defer 属性:

告诉浏览器立即下载脚本，但在文档解析完成后、DOMContentLoaded事件触发之前执行。
多个带有 defer 属性的脚本会按照它们在 HTML 中出现的顺序执行。
适用于不依赖 DOMContentLoaded 事件触发的脚本，例如分析脚本或其他初始化脚本。

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

2. <script> 标签的 async 属性:

告诉浏览器立即下载脚本，并在下载完成后尽快执行。
async 脚本的执行不会阻塞文档解析，但它可能会在 DOMContentLoaded 事件触发之前或之后执行，执行顺序也不保证与它们在 HTML 中出现的顺序一致。
适用于独立的脚本，例如广告脚本或不依赖其他脚本的第三方库。

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

3. 动态创建 <script> 标签:

通过 JavaScript 动态创建 <script> 元素并将其添加到文档中。
可以完全控制脚本的下载和执行时机。
适用于按需加载脚本，例如用户交互后才需要加载的模块。

function loadScript(src) {
  const script = document.createElement('script');
  script.src = src;
  script.onload = () => {
    // 脚本加载完成后的回调函数
    console.log(src + ' loaded');
  };
  document.head.appendChild(script);
}

// 例如，在某个按钮点击事件中加载脚本
const button = document.getElementById('myButton');
button.addEventListener('click', () => {
  loadScript('myScript.js');
});

4. 使用 import() 动态导入 (ES Modules):

允许在需要时异步加载模块。
支持更细粒度的代码拆分和按需加载。

button.addEventListener('click', async () => {
  const { myFunction } = await import('./myModule.js');
  myFunction();
});

5. 使用延迟加载库:

一些库，例如 lozad.js，可以帮助你轻松实现图片、iframe 和其他资源的延迟加载。
它们通常使用 Intersection Observer API 来检测元素是否进入视口，并在需要时加载资源。

选择哪种方法取决于你的具体需求：

对于不依赖 DOM 的脚本，defer 是一个不错的选择。
对于独立的脚本，async 可以提高页面加载速度。
对于按需加载的脚本，动态创建 <script> 标签或使用 import() 是更灵活的选择。
对于图片和其他资源的延迟加载，可以使用专门的延迟加载库。

总结: 以上这些方法可以帮助你优化网站性能，减少页面加载时间，并提供更好的用户体验。选择最适合你的方法取决于你的具体需求和项目的复杂性。记住测试和分析你的网站性能，以确保你选择的延迟加载策略有效。

posted @ 2024-11-24 05:46 王铁柱6 阅读(152) 评论(0) 编辑收藏举报

刷新页面返回顶部

js延迟加载的方式有哪些？

公告