編寫更快地加載表格

問題

你打算加載一個具備1000個姓名個地址的json數據對象，並用jq以這些數據建立一個表格。在IE7中建立這個表格花費
5~10秒，這還不包括下載時間。
json數據格式以下：

{
    "name":{
        {
            "first":"alice",
            "last":"tom",
            "street":"221B",
            "city":"beijing",
            "state":"VA",
            "zip":"15445"
        },
        //重複1000個姓名
    }
}

js代碼以下

function esc(){
    return text
        .replace('&','&')
        .replace('<','&lt;')
        .repalce('>','&gt;');
}
$(document).ready(function () {
        function fillTable(names) {
            $.each(names,function () {
                $('<tr>')
                    .append($('<td>').addClass('name').html(
                        esc(this.first) + '' + esc(this.last)
                    ))
                    .append($('<td>').addClass('address').html(
                        esc(this.street) + '<br/>' +
                        esc(this.city) + ',' +
                        esc(this.state) + '' + esc(this.zip)    
                    ))
                    .appendTo('#nameTable');
            });
        }
        $getJSON('names/names-1000.json',function (json) {
            fillTable(json.names);
        });
    });

heml代碼

<table id="nameTbale">
</table>

看似沒毛病，但它運行得太慢了。

解決方案：

組合多種優化方案：

• 插入一個<table>或者<tbody>代替多個<tr>元素。
• 使用.innerHTML或.html()代替DOM操做。
• 用a[++i]和.join()構建數組，代替字符串鏈接。
• 使用基本的for循環代替$.each.
• 減小名稱查詢。

優化的結果代碼以下（使用esc()函數）：

$(document).ready(function () {
        function fillTable(names) {
            //用局部函數名稱減小名稱查找
            var e = esc;
            //
            var html = [], h = -1;
            html[++h] = '<table id="nameTable">';
            html[++h] = '<tbody>';
            for (var name, i = -1; name = names[++i];) {
                html[++h] = '<tr><td class="name">';
                html[++h] = e(name.first);
                html[++h] = '';
                html[++h] = e(name.last);
                html[++h] = '<td><td class="address">';
                html[++h] = e(name.street);
                html[++h] = '<br/>';
                html[++h] = e(name.street);
                html[++h] = '';
                html[++h] = e(name.state);
                html[++h] = '';
                html[++h] = e(name.zip);
                html[++h] = '</td></tr>';
            }
            html[++h] = '</tbody>';
            html[++h] = '</table>';
            
            $('#container')[0].innerHTML=html.join('');
        }
        $.getJSON('name/names-1000.json',function (json) {
                fillTable(json.names);
            });
        
    });

html代碼

<div id="container">
</div>

在IE中的一個測試系統上，新代碼僅僅運行0.2秒，而原來的代碼運行了7秒。快34倍！
(數據來源《jQuery Cookbook》)
ps：

雖然簡潔度下降了，可是訪問者又不在意，他們只重視加載速度。