48. 性能优化技巧合集：懒加载、预加载、长列表优化 副本.md
来源：https://my.feishu.cn/file/LFmBbhZU7oTqW9xtSj9cZA47n1r
采集状态：已完成正文采集；原文件源码视图逐行采集，行号 1 至 147 连续，滚动到底。
### 1. 核心概念 (Core Concept)
前端性能优化是一个涉及多方面技术的持续过程，旨在提升网页或应用的加载速度、渲染效率和用户交互流畅度。懒加载、预加载和长列表优化是其中三种重要的技术手段，主要针对资源加载和大量数据渲染的性能瓶颈。
### 2. 为什么需要它？ (The "Why")
* **提升用户体验:** 快速加载和流畅交互能显著减少用户的等待和挫败感，提高满意度。
* **节省带宽与资源:** 按需加载（懒加载）可以减少不必要的资源下载，尤其对于移动用户来说非常重要。预加载则可以在用户无感知的情况下提前获取可能需要的资源，避免后续的等待。长列表优化确保即使数据量巨大，页面也能保持流畅滚动，避免浏览器卡顿甚至崩溃。
* **提高转化率:** 网站或应用的性能与业务转化率直接相关，更快的加载速度通常意味着更高的转化率。
* **改善 SEO:** 搜索引擎越来越重视页面加载速度，优化性能有助于提升搜索排名。
### 3. API 与用法 (API & Usage)
这些技巧并非单一的 API，而是多种技术和模式的组合应用。
#### 3.1 懒加载 (Lazy Loading)
* **核心思想:** 只加载当前用户屏幕可见区域内的资源，当用户滚动到对应位置时再加载剩余的资源。
* **常见应用对象:** 图片、视频、组件、模块。
* **实现方式:**
* **图片/iframe:** 使用 `loading="lazy"` HTML 属性 (现代浏览器支持)。
```html
```
* **JavaScript/CSS/组件:** 动态创建 script/link 标签，或使用基于 Intersection Observer API 或 scroll 事件监听的方式判断元素是否进入视口，并根据数据属性（如 `data-src`）加载实际资源。
```javascript
// 使用 Intersection Observer API 懒加载图片示例
if ('IntersectionObserver' in window) {
let observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
let img = entry.target;
img.src = img.dataset.src;
if (img.dataset.srcset) {
img.srcset = img.dataset.srcset;
}
img.removeAttribute('data-src');
img.removeAttribute('data-srcset');
observer.unobserve(img);
}
});
});
document.querySelectorAll('img[data-src]').forEach(img => {
observer.observe(img);
});
} else {
// Fallback for older browsers (using scroll events - less efficient)
// ... implement scroll event logic ...
}
```
#### 3.2 预加载 (Preloading)
* **核心思想:** 在浏览器空闲时，提前加载用户在后续浏览过程中可能需要的关键资源，以便在需要时立即使用。
* **常见应用对象:** 关键字体、CSS、JavaScript、图片、甚至后续页面。
* **实现方式:**
* **``:** 在 `` 中声明需要提前加载的资源类型和路径。
```html
```
(`as` 属性很重要，告诉浏览器资源的类型，以便正确处理优先级和策略。)
* **``:** 用于预加载用户访问非当前页面的未来资源。优先级低于 `preload`，通常在浏览器空闲时进行。
```html
```
* **HTTP Header (`Link`):** 服务器端通过设置 `Link` 响应头来指示浏览器预加载资源。
```
Link: ; rel=preload; as=font; type="font/woff2"; crossorigin
```
#### 3.3 长列表优化 (Long List Optimization)
* **核心思想:** 当需要渲染大量同质数据项（如无限滚动列表、表格）时，不一次性渲染所有数据，而是只渲染当前用户可见区域及其附近的少量数据项。通过 DOM 复用或动态增删 DOM 来优化性能。
* **常见技术:**
* **虚拟滚动 (Virtual Scrolling):** 又称“窗口化”。计算当前可视区域内的起始和结束索引，只渲染这些索引范围内的数据对应的 DOM 节点。当用户滚动时，动态计算新的索引范围并更新 DOM 的内容和位置（通常通过设置 transform/translate）。
* **无限滚动 (Infinite Scrolling - 配合虚拟滚动):** 在用户滚动到列表底部附近时，触发加载下一页数据，然后将其添加到现有数据中，虚拟滚动负责只渲染可见部分。
* **库/框架支持:** 许多 UI 组件库和框架提供了成熟的长列表解决方案，例如：
* React: `react-window`, `react-virtualized`
* Vue: `vue-virtual-scroller`
* Angular: `@angular/cdk/scrolling`
* **实现原理示例 (简化概念):**
```javascript
// 伪代码示例，说明虚拟滚动概念
const listContainer = document.getElementById('list');
const itemHeight = 50; // 每个列表项的高度
const visibleItemsCount = Math.ceil(listContainer.clientHeight / itemHeight); // 可见项数量
let data = Array.from({ length: 10000 }, (_, i) => `Item ${i}`); // 1万条数据
let startIndex = 0; // 可见区域起始索引
function renderList() {
const endIndex = Math.min(startIndex + visibleItemsCount, data.length);
const fragment = document.createDocumentFragment();
listContainer.innerHTML = ''; // 清空旧DOM (实际实现更高效是复用/更新)
for (let i = startIndex; i < endIndex; i++) {
const item = document.createElement('div');
item.textContent = data[i];
item.style.height = `${itemHeight}px`;
item.style.position = 'absolute'; // 绝对定位配合 transform 实现高效滚动
item.style.top = `${i * itemHeight}px`;
fragment.appendChild(item);
}
listContainer.appendChild(fragment);
// 实际库中会根据滚动位置计算 startIndex 并更新 DOM
}
// 监听滚动事件，重新计算 startIndex 并调用 renderList
// ... (省略复杂的滚动计算和DOM复用逻辑)
```
### 4. 关键注意事项 (Key Considerations)
* **懒加载：**
* **SEO 影响:** 对于依赖 HTML 解析来获取内容的搜索引擎爬虫，延迟加载的内容可能无法被立即索引。对于重要内容，应避免完全依赖客户端懒加载，考虑服务器端渲染 (SSR) 或预渲染。
* **用户体验:** 懒加载可能导致内容突然出现，影响布局稳定性 (CLS)。使用占位符（低质量图片、骨架屏）可以改善体验。
* **JavaScript 依赖:** 懒加载通常依赖 JavaScript，如果 JS 加载失败或被禁用，内容可能永远不会加载。`loading="='lazy"` 属性是更好的原生解决方案。
* **预加载：**
* **过度使用:** 过多或不必要的预加载会反而占用带宽和 CPU 资源，延迟首屏渲染。只预加载那些**高度确定**在后续会立即使用的关键资源。
* **资源优先级:** `as` 属性必须正确设置，以确保浏览器能正确判断资源的优先级和如何处理（例如字体需要匿名跨域加载）。
* **缓存考量:** 预加载的资源会进入 HTTP 缓存，如果资源频繁变化，需要注意缓存策略。
* **长列表优化：**
* **计算精度:** 虚拟滚动需要精确计算每个列表项的高度或宽度（如果是横向列表）。如果列表项高度不固定，实现会更复杂（需要测量或预估高度）。
* **滚动位置维护:** 在用户滚动、数据更新或窗口大小变化时，需要精确计算并维护滚动位置，否则可能出现跳动或定位不准确的问题。
* **DOM 事件处理:** 在虚拟滚动中，DOM 节点是复用的，绑定在特定 DOM 实例上的事件监听器需要小心处理，确保事件能正确映射到当前渲染的数据项上。
* **综合考量:** 并非所有场景都适合所有技术。需要根据具体业务需求、内容类型和用户行为来选择最合适的优化策略，并且通常需要多种技术结合使用。
### 5. 参考资料 (References)
* **MDN Web Docs:**
* [Lazy loading](https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading)
* [Preload - What is preload?](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload)
* [Preload - What is prefetch?](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/prefetch)
* [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
* **web.dev (Google Developers):**
* [Lazy-load images and video](https://web.dev/lazy-loading-images/)
* [Preload critical assets to improve loading speed](https://web.dev/preload-critical-assets/)
* [Rendering large lists with React Window](https://web.dev/virtualize-long-lists-react-window/) (以 React 为例解释虚拟滚动的概念)
* **规范/文档:**
* [HTML Standard - lazy loading content](https://html.spec.whatwg.org/multipage/embedded-content.html#lazy-loading-content)
---
原文链接与附件索引
Lazy loading
https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading
Preload - What is preload?
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload
Preload - What is prefetch?
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/prefetch
Intersection Observer API
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
Lazy-load images and video
https://web.dev/lazy-loading-images/
Preload critical assets to improve loading speed
https://web.dev/preload-critical-assets/
Rendering large lists with React Window
https://web.dev/virtualize-long-lists-react-window/
HTML Standard - lazy loading content
https://html.spec.whatwg.org/multipage/embedded-content.html#lazy-loading-content
```
* **JavaScript/CSS/组件:** 动态创建 script/link 标签，或使用基于 Intersection Observer API 或 scroll 事件监听的方式判断元素是否进入视口，并根据数据属性（如 `data-src`）加载实际资源。
```javascript
// 使用 Intersection Observer API 懒加载图片示例
if ('IntersectionObserver' in window) {
let observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
let img = entry.target;
img.src = img.dataset.src;
if (img.dataset.srcset) {
img.srcset = img.dataset.srcset;
}
img.removeAttribute('data-src');
img.removeAttribute('data-srcset');
observer.unobserve(img);
}
});
});
document.querySelectorAll('img[data-src]').forEach(img => {
observer.observe(img);
});
} else {
// Fallback for older browsers (using scroll events - less efficient)
// ... implement scroll event logic ...
}
```
#### 3.2 预加载 (Preloading)
* **核心思想:** 在浏览器空闲时，提前加载用户在后续浏览过程中可能需要的关键资源，以便在需要时立即使用。
* **常见应用对象:** 关键字体、CSS、JavaScript、图片、甚至后续页面。
* **实现方式:**
* **``:** 在 `` 中声明需要提前加载的资源类型和路径。
```html
```
(`as` 属性很重要，告诉浏览器资源的类型，以便正确处理优先级和策略。)
* **``:** 用于预加载用户访问非当前页面的未来资源。优先级低于 `preload`，通常在浏览器空闲时进行。
```html
```
* **HTTP Header (`Link`):** 服务器端通过设置 `Link` 响应头来指示浏览器预加载资源。
```
Link: ; rel=preload; as=font; type="font/woff2"; crossorigin
```
#### 3.3 长列表优化 (Long List Optimization)
* **核心思想:** 当需要渲染大量同质数据项（如无限滚动列表、表格）时，不一次性渲染所有数据，而是只渲染当前用户可见区域及其附近的少量数据项。通过 DOM 复用或动态增删 DOM 来优化性能。
* **常见技术:**
* **虚拟滚动 (Virtual Scrolling):** 又称“窗口化”。计算当前可视区域内的起始和结束索引，只渲染这些索引范围内的数据对应的 DOM 节点。当用户滚动时，动态计算新的索引范围并更新 DOM 的内容和位置（通常通过设置 transform/translate）。
* **无限滚动 (Infinite Scrolling - 配合虚拟滚动):** 在用户滚动到列表底部附近时，触发加载下一页数据，然后将其添加到现有数据中，虚拟滚动负责只渲染可见部分。
* **库/框架支持:** 许多 UI 组件库和框架提供了成熟的长列表解决方案，例如：
* React: `react-window`, `react-virtualized`
* Vue: `vue-virtual-scroller`
* Angular: `@angular/cdk/scrolling`
* **实现原理示例 (简化概念):**
```javascript
// 伪代码示例，说明虚拟滚动概念
const listContainer = document.getElementById('list');
const itemHeight = 50; // 每个列表项的高度
const visibleItemsCount = Math.ceil(listContainer.clientHeight / itemHeight); // 可见项数量
let data = Array.from({ length: 10000 }, (_, i) => `Item ${i}`); // 1万条数据
let startIndex = 0; // 可见区域起始索引
function renderList() {
const endIndex = Math.min(startIndex + visibleItemsCount, data.length);
const fragment = document.createDocumentFragment();
listContainer.innerHTML = ''; // 清空旧DOM (实际实现更高效是复用/更新)
for (let i = startIndex; i < endIndex; i++) {
const item = document.createElement('div');
item.textContent = data[i];
item.style.height = `${itemHeight}px`;
item.style.position = 'absolute'; // 绝对定位配合 transform 实现高效滚动
item.style.top = `${i * itemHeight}px`;
fragment.appendChild(item);
}
listContainer.appendChild(fragment);
// 实际库中会根据滚动位置计算 startIndex 并更新 DOM
}
// 监听滚动事件，重新计算 startIndex 并调用 renderList
// ... (省略复杂的滚动计算和DOM复用逻辑)
```
### 4. 关键注意事项 (Key Considerations)
* **懒加载：**
* **SEO 影响:** 对于依赖 HTML 解析来获取内容的搜索引擎爬虫，延迟加载的内容可能无法被立即索引。对于重要内容，应避免完全依赖客户端懒加载，考虑服务器端渲染 (SSR) 或预渲染。
* **用户体验:** 懒加载可能导致内容突然出现，影响布局稳定性 (CLS)。使用占位符（低质量图片、骨架屏）可以改善体验。
* **JavaScript 依赖:** 懒加载通常依赖 JavaScript，如果 JS 加载失败或被禁用，内容可能永远不会加载。`loading="='lazy"` 属性是更好的原生解决方案。
* **预加载：**
* **过度使用:** 过多或不必要的预加载会反而占用带宽和 CPU 资源，延迟首屏渲染。只预加载那些**高度确定**在后续会立即使用的关键资源。
* **资源优先级:** `as` 属性必须正确设置，以确保浏览器能正确判断资源的优先级和如何处理（例如字体需要匿名跨域加载）。
* **缓存考量:** 预加载的资源会进入 HTTP 缓存，如果资源频繁变化，需要注意缓存策略。
* **长列表优化：**
* **计算精度:** 虚拟滚动需要精确计算每个列表项的高度或宽度（如果是横向列表）。如果列表项高度不固定，实现会更复杂（需要测量或预估高度）。
* **滚动位置维护:** 在用户滚动、数据更新或窗口大小变化时，需要精确计算并维护滚动位置，否则可能出现跳动或定位不准确的问题。
* **DOM 事件处理:** 在虚拟滚动中，DOM 节点是复用的，绑定在特定 DOM 实例上的事件监听器需要小心处理，确保事件能正确映射到当前渲染的数据项上。
* **综合考量:** 并非所有场景都适合所有技术。需要根据具体业务需求、内容类型和用户行为来选择最合适的优化策略，并且通常需要多种技术结合使用。
### 5. 参考资料 (References)
* **MDN Web Docs:**
* [Lazy loading](https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading)
* [Preload - What is preload?](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload)
* [Preload - What is prefetch?](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/prefetch)
* [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
* **web.dev (Google Developers):**
* [Lazy-load images and video](https://web.dev/lazy-loading-images/)
* [Preload critical assets to improve loading speed](https://web.dev/preload-critical-assets/)
* [Rendering large lists with React Window](https://web.dev/virtualize-long-lists-react-window/) (以 React 为例解释虚拟滚动的概念)
* **规范/文档:**
* [HTML Standard - lazy loading content](https://html.spec.whatwg.org/multipage/embedded-content.html#lazy-loading-content)
---
原文链接与附件索引
Lazy loading
https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading
Preload - What is preload?
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload
Preload - What is prefetch?
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/prefetch
Intersection Observer API
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
Lazy-load images and video
https://web.dev/lazy-loading-images/
Preload critical assets to improve loading speed
https://web.dev/preload-critical-assets/
Rendering large lists with React Window
https://web.dev/virtualize-long-lists-react-window/
HTML Standard - lazy loading content
https://html.spec.whatwg.org/multipage/embedded-content.html#lazy-loading-content