JavaScript过滤大数据列表时浏览器冻结问题优化咨询

• 频繁操作DOM触发大量重排重绘：newList.forEach(user => domList.innerHTML += buildItem(user)) 写法每次循环都会触发DOM树重建、重排重绘，过滤结果越多性能损耗越夸张，100条以上就会出现明显卡顿。
• 无防抖逻辑：输入框每输入一个字符就立刻执行全量过滤+全量DOM渲染，输入连贯时会短时间触发多次高消耗任务，直接阻塞浏览器主线程导致页面冻结。
• 全量渲染所有匹配结果：如果过滤后有上万条匹配数据，会一次性生成上万条DOM节点，DOM本身是高内存消耗对象，节点数过万必然导致浏览器卡顿甚至崩溃。
• 过滤逻辑存在冗余计算：每次过滤时都要对字段做toLowerCase()、姓名拼接操作，数据量越大重复计算的消耗越高。

1. 基础优化（可支持千级数据流畅运行） #

1.1 新增防抖、预处理搜索字段、批量更新DOM #

代码示例：

<script type="text/javascript">
    // 预处理数据：提前生成搜索用的小写字段，避免过滤时重复计算
    const list = <?=json_encode($clients);?>.map(item => ({
        ...item,
        searchKey: `${item.customernumber.toLowerCase()} ${item.fn.toLowerCase()} ${item.ln.toLowerCase()}`
    }));
    const domList = document.getElementById('domList');
    // 防抖函数：300ms内重复触发只执行最后一次
    const debounce = (fn, delay = 300) => {
        let timer = null;
        return (...args) => {
            clearTimeout(timer);
            timer = setTimeout(() => fn.apply(this, args), delay);
        }
    }

    const filterEventHandler = debounce((event) => {
        const filterVal = event.target.value.toLowerCase();
        // 过滤逻辑简化
        const newList = filterVal ? list.filter(e => e.searchKey.includes(filterVal)) : list;
        // 一次性拼接所有HTML，只做一次DOM赋值
        let htmlStr = '';
        newList.forEach(user => htmlStr += buildItem(user));
        domList.innerHTML = htmlStr;
    })

    const buildItem = (user) => {
        return `
            <a href="<?=base_url();?>/clients/${user.id}" class="flex justify-between p-4 bg-gray-100 rounded item hover:bg-gray-200">
                <div class="flex items-center"><span class="mr-2 text-xs text-gray-400">${user.customernumber}</span> ${user.fn} ${user.ln}</div>
                <div class="ml-2 py-1 px-2 text-xs flex-shrink-0 flex justify-center items-center text-white ${user.status_bg} rounded">${user.status}</div>
            </a>`;
    }
</script>

2. 高级优化（支持5万级以上数据流畅运行） #

基础优化做完后如果匹配结果超过2000条还是会卡顿，核心瓶颈是DOM节点数量太多，需要引入虚拟滚动：

• 原理：只渲染当前可视区域内的条目，一般只需要渲染20~50个DOM节点，不管总数据量是多少都不会卡顿。
• 实现逻辑：
  1. 给列表容器设置固定高度 + overflow: auto，监听滚动事件
  2. 计算当前滚动位置对应的可视区域起止数据下标
  3. 只渲染对应下标的数据，用padding撑开容器高度模拟滚动条长度
     手写基础版本核心代码示例如下：

// 虚拟滚动配置
const ITEM_HEIGHT = 72; // 每个条目的高度，根据你的样式调整
const VISIBLE_COUNT = 20; // 可视区域最多显示的条目数
let currentList = list; // 存储当前过滤后的全量数据

const filterEventHandler = debounce((event) => {
    const filterVal = event.target.value.toLowerCase();
    currentList = filterVal ? list.filter(e => e.searchKey.includes(filterVal)) : list;
    // 初始化滚动位置，渲染第一页数据
    domList.scrollTop = 0;
    renderVisibleItems();
})

const renderVisibleItems = () => {
    const scrollTop = domList.scrollTop;
    // 计算起止下标
    const startIdx = Math.floor(scrollTop / ITEM_HEIGHT);
    const endIdx = Math.min(startIdx + VISIBLE_COUNT, currentList.length);
    const visibleItems = currentList.slice(startIdx, endIdx);
    // 拼接HTML，加上上下padding模拟滚动高度
    let htmlStr = `<div style="padding-top: ${startIdx * ITEM_HEIGHT}px; padding-bottom: ${(currentList.length - endIdx) * ITEM_HEIGHT}px">`;
    visibleItems.forEach(user => htmlStr += buildItem(user));
    htmlStr += '</div>';
    domList.innerHTML = htmlStr;
}
// 绑定滚动事件
domList.addEventListener('scroll', renderVisibleItems);

上面的实现不需要引入额外依赖，5万条数据过滤+滚动都不会有卡顿。

内容的提问来源于stack exchange，提问作者John Doener