我有一個Handlebars.js模板，需要一堆數據並將其呈現到表中。它第一次運行時，速度相當快，並且沒有任何問題。然而，隨後的任何時間都會花費很長時間（即使是相同的數據！），並且有時會使瀏覽器崩潰。什麼可能是錯的？爲什麼Handlebars.js第一次使用後需要很長時間才能綁定？

在其最通用的形式，模板看起來是這樣的：

{{#each this}} 
<tr> 
    <td>{{data}}</td> 
    ... 
    <td>{{moredata}}</td> 
</tr> 
{{/each}}

而且在JS綁定的邏輯是這樣的（非常普通，再次）：

var table = $('#mytable').empty(); 
$.ajax(url, data).done(function(response) { 
    var template = Handlebars.compile(mytemplate); 
    table.hide(); 
    table.html(template(response.data)); //takes a long time after the 1st time 
    table.show(); 
});

正如我所說的，這是第一次運行，綁定非常快。第二次及以後，它在綁定步驟中持續了很長時間。

UPDATE

所以在試圖解決這個問題，我把{{each}}出來的模板，並在JS一個for環附加的每一行，同時記錄索引。第一次運行，所有東西都可以非常快地綁定，並且索引記錄模糊。第二次和隨後的運行，每行需要大量的時間來綁定，我可以單獨觀察每個索引，因爲行正在綁定......

來源

2014-01-14 Jason

對'template（）'的每次調用'response.data'是否相同 – tkone

@tkone是的。數據調用和響應每次都是一樣的 – Jason

你是否嘗試過隔離這一點，並且在一行中只調用'template（response.data）'幾次而沒有完成DOM操作並且它仍然很慢？ – tkone

在jQuery源代碼中添加了大量工具並逐字記錄了所有內容，我想我已經找到了罪魁禍首：jQuery.append()和jQuery.html()是可怕的緩慢。通過簡單地採用Handlebars.js返回的文字HTML並使用.innerHTML將它放到DOM中，我能夠極大地加快表格到近乎即時的渲染速度（再加上.show()和.hide()以觸發重繪和迴流）。我認爲這個問題必須與Chrome瀏覽器分析器建議的jQuery.clone()或.cloneNode一致，但我不確定首先調用的原因。

無論如何，我會在這裏留下這個機會，它有助於某人。

來源

2014-01-15 00:00:46 Jason

爲什麼Handlebars.js第一次使用後需要很長時間才能綁定？

UPDATE

回答

相關問題