首页文章列表懒加载优化

1
const observer = new IntersectionObserver(
2
    (entries) => {
3
        entries.forEach((entry) => {
4
            if (entry.isIntersecting && !postsLoaded && !isLoading) {
5
                loadPosts();
6
            }
7
        });
8
    },
9
    {
10
        rootMargin: "200px", // 提前200px开始加载
11
    },
12
);

1
// 备用滚动检测
2
let ticking = false;
3
function handleScroll() {
4
    if (!ticking && !postsLoaded && !isLoading) {
5
        requestAnimationFrame(() => {
6
            const scrollPosition = window.innerHeight + window.scrollY;
7
            const documentHeight = document.documentElement.offsetHeight;
8
            const scrollPercent = (scrollPosition / documentHeight) * 100;
9

10
            // 根据滚动速度调整加载阈值
11
            const currentTime = Date.now();
12
            if (scrollStartTime === 0) {
13
                scrollStartTime = currentTime;
14
            }
15

16
            const scrollDuration = currentTime - scrollStartTime;
17
            const fastScroll = scrollDuration < 1000; // 快速滚动
18
            const threshold = fastScroll ? 60 : 70; // 动态阈值
19

20
            if (scrollPercent >= threshold) {
21
                loadPosts();
22
            }
23

24
            ticking = false;
25
        });
26
    }
27
    ticking = true;
28
}

1
// 空闲时自动加载
2
function scheduleIdleLoading() {
3
    if (idleTimeout) {
4
        clearTimeout(idleTimeout);
5
    }
6

7
    idleTimeout = setTimeout(() => {
8
        if (!postsLoaded && userInteractionDetected) {
9
            loadPosts();
10
        }
11
    }, 3000); // 3秒空闲后加载
12
}
13

14
// 监听用户空闲状态
15
["scroll", "mousemove", "keydown", "click"].forEach((event) => {
16
    window.addEventListener(event, scheduleIdleLoading, { passive: true });
17
});

1
// 网络状态检测
2
if ('connection' in navigator) {
3
    const connection = (navigator as any).connection;
4
    if (connection && connection.effectiveType === '5g') {
5
        // 5G网络下更积极加载
6
        setTimeout(() => {
7
            if (!postsLoaded && userInteractionDetected) {
8
                loadPosts();
9
            }
10
        }, 1500);
11
    }
12
}

1
// 页面可见性变化时的处理
2
document.addEventListener("visibilitychange", () => {
3
    if (document.visibilityState === "visible" && userInteractionDetected && !postsLoaded) {
4
        // 页面重新可见时延迟加载
5
        setTimeout(() => {
6
            if (!postsLoaded) {
7
                loadPosts();
8
            }
9
        }, 1000);
10
    }
11
});

1
// 优化前：一次性渲染所有文章
2
<div class="posts-grid">
3
    {Posts.map(post => <Article />)} // 50+ 个文章组件
4
</div>
5

6
// 优化后：按需渲染
7
<div id="posts-container" style="display: none;">
8
    {Posts.map(post => <Article />)} // 延迟渲染
9
</div>

1
// 使用 requestAnimationFrame 优化滚动处理
2
requestAnimationFrame(() => {
3
    // 滚动计算逻辑
4
});

1
// 预加载关键资源
2
function preloadImages() {
3
    const images = postsContainer?.querySelectorAll("img");
4
    images?.forEach((img) => {
5
        if (img.dataset.src) {
6
            img.src = img.dataset.src;
7
        }
8
    });
9
}

1
// 生命周期管理
2
let observer: IntersectionObserver | null = null;
3

4
// 清理资源
5
function cleanup() {
6
    if (observer) {
7
        observer.disconnect();
8
        observer = null;
9
    }
10

11
    if (idleTimeout) {
12
        clearTimeout(idleTimeout);
13
        idleTimeout = undefined;
14
    }
15
}
16

17
// 页面卸载时清理
18
window.addEventListener('beforeunload', cleanup);

1
// 加载动画设计
2
<div class="loading-indicator">
3
    <div class="spinner"></div>
4
    <span>正在加载更多内容...</span>
5
</div>

1
#posts-container {
2
    opacity: 0;
3
    transform: translateY(20px);
4
    transition:
5
        opacity 0.8s ease,
