解析追加3.6万条法国城市数据耗时过久，页面卡顿求优化

嘿，你遇到的这个问题太典型了——在循环里频繁调用append()操作DOM，相当于让浏览器反复进行重排（Reflow）和重绘（Repaint），3.6万条数据的话，不卡顿才怪！下面给你几个靠谱的优化方案，按见效快慢排序：

1. 先构建完整HTML字符串，一次性插入DOM #

这是最直接有效的方法，因为每一次$('.list').append()都会触发浏览器的重排和重绘，3.6万次操作会让浏览器不堪重负。我们可以先把所有列表项的HTML内容拼接成一个完整的字符串，最后只做一次DOM插入操作：

let jsurl = '{/literal}{$urls.js_url}{literal}'; 
var ufcities; 
$.getJSON(jsurl + 'villes_france.json', function(ufd) {
    ufcities = ufd;
    let listHtml = '';
    // 循环拼接所有li的HTML
    $.each(ufcities, function(i, o) {
        listHtml += `<li><strong>${o.ville_nom_reel}</strong><i>${o.ville_code_postal}</i></li>`;
    });
    // 一次性插入到DOM中，只触发一次重排
    $('.list').html(listHtml);
});

这里用了ES6的模板字符串（` `）来拼接内容，比传统的字符串拼接更简洁易读。如果需要兼容老旧浏览器，换成普通的+拼接也一样有效。

2. 使用DocumentFragment批量插入 #

DocumentFragment是一个“虚拟”的DOM容器，向它添加元素不会触发页面重绘，等所有元素都添加完成后，再把整个片段插入到真实DOM中，性能和字符串拼接不相上下，但更符合DOM操作的规范：

let jsurl = '{/literal}{$urls.js_url}{literal}'; 
var ufcities; 
$.getJSON(jsurl + 'villes_france.json', function(ufd) {
    ufcities = ufd;
    const fragment = document.createDocumentFragment();
    $.each(ufcities, function(i, o) {
        // 创建li元素并添加到片段中
        const $li = $(`<li><strong>${o.ville_nom_reel}</strong><i>${o.ville_code_postal}</i></li>`);
        fragment.appendChild($li[0]);
    });
    // 一次性插入片段到DOM
    $('.list').append(fragment);
});

3. 分批加载/虚拟滚动（推荐长期方案） #

3.6万条数据一次性展示给用户其实没有意义——用户根本不可能一次性浏览完这么多内容。分批加载（或者虚拟滚动）不仅能解决性能问题，还能提升用户体验：

let jsurl = '{/literal}{$urls.js_url}{literal}'; 
var ufcities;
const batchSize = 100; // 每次加载100条
let currentPage = 0;

// 加载指定批次的城市数据
function loadBatch(page) {
    const startIndex = page * batchSize;
    const endIndex = startIndex + batchSize;
    const currentBatch = ufcities.slice(startIndex, endIndex);
    
    let batchHtml = '';
    $.each(currentBatch, function(i, o) {
        batchHtml += `<li><strong>${o.ville_nom_reel}</strong><i>${o.ville_code_postal}</i></li>`;
    });
    
    $('.list').append(batchHtml);
    currentPage++;
}

$.getJSON(jsurl + 'villes_france.json', function(ufd) {
    ufcities = ufd;
    // 先加载第一批次
    loadBatch(currentPage);
    
    // 监听滚动事件，当用户滚动到页面底部时加载下一批
    $(window).on('scroll', function() {
        const scrollBottom = $(window).scrollTop() + $(window).height();
        const documentHeight = $(document).height();
        
        // 距离底部100px时触发加载
        if (scrollBottom >= documentHeight - 100) {
            if (currentPage * batchSize < ufcities.length) {
                loadBatch(currentPage);
            }
        }
    });
});

这种方法会把加载压力分散开，页面初始加载速度极快，后续滚动时再逐步加载内容，完全不会出现卡顿。

额外小技巧 #

如果你的列表项有jQuery动画效果（比如fadeIn），记得在批量插入时暂时关闭动画，否则会严重拖慢性能。插入完成后再根据需要开启即可。

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