Ipad上的SVG性能不佳

我使用D3.js呈現3000個SVG圈子。 D3.js很好用，但是你需要用鼠標移動它們。在我的Safari桌面上效果很好，但是，當我在Ipad上渲染它們時......從15 FPS下降到2/1 FPS。Ipad上的SVG性能不佳

如果我只是渲染500個圈子......鋼鐵窮人。有什麼方法可以有更好的表現嗎？

我使用這個移動它們：

var diff = this.lastClientX - getD3MousePosition().X; 
      if(isNumber(diff)){ 
       this.XLines.forEach(function(line){ 
        line.attr("x1",parseFloat(line.attr("x1")) - diff); 
        line.attr("x2",parseFloat(line.attr("x2")) - diff); 
       }) 
      } 
      this.lastClientX = getD3MousePosition().X;

DIFF只是一個變量來獲得最後的鼠標移動。
getD3MousePosition（）給你mouseX和mouseY的位置。
this.Xlines對每個SVG圓都有jquery引用，一旦它呈現出來，它就從D£.js中收集。

基本上，我想在Ipad上以流暢的方式移動3000個SVG圓圈。

謝謝！

來源

2012-08-03 todotresde

這裏是一個代碼示例：http://jsfiddle.net/todotresde/nM4B9/ – todotresde 2012-08-06 18:43:39

不知道你是否有過更快的速度，但是有一點我會下降到本地DOM方法line.attr放入行[0] [0] .getAttribute（）以避免D3函數。 – 2013-06-15 03:44:02

嘗試CSS3轉換。您可以使用CSS3轉換來轉換點，而不是更改SVG位置屬性。在iPad上這可能會更順暢。

如果這樣做效果不好：您可以嘗試使用HTML5 Canvas而不是SVG來獲得更好的渲染性能。 D3有Canvas支持渲染。

來源

2013-07-28 21:23:50 stefanw

那，或者只是使用svg'transform'屬性來移動東西。但觸摸3000個屬性仍然不是最佳的，因此如果不需要單獨移動，請嘗試將轉換應用於一組圓。 – 2013-08-23 15:51:10

Ipad上的SVG性能不佳

回答

相關問題