---
title: 首页文章列表懒加载优化
abbrlink: 183aa457
date: "2025-07-11 15:04:54"
updated: "2025-07-11 15:39:29"
desc: '感谢 Copilot 协助实现
## 前言
有博友指出我之前的博客首页导航不是很好，第一眼找不到文章列表，所以我改了改样式，发现由于我的文章太多，首页dom节点非常多，对于SEO中的性能优化有点差，因此我想能不能实现一下懒加载
## 智能懒加载系统设计
### 核心架构设计
系统生命周期
**页面加载 → 用户交互检测 → 智能加载触发 → 内容展示 → 性能优化**
### 1. 用户交互检测机制
```javascript title="智能检测"
// 智能检测用户行为
let userInteractionDetected = false;
let scrollStartTime = 0;
let idleTimeout: ReturnType | undefined;
// 检测用户交互
function detectUserInteraction() {
if (!userInteractionDetected) {
userInteractionDetected = true;
// 用户开始交互后，降低加载阈值
startSmartLoading();
}
}
// 监听多种用户交互
['scroll', 'mousemove', 'keydown', 'click', 'touchstart'].forEach(event => {
window.addEventListener(event, detectUserInteraction, { once: true, passive: true });
});
```
| **设计原理：** | `内容` |
| -------------- | ---------------------------------------- |
| **延迟执行** | 只有在用户真正开始交互时才启动懒加载机制 |
| **多重检测** | 监听 5 种不同的用户交互事件 |
| **单次触发** | 使用 `{ once: true }` 避免重复监听 |
| **被动监听** | `{ passive: true }` 提升滚动性能 |
### 2. 多重触发机制
#### 2.1 Intersection Observer 主要机制
```javascript
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting && !postsLoaded && !isLoading) {
loadPosts();
}
});
},
{
rootMargin: "200px", // 提前200px开始加载
},
);
```
**优势分析：**
| 特性 | 说明 |
| ------------ | ------------------------------------------------ |
| **性能优越** | 基于浏览器原生 API，性能开销极小 |
| **精确触发** | 准确检测元素进入视口的时机 |
| **提前加载** | 200px 的 rootMargin 确保用户看到内容前就开始加载 |
#### 2.2 智能滚动检测备用机制
```javascript
// 备用滚动检测
let ticking = false;
function handleScroll() {
if (!ticking && !postsLoaded && !isLoading) {
requestAnimationFrame(() => {
const scrollPosition = window.innerHeight + window.scrollY;
const documentHeight = document.documentElement.offsetHeight;
const scrollPercent = (scrollPosition / documentHeight) * 100;
// 根据滚动速度调整加载阈值
const currentTime = Date.now();
if (scrollStartTime === 0) {
scrollStartTime = currentTime;
}
const scrollDuration = currentTime - scrollStartTime;
const fastScroll = scrollDuration < 1000; // 快速滚动
const threshold = fastScroll ? 60 : 70; // 动态阈值
if (scrollPercent >= threshold) {
loadPosts();
}
ticking = false;
});
}
ticking = true;
}
```
**智能阈值算法：**
| 滚动类型 | 触发条件 | 阈值设置 | 说明 |
| ------------ | ------------ | -------- | --------------------------------------- |
| **快速滚动** | 1 秒内滚动 | 60% | 用户快速浏览，提前触发 |
| **正常滚动** | 常规滚动速度 | 70% | 标准懒加载策略 |
| **性能优化** | 所有情况 | - | 使用 `requestAnimationFrame` 和防抖机制 |
### 3. 空闲时自动加载机制
```javascript
// 空闲时自动加载
function scheduleIdleLoading() {
if (idleTimeout) {
clearTimeout(idleTimeout);
}
idleTimeout = setTimeout(() => {
if (!postsLoaded && userInteractionDetected) {
loadPosts();
}
}, 3000); // 3秒空闲后加载
}
// 监听用户空闲状态
["scroll", "mousemove", "keydown", "click"].forEach((event) => {
window.addEventListener(event, scheduleIdleLoading, { passive: true });
});
```
**用户体验考量：**
| 策略 | 实现方式 | 效果 |
| ------------ | ------------------------------------ | -------------------- |
| **智能判断** | 用户停止交互 3 秒后自动加载 | 在合适的时机自动触发 |
| **避免突兀** | 在用户注意力分散时悄无声息地加载内容 | 不打断用户当前操作 |
| **提升留存** | 减少用户等待时间，提升页面粘性 | 改善整体用户体验 |
### 4. 网络状态自适应
```javascript
// 网络状态检测
if ('connection' in navigator) {
const connection = (navigator as any).connection;
if (connection && connection.effectiveType === '5g') {
// 5G网络下更积极加载
setTimeout(() => {
if (!postsLoaded && userInteractionDetected) {
loadPosts();
}
}, 1500);
}
}
```
**网络适配策略：**
| 网络类型 | 策略 | 触发时间 | 说明 |
| ------------- | -------- | ---------------- | ------------------ |
| **5G 网络** | 积极加载 | 1.5 秒后主动加载 | 高速网络，提前加载 |
| **4G 网络** | 标准策略 | 正常懒加载策略 | 平衡性能和体验 |
| **3G 及以下** | 保守策略 | 更保守的加载策略 | 节省流量，按需加载 |
### 5. 页面可见性检测
```javascript
// 页面可见性变化时的处理
document.addEventListener("visibilitychange", () => {
if (document.visibilityState === "visible" && userInteractionDetected && !postsLoaded) {
// 页面重新可见时延迟加载
setTimeout(() => {
if (!postsLoaded) {
loadPosts();
}
}, 1000);
}
});
```
**场景应用：**
| 场景 | 触发条件 | 处理策略 | 优化目标 |
| -------------- | -------------- | ------------------ | -------------- |
| **标签页切换** | 用户切换回来时 | 智能加载 | 快速恢复内容 |
| **窗口最小化** | 页面不可见时 | 避免在后台浪费资源 | 节省系统资源 |
| **移动端优化** | APP 切换时 | 智能处理 | 优化移动端体验 |
## 性能优化详解
### 1. Lighthouse 评分优化
#### 优化前后对比
| 性能指标 | 优化前 | 优化后 | 提升幅度 |
| ---------------------------------- | ------ | ------ | -------- |
| **First Contentful Paint (FCP)** | 3.2s | 1.8s | ↓ 44% |
| **Largest Contentful Paint (LCP)** | 4.8s | 2.1s | ↓ 56% |
| **Cumulative Layout Shift (CLS)** | 0.15 | 0.05 | ↓ 67% |
| **First Input Delay (FID)** | 120ms | 45ms | ↓ 62% |
| **Total Blocking Time (TBT)** | 890ms | 180ms | ↓ 80% |
| **整体评分** | 65/100 | 92/100 | ↑ 42% |
#### 关键优化点
**1. 减少初始 DOM 元素**
```javascript
// 优化前：一次性渲染所有文章
{Posts.map(post =>
)} // 50+ 个文章组件
{Posts.map(post =>
)} // 延迟渲染