使用Web Worker仍卡顿，为<select>填充数千条数据如何解决页面冻结？

为页面的<select>元素填充数千条服务器返回的数据时，原本为避免页面冻结，使用Web Worker在后台线程获取数据，但页面依然出现冻结情况。相关代码如下：

相关代码 #

homepage/index.php #

var form = document.createElement("form");
form.id = "survey-form";
var elements = [
       {
           type: "select",
           label: "Send to employee",
           id: "empno",
           options: [] // Options will be populated dynamically
       },
];
elements.forEach(function (element) {
       var wrapper;
       var label = document.createElement("label");
       label.className = "form-label";
       label.textContent = element.label;
       if (element.type === "select") {
           input = document.createElement("select");
           input.id = element.id;
           input.className = "user-input";

           form.appendChild(label);
           form.appendChild(input);
           fetchOptionsUsingWorker(input, element.options);

           $(document).ready(function() {
               $('#' + element.id).select2();
           });
       }
});

function fetchOptionsUsingWorker(selectElement) {
    var worker = new Worker('optionsWorker.js');

    worker.addEventListener('message', function(e) {
        if (e.data.type === 'optionsData') {
            var optionsData = e.data.data;
            populateSelectWithOptions(selectElement, optionsData);
        } else if (e.data.type === 'error') {
            console.error('Error fetching options data:', e.data.message);
        }
    });

    worker.postMessage('fetchOptions');
}

function populateSelectWithOptions(selectElement, optionsData) {
    selectElement.innerHTML = '';
    optionsData.forEach(function (option) {
        var optionElement = document.createElement("option");
        optionElement.value = option;
        optionElement.text = option;
        selectElement.appendChild(optionElement);
     });
}

homepage/optionsWorker.js #

function fetchOptionsFromServer() {
    return new Promise((resolve, reject) => {
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "../backend.php", true);
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.onload = function () {
            if (xhr.status === 200) {
                var data;
                if (xhr.responseText === "No data found") {
                    data = ["No data found"];
                } else {
                    data = JSON.parse(xhr.responseText);
                }
                resolve(data);
            } else {
                reject(xhr.statusText);
            }
        };
        var data = "input=get_options";
        xhr.send(data);
    });
}

self.addEventListener('message', async function(e) {
    if (e.data === 'fetchOptions') {
        try {
            const optionsData = await fetchOptionsFromServer();
            self.postMessage({ type: 'optionsData', data: optionsData });
        } catch (error) {
            self.postMessage({ type: 'error', message: error });
        }
    }
});

问题根源 #

1. 主线程DOM操作效率极低：Web Worker确实把数据请求放到了后台，但populateSelectWithOptions是在主线程执行的——通过forEach循环逐个创建<option>并调用appendChild，每一次操作都会触发浏览器重排/重绘，数千次操作直接阻塞主线程，导致页面冻结。
2. Select2初始化时机错误：在<select>刚创建就调用$(document).ready()初始化Select2，此时选项还未加载完成。Select2会先扫描空选项初始化，后续选项加载后又要重新渲染，双重DOM操作进一步加重主线程负担。

解决方法 #

1. 优化DOM批量插入 #

避免逐个添加选项，改用批量插入减少重排次数：

方案一：拼接HTML字符串一次性插入

function populateSelectWithOptions(selectElement, optionsData) {
    // 批量生成option的HTML字符串
    const optionsHtml = optionsData.map(option => 
        `<option value="${option}">${option}</option>`
    ).join('');
    // 一次性插入DOM，仅触发一次重排
    selectElement.innerHTML = optionsHtml;
}

注意：如果选项内容包含特殊字符（如<、>），需用DOMPurify处理HTML字符串避免XSS风险。

方案二：使用文档片段批量添加

function populateSelectWithOptions(selectElement, optionsData) {
    const fragment = document.createDocumentFragment();
    optionsData.forEach(option => {
        const optionElement = document.createElement("option");
        optionElement.value = option;
        optionElement.textContent = option;
        fragment.appendChild(optionElement);
    });
    // 文档片段不会触发即时重排，插入后仅一次重排
    selectElement.innerHTML = '';
    selectElement.appendChild(fragment);
}

2. 延迟Select2初始化时机 #

等选项完全加载并插入DOM后再初始化Select2，避免重复渲染：
修改fetchOptionsUsingWorker中的消息监听逻辑：

worker.addEventListener('message', function(e) {
    if (e.data.type === 'optionsData') {
        var optionsData = e.data.data;
        populateSelectWithOptions(selectElement, optionsData);
        // 选项加载完成后再初始化Select2
        $('#' + selectElement.id).select2();
    } else if (e.data.type === 'error') {
        console.error('Error fetching options data:', e.data.message);
    }
});

同时删除elements.forEach里的$(document).ready()初始化代码，避免重复执行。

3. 可选：超大量数据优化（万级以上） #

如果选项数量超过一万条，即使批量插入也可能有性能问题，可采用以下方案：

• 后端实现分页接口，前端做滚动加载
• 使用Select2的ajax配置，让组件自己处理远程搜索和分页，避免一次性加载所有数据
• 改用虚拟滚动组件，仅渲染可视区域内的选项

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