预加载和预渲染通过提前加载资源提升性能，JavaScript 可用 link 标签、Image 对象、iframe 等实现；结合 Intersection Observer 智能预加载，优化用户体验。
前端性能优化中，资源预加载和预渲染能显著提升页面加载速度与用户体验。JavaScript 提供了多种方式实现这些策略，合理使用可以在用户感知前完成关键资源的准备。
预加载关键资源
预加载是指在主流程之外提前加载后续可能用到的资源，如图片、脚本、样式表或字体。通过 HTMLLinkElement 或动态创建标签的方式可以实现。
常见方法包括：- 使用 link 标签注入 head：动态添加 rel="preload" 的 link 标签，提示浏览器优先加载指定资源。
- 图片预加载：通过创建 Image 对象并设置 src，触发图片下载，常用于轮播图或动画序列。
- 脚本与样式预加载：用 rel="prefetch" 加载未来页面可能使用的 JS/CSS，适用于路由跳转前的准备。
示例：预加载一张重要图片
const img = new Image();
img.src = '/assets/hero.jpg';
img.onload = () => console.log('图片已预加载');
document.body.appendChild(img); // 实际使用时再插入
利用 preload 和 prefetch 进行资源提示
通过 JavaScript 动态添加 link 标签，可灵活控制预加载时机。
立即学习“Java免费学习笔记（深入）”；
典型场景：- preload：用于当前页面高优先级资源，如 WebFont、关键 CSS 或 JSON 数据。
- prefetch：用于下一页可能需要的资源，浏览器会在空闲时加载。
示例：预加载字体文件
const link = document.createElement('link');
link.rel = 'preload';
link.as = 'font';
link.href = '/fonts/myfont.woff2';
link.type = 'font/woff2';
link.crossOrigin = 'anonymous';
document.head.appendChild(link);
预渲染页面内容
预渲染指的是提前生成并加载某个页面的完整 DOM 结构，通常用于快速切换或离线访问。虽然原生 JavaScript 不直接支持全页预渲染，但可通过以下方式模拟。
实现思路：
- 静态资源预渲染：在构建阶段生成 HTML 快照（如 SSR），结合 JS 在客户端激活。
- 动态页面预渲染：在后台 iframe 中加载目标页面，缓存其 DOM 状态，需要时替换主页面内容。
- 数据预拉取 + 客户端渲染：提前通过 fetch 获取 API 数据，在用户进入页面前完成模板渲染。
示例：用隐藏 iframe 预渲染目标页
const iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.src = '/about.html';
document.body.appendChild(iframe);
// 用户点击“关于”时，可快速显示或提取内容
注意：iframe 预渲染会增加内存消耗，需权衡使用。
结合 Intersection Observer 实现懒加载+预加载
更智能的做法是：当用户滚动接近某区域时，提前加载相关资源。
操作逻辑：- 监听可视区域附近的元素。
- 在元素即将进入视口前，触发资源加载。
- 实现“懒加载图片 + 提前一步预加载”的组合策略。
示例：滚动接近时预加载下一张图
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src; // 触发加载
// 同时预加载下一张
const nextImg = img.nextElementSibling;
if (nextImg) new Image().src = nextImg.dataset.src;
observer.unobserve(img);
}
});
});
基本上就这些。预加载和预渲染的核心是“预测用户行为”，用 JavaScript 控制资源加载节奏，减少等待感。关键是不过度预载，避免浪费带宽和内存。
