performance - Ipad 上的 SVG 性能不佳

Question

我正在使用 D3.js 渲染 3000 个 SVG 圆圈。 D3.js 效果很好，但您需要使用鼠标移动它们。在我的 Safari 桌面上效果很好，但是，当我在 Ipad 上渲染它们时……嗯，从 15 FPS 下降到 2/1 FPS。

如果我只渲染 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 圆圈。

谢谢!

Answer 1

尝试 CSS3 转换。您可以使用 CSS3 转换来转换点，而不是更改 SVG 位置属性。这在 iPad 上可能会更流畅。

如果这还不够好:您可以尝试使用 HTML5 Canvas 而不是 SVG 以获得更好的渲染性能。 D3 支持 Canvas 进行渲染。