您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計疑難解答

EasyUI Combobox 2000+ 資料卡頓：異步載入與虛擬滾動優化方案

編輯：程式設計疑難解答

現象：綁定 2000+ 選項，搜尋/下拉極度卡頓

EasyUI Combobox 預設一次性渲染所有 <option>，DOM 節點過多導致瀏覽器重排/重繪效能崩潰。

優化策略對比

方案	原理	適用場景	實作難度
異步分頁載入	輸入關鍵字時 AJAX 請求，後端分頁回傳	資料量大、需搜尋	低
虛擬滾動	只渲染可視區域選項，滾動動態替換	資料量極大、不需搜尋	高 (需改寫或插件)
本地過濾 + 延遲渲染	一次載入 JSON，輸入時過濾，分批 append DOM	資料量中等、離線可用	中

推薦：異步遠端搜尋（最省力、效果佳）


$('#cc').combobox({
    url: '/api/search-items',     // 後端介面
    valueField: 'id',
    textField: 'name',
    mode: 'remote',               // 關鍵：啟用遠端模式
    method: 'get',
    loadFilter: function(data) {
        return data.rows;         // 適配後端 {total: 100, rows: [...]}
    }
});

後端只需實作：


// GET /api/search-items?q=關鍵字&page=1&rows=50
// 回傳 { total: 1234, rows: [{id:1, name:'xxx'}, ...] }

進階：本地資料分批渲染（無後端配合時）


var allData = [...]; // 2000+ 筆 JSON
var batchSize = 200;
var rendered = 0;

$('#cc').combobox({
    data: [], // 先空
    onShowPanel: function() {
        if (rendered < allData.length) {
            var batch = allData.slice(rendered, rendered + batchSize);
            $(this).combobox('loadData', $(this).combobox('getData').concat(batch));
            rendered += batchSize;
        }
    },
    filter: function(q, row) {
        return row.name.indexOf(q) >= 0; // 本地過濾
    }
});