加载全量元素后切片实现分页会影响性能吗？求优化方案

我的网站需要至少包含1000个复选框（checkbox）和1000个标签（label），目前演示版本仅包含12个。当前实现逻辑为加载全部元素后通过切片方式实现分页，担心未来加载2000个元素时，forEach循环及DOM操作会导致性能问题，求优化解决方案。

当前代码 #

// Load Words Call To Action
document.addEventListener('DOMContentLoaded', function () {
    fetch('http://localhost:5000/manage/letters/getAll')
    .then(response => response.json())
    .then(data => {
        loadLetters(data['data']);
        tran();
    });
});

// Load Letters Function
let lettersHtml;
function loadLetters(data) {
    const letters = document.querySelector('.letters');

    if (data.length === 0) {
        letters.innerHTML = "<p class='no-data'>لا يوجد محتوى</p>";
        return;
    }

    lettersHtml = "";

    data.forEach(function ({id, letter, file, clid, lid}) {
        lettersHtml += `<input type="checkbox" class="check-letter" id="${clid}" value = "${id}" onchange="tran()">`;
        lettersHtml += `<label for="${clid}" class="letter card" id="${lid}">${letter}</label>`;
        
        console.log("0");
    });
    letters.innerHTML = lettersHtml;
    console.log("1");

    // Calling Pagination
    pagina();
}

优化方案 #

1. 后端分页+按需加载（核心优化）

不要一次性请求全部2000条数据，改成后端提供分页接口（比如/manage/letters?page=1&pageSize=100），前端只请求当前页的数据。这样每次DOM操作只处理100条以内的元素，内存占用和渲染压力大幅降低。

调整后的前端示例：

document.addEventListener('DOMContentLoaded', function () {
    // 加载第一页
    loadLettersByPage(1, 100);
    tran();
});

function loadLettersByPage(page, pageSize) {
    fetch(`http://localhost:5000/manage/letters?page=${page}&pageSize=${pageSize}`)
    .then(response => response.json())
    .then(data => {
        loadLetters(data['data']);
        // 更新分页控件，比如总页数、当前页
        updatePagination(data.totalPages, page);
    });
}

// 分页点击事件示例
function onPageChange(page) {
    loadLettersByPage(page, 100);
}

2. 用数组拼接替代字符串累加

字符串是不可变类型，每次lettersHtml += ...都会创建新字符串，数据量大时性能损耗明显。改用数组存储每个元素的HTML字符串，最后用join('')拼接，性能提升显著。

修改loadLetters函数：

function loadLetters(data) {
    const letters = document.querySelector('.letters');

    if (data.length === 0) {
        letters.innerHTML = "<p class='no-data'>لا يوجد محتوى</p>";
        return;
    }

    const htmlArr = [];
    data.forEach(function ({id, letter, file, clid, lid}) {
        htmlArr.push(`<input type="checkbox" class="check-letter" id="${clid}" value="${id}">`);
        htmlArr.push(`<label for="${clid}" class="letter card" id="${lid}">${letter}</label>`);
    });
    letters.innerHTML = htmlArr.join('');
    
    pagina();
}

3. 事件委托替代单个元素绑定

当前每个复选框都绑定了onchange="tran()"，2000个元素会创建2000个事件监听，占用内存。改成给父元素.letters绑定一个change事件，通过事件冒泡判断触发源，统一处理。

移除HTML中的onchange属性，添加事件委托：

document.addEventListener('DOMContentLoaded', function () {
    // ... 其他代码
    // 给父元素绑定事件
    document.querySelector('.letters').addEventListener('change', function(e) {
        if (e.target.classList.contains('check-letter')) {
            tran();
        }
    });
});

4. 使用DocumentFragment减少DOM重绘

如果必须一次性加载大量数据，用DocumentFragment创建元素，最后一次性插入DOM，避免多次DOM操作导致的重绘重排。

示例：

function loadLetters(data) {
    const letters = document.querySelector('.letters');

    if (data.length === 0) {
        letters.innerHTML = "<p class='no-data'>لا يوجد محتوى</p>";
        return;
    }

    const fragment = document.createDocumentFragment();
    data.forEach(function ({id, letter, file, clid, lid}) {
        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.className = 'check-letter';
        checkbox.id = clid;
        checkbox.value = id;

        const label = document.createElement('label');
        label.htmlFor = clid;
        label.className = 'letter card';
        label.id = lid;
        label.textContent = letter;

        fragment.appendChild(checkbox);
        fragment.appendChild(label);
    });
    // 清空原有内容并插入新元素
    letters.innerHTML = '';
    letters.appendChild(fragment);
    
    pagina();
}

5. 虚拟滚动（适合滚动加载场景）

如果是滚动分页而非点击分页，用虚拟滚动技术：只渲染可视区域内的元素，超出区域的用空白占位，滚动时动态替换可视区域的内容。这种方式即使数据上万条，DOM中也只保留几十条元素，性能极佳。

内容的提问来源于stack exchange，提问作者Oussama Baroud