骨幹模板中的性能問題

情況是我收集了模型，每個模型都有一個名爲'isSelected'的字段。

我需要爲每個模型渲染一個模板的集合。 'isSelected'字段用於設置模板中的複選框。

爲了便於討論，模板如下。

<div class='thumbnail'> 
    <input class='checkbox' type='checkbox' {[ if (isSelected) { ]} checked='checked'{[ } ]} 
</div>

當我需要使複選框全部選中時，我會將集合中每個模型的字段更新爲true。

我使用的代碼

this.collection.each(function(e) { 
    e.set("isSelected", true); 
});

然而，這種方式是非常緩慢的，對於一個集合包含25個項目，這將需要近10秒，以使所有的複選框「檢查」。

我期待它應該至少1秒，如果我使用普通的jQuery。

這種方法有什麼問題嗎？這種問題最好的辦法是什麼？

來源

2012-02-29 easycoder

你能後再現上http://jsfiddle.net/的10秒的延遲代碼的最小量。一個簡單的每個和25個模型的呈現不應該花那麼長時間。 – abraham 2012-02-29 19:34:26

爲什麼不將isSelected設置爲true作爲模型中的默認值？這樣你就不必遍歷集合來設置它們中的每一個爲真。

來源

2012-02-29 18:35:53 sntran

是的，但它只是一個用例。我也想根據一定的條件來控制複選框。 – easycoder 2012-02-29 19:15:57

很難判斷髮布代碼的數量會佔用所有處理時間。我的第一個猜測是渲染函數被多次調用。創建和銷燬模板會導致性能下降。如果您發佈更多代碼，可能很容易發現任何問題區域。

您應該渲染所有可能需要的HTML節點。它們呈現後保存一個jQuery選擇器並使用它來切換選定的。

大部分是不是JS就是瓶頸的時間或骨幹。這就是說JavaScript正在觸發DOM，CSS或重新構成流程，而瀏覽器正在做太多工作。

我正在爲骨幹構建一個PerfView。它可以渲染一個包含1,000,000個模型的集合，並且可以在Chrome上以120FPS的速度滾動。代碼在Github上：https://github.com/puppybits/BackboneJS-PerfView。這裏有很多優化和代碼中的註釋。其中的技術之一肯定可以解決您的問題。

來源

2013-10-22 04:05:21 puppybits

骨幹模板中的性能問題

回答

相關問題