我應該使用變換而不是重繪？

我有幾張圖表，每次使用d3畫筆縮放/平移時都會重繪。我應該使用變換而不是重繪？

但是，當我有大量的渲染元素時，重畫開始有點慢。

我每次移動畫筆時都不會重繪所有元素，而是想知道是否可以轉換（轉換）已繪製的元素，並且只需要在需要更新數據時重繪。

我認爲這會增加我的可視化性能很多，每當平移到右/左，不是嗎？

任何見解？

來源

2013-09-24 dmartinez

是的，這是可能的，是的，它可能會提高性能。要看它實際上做的唯一方法是嘗試它。 –

肯定@LarsKotthoff，但我必須一次處理大量不同的元素，並且首先進行原型設計不會那麼快。順便說一句，我做了只有1個圖表的原型，它的速度和重繪速度一樣快（我真正的問題是同時有很多元素）。 – dmartinez

一般來說，觸摸DOM越少，表現就越好。詳細信息是瀏覽器和平臺特定的，但通常這是性能的啄食順序在很高的級別（從最昂貴到最少的順序）：

創建和刪除DOM元素。
修改現有DOM元素的屬性。在內存中的JavaScript（即，根本不涉及DOM ...例如數組迭代）。

因此，如果您只需通過transform屬性修改現有元素的目標子集就可以得到所需的結果，那麼我猜測您會變得更好。

當然，如果沒有看到實際的代碼和用例，就不可能確定地說出任何事情。

來源

2013-09-24 17:34:52

謝謝@Scott Cameron。我非常感謝你的回答，但我想知道D3更具體的答案，一旦使用了brush元素，我將需要處理元素屬性中的resize（縮放）和move（pann）。我現在正在執行一些測試和調試，希望稍後能更好地瞭解它。非常感謝您的寶貴時間。 – dmartinez

DOM操作幾乎總是性能的限制因素。根據我的經驗，D3本身顯示爲重要的，因爲它屬於「內存中的JavaScript」類別。當然，有些方法可以使用D3來產生更多或更少的DOM操作。如果您在Chrome中運行CPU分析工具，它將幫助您找出熱點。 IE9實際上擁有出色的性能分析器，有時甚至比Chrome顯示出更好的輸出（可能是由於內部的JS優化較少）。 –

我不確定我是否同意不觸摸DOM會提高性能。特別是如果你有很多元素，簡單地渲染它們可能就是瓶頸。 –

我應該使用變換而不是重繪？

回答

相關問題