当前位置：首页 > JavaScript

js实现加载

2026-03-13 23:17:35JavaScript

实现 JavaScript 加载的几种方法

动态加载脚本
通过创建 script 元素动态插入到 DOM 中，适用于按需加载第三方库或模块：

const script = document.createElement('script');
script.src = 'https://example.com/library.js';
script.async = true; // 异步加载
document.head.appendChild(script);

使用 defer 属性
在 HTML 中声明脚本时添加 defer，确保脚本在 DOM 解析完成后按顺序执行：

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

模块化加载（ES Modules）
通过 import 语法实现模块化加载，需在 script 标签中声明 type="module"：

js实现加载

// module.js
export function init() { console.log('Loaded'); }

// main.js
import { init } from './module.js';
init();

监听加载事件
为脚本添加 onload 和 onerror 回调处理加载状态：

script.onload = () => console.log('Script loaded');
script.onerror = () => console.error('Load failed');

使用 Promise 封装加载逻辑
封装动态加载为可链式调用的 Promise：

js实现加载

function loadScript(url) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = url;
    script.onload = resolve;
    script.onerror = reject;
    document.head.appendChild(script);
  });
}

loadScript('bundle.js').then(() => console.log('Done'));

性能优化建议

预加载关键资源
通过 <link rel="preload"> 提前加载高优先级资源：

<link rel="preload" href="critical.js" as="script">

代码分割（Code Splitting）
配合打包工具（如 Webpack）分割代码块，实现按需加载：

// 动态导入返回 Promise
import('./module.js').then(module => {
  module.run();
});

懒加载非关键资源
对图片、非核心脚本等使用 Intersection Observer API 实现视窗内加载：

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target);
    }
  });
});

document.querySelectorAll('img.lazy').forEach(img => {
  observer.observe(img);
});