Pagination分页技术详解与前端实现优化

优化前：卡得不行

最近在做项目的时候，分页组件一上线就给我整不会了，优化前加载时间能到5秒，用户翻页体验简直不要太差，卡顿得不行。

找到脖子了！

为了找出瓶颈，我用了Chrome的性能面板和Lighthouse来分析，发现主要问题出在大量DOM操作和数据渲染上。每次翻页，我都把所有新数据一次性塞到页面里，结果浏览器压力山大。

试了几种方案

一开始想的是虚拟列表，但考虑到项目复杂度，先从简单的入手。我尝试了分批渲染和懒加载，但效果都不明显。后来灵机一动，决定减少不必要的DOM操作，只更新必要的部分。

优化后：流畅多了

最后我采用了一种混合方案：初次加载少量数据，然后在用户翻页时动态加载更多数据，并且只更新变化的部分DOM，而不是重新渲染整个列表。这样不仅减少了页面渲染的压力，也提升了用户体验。

性能数据对比

优化前后，加载时间从5秒降到800毫秒，提升明显。下面贴一下关键的代码对比。

优化前的代码

javascript
// 获取数据并渲染整个列表
function fetchData(page) {
    fetch(https://jztheme.com/api/data?page=${page})
        .then(response => response.json())
        .then(data => {
            const list = document.getElementById('data-list');
            list.innerHTML = ''; // 清空原有数据
            data.forEach(item => {
                const li = document.createElement('li');
                li.textContent = item.name;
                list.appendChild(li);
            });
        })
        .catch(error => console.error('Error fetching data:', error));
}

优化后的代码

javascript
// 获取数据并动态更新列表
let currentPage = 1;
let dataCache = {};

function fetchData(page) {
    if (dataCache[page]) {
        updateList(dataCache[page]);
    } else {
        fetch(https://jztheme.com/api/data?page=${page})
            .then(response => response.json())
            .then(data => {
                dataCache[page] = data;
                updateList(data);
            })
            .catch(error => console.error('Error fetching data:', error));
    }
}

function updateList(data) {
    const list = document.getElementById('data-list');
    const start = (currentPage - 1) * 10;
    const end = start + 10;
    const fragment = document.createDocumentFragment();

    for (let i = start; i < end && i  {
    currentPage++;
    fetchData(currentPage);
});

小结

以上是我的优化经验，有更好的方案欢迎交流。其实项目中很多问题都可以通过减少DOM操作和优化数据处理来解决，关键是要找到瓶颈所在，然后针对性地优化。