js 实现预加载
预加载的基本概念
预加载是一种优化技术，通过在页面加载初期提前请求资源，减少用户后续操作的等待时间。常见场景包括图片、音频、视频或关键脚本的提前加载。
使用<link rel="preload">标签
HTML5原生支持通过<link>标签实现资源预加载，适合声明式预加载：
<link rel="preload" href="critical.js" as="script">
<link rel="preload" href="hero-image.webp" as="image">as属性指定资源类型，帮助浏览器设置优先级和正确缓存。
JavaScript动态预加载
通过new Image()或fetchAPI实现动态预加载：
图片预加载示例
const preloadImages = (urls) => {
urls.forEach(url => {
const img = new Image();
img.src = url;
});
};
preloadImages(['image1.jpg', 'image2.png']);脚本/CSS预加载示例
const preloadResource = (url, type) => {
const link = document.createElement('link');
link.rel = 'preload';
link.href = url;
link.as = type;
document.head.appendChild(link);
};
preloadResource('theme.css', 'style');使用fetch实现控制
通过fetchAPI可更精细控制预加载过程：
fetch('data.json', {
method: 'GET',
cache: 'force-cache' // 强调使用缓存
}).then(response => {
if (!response.ok) return;
// 资源已缓存，后续使用时快速获取
});监听预加载完成事件
通过load/error事件监控预加载结果：
const img = new Image();
img.addEventListener('load', () => console.log('Loaded'));
img.addEventListener('error', () => console.warn('Failed'));
img.src = 'dynamic-banner.jpg';注意事项
- 避免过度预加载：只针对关键资源，防止带宽竞争
- HTTP/2环境下效果更佳：多路复用提升并行加载效率
- 考虑兼容性：老旧浏览器需降级处理
- 配合懒加载使用：预加载首屏资源，非首屏内容懒加载
性能优化建议
- 使用
Intersection ObserverAPI实现视口触发预加载 - 对Web字体等渲染阻塞资源优先预加载
- 通过
navigator.connection检测网络条件调整预加载策略