6
        transform 0.8s ease;
7
}
8

9
#posts-container[style*="display: block"] {
10
    opacity: 1;
11
    transform: translateY(0);
12
}

1
/* 移动端优化 */
2
@media (max-width: 768px) {
3
    .load-posts-trigger {
4
        margin: 1rem 0;
5
        padding: 0.5rem;
6
    }
7

8
    .loading-indicator {
9
        font-size: 0.8rem;
10
    }
11

12
    .spinner {
13
        width: 16px;
14
        height: 16px;
15
    }
16
}

1
// 第一阶段：DOM 就绪
2
document.addEventListener("DOMContentLoaded", function () {
3
    // 获取关键 DOM 元素
4
    const postsContainer = document.getElementById("posts-container");
5
    const loadTrigger = document.getElementById("load-posts-trigger");
6

7
    // 初始化状态变量
8
    let postsLoaded = false;
9
    let isLoading = false;
10
    let userInteractionDetected = false;
11
});

1
// 第二阶段：等待用户交互
2
function detectUserInteraction() {
3
    if (!userInteractionDetected) {
4
        userInteractionDetected = true;
5
        // 状态转换：进入智能加载阶段
6
        startSmartLoading();
7
    }
8
}

1
// 第三阶段：多重触发机制启动
2
function startSmartLoading() {
3
    // 3.1 启动 Intersection Observer
4
    const observer = new IntersectionObserver(/* ... */);
5

6
    // 3.2 启动滚动检测
7
    window.addEventListener("scroll", handleScroll);
8

9
    // 3.3 启动空闲检测
10
    scheduleIdleLoading();
11

12
    // 3.4 启动网络检测
13
    checkNetworkStatus();
14
}

1
// 第四阶段：内容加载与展示
2
function loadPosts() {
3
    // 4.1 状态检查
4
    if (isLoading || postsLoaded || !postsContainer) return;
5

6
    // 4.2 设置加载状态
7
    isLoading = true;
8
    showLoadingIndicator();
9

10
    // 4.3 内容展示
11
    setTimeout(() => {
12
        postsContainer.style.display = "block";
13
        postsContainer.style.animation = "fadeInUp 0.8s ease-in-out forwards";
14

15
        // 4.4 状态更新
16
        postsLoaded = true;
17
        isLoading = false;
18

19
        // 4.5 后续优化
20
        preloadImages();
21
        hideLoadingIndicator();
22
    }, 300);
23
}

1
// 第五阶段：资源清理
2
function cleanup() {
3
    // 5.1 清理观察者
4
    if (observer) {
5
        observer.disconnect();
6
        observer = null;
7
    }
8

9
    // 5.2 清理定时器
10
    if (idleTimeout) {
11
        clearTimeout(idleTimeout);
12
        idleTimeout = undefined;
13
    }
14

15
    // 5.3 移除事件监听
16
    window.removeEventListener("scroll", handleScroll);
17
}

1
// Intersection Observer 兼容性检测
2
if ("IntersectionObserver" in window) {
3
    // 使用现代 API
4
    const observer = new IntersectionObserver(/* ... */);
5
} else {
6
    // 降级到滚动检测
7
    window.addEventListener("scroll", handleScroll);
8
}

1
// 网络连接检测
2
if ('connection' in navigator) {
3
    const connection = (navigator as any).connection;
4
    // 根据网络状态调整策略
5
} else {
6
    // 默认策略
7
    setTimeout(() => {
8
        if (!postsLoaded && userInteractionDetected) {
9
            loadPosts();
10
        }
11
    }, 2000);
12
}

1
// 性能监控
2
function measurePerformance() {
3
    const navigation = performance.getEntriesByType("navigation")[0];
4
    const fcp = performance.getEntriesByName("first-contentful-paint")[0];
5

6
    console.log("页面加载时间:", navigation.loadEventEnd - navigation.loadEventStart);
7
    console.log("首次内容绘制:", fcp.startTime);
8
}

1
// 支持不同的加载策略
2
const loadingStrategy = {
3
    aggressive: { threshold: 50, delay: 1000 },
4
    normal: { threshold: 70, delay: 1500 },
5
    conservative: { threshold: 85, delay: 2000 },
6
};
7

8
const currentStrategy = loadingStrategy.normal;