javascript - 徒手绘制时 iOS SVG 滞后

Question

我正在为我们的用户编写一个简单的绘图“东西”。它使用 SVG。所有用户都拥有 iPad，无论是 4s 还是 Air 2s。我正在测试 2(第 2 代，不是 Air 2)。所有 iPad 都运行 iOS 9.2 并使用 Safari。

在 SVG 元素上徒手绘制时，存在明显的延迟。在 2 代上它“几乎可以忍受”，在 4 代上它“非常痛苦”。不确定 Air 2s，但如果它像 4s 那样扩展，我会说它是“现在杀了我”。有趣的是更好的硬件如何滞后更多，但我想这可能与提高的分辨率有关，但仍然......

我可以做些什么来提高性能吗？在绘制现成的形状(矩形、线(路径)和椭圆)时，延迟也很明显，但这是我们可以忍受的。

这是我用来为徒手画绑定(bind)事件处理程序(使用 jQuery)的代码。

Floor.bindFreeHand = function (e) {
    e.preventDefault();
    var sPB, d, p1, segments;
    Floor._jElement.off(EventTypes.pointerDown + " " + EventTypes.pointerUp).on(EventTypes.pointerDown, function (e) {
        var pI1 = PointerInfo.parse(e);
        sPB = new SvgPathsBuilder();
        d = sPB.moveTo(pI1.x, pI1.y).d();
        p1 = Svg.path(d).attr({
            "fill": "none",
            "stroke": Floor._color,
            "stroke-linecap": "round",
            "stroke-linejoin": "round",
            "stroke-opacity": Floor._opacity,
            "stroke-width": Floor._width
        });
        segments = p1.element.pathSegList;
        Floor._sElement.add(p1);
        Floor._jElement.on(EventTypes.pointerMove, function (e) {
            e.preventDefault();
            e.stopPropagation();
            segments.appendItem(p1.element.createSVGPathSegLinetoAbs(e.offsetX, e.offsetY));
            //var pI2 = PointerInfo.parse(e);
            //d = sPB.lineTo(pI2.x, pI2.y).d();
            //p1.attr("d", d);
        });
    }).on(EventTypes.pointerUp, function (e) {
        Floor._jElement.off(EventTypes.pointerMove);
    });
};

这里是 PointerInfo 和 EventTypes 对象:

var PointerInfo = (function () {
    function PointerInfo(x, y) {
        this.x = x;
        this.y = y;
    }
    PointerInfo.parse = function (e) {
        var x = e.offsetX - 2, y = e.offsetY - 1;
        return new PointerInfo(x, y);
    };
    return PointerInfo;
})();

var EventTypes = (function () {
    function EventTypes() {
    }
    EventTypes.touch = EventTypes.touch || ("ontouchstart" in window);
    EventTypes.pointerDown = EventTypes.touch ? "touchstart" : "mousedown";
    EventTypes.pointerMove = EventTypes.touch ? "touchmove" : "mousemove";
    EventTypes.pointerUp = EventTypes.touch ? "touchend" : "mouseup";
    EventTypes.pointerLeave = EventTypes.touch ? "touchleave" : "mouseout";
    return EventTypes;
})();

所有这些都是从 TypeScript 编译下来的。

Answer 1

在花了两天时间并禁用页面上的其他所有内容和加载的所有其他脚本后，我想通了。事实证明是 CSS 导致了延迟。正在绘制的 SVG 元素具有通过渐变创建的背景图案，看起来像网格。显然，当在 touchmove 上更新路径时，元素的布局已失效，Safari 会强制不断地重新绘制它。

所以，这个故事的寓意是 iOS Safari 中的性能问题并不总是由 JavaScript 造成的。花哨的 CSS 效果也会对此产生影响，尤其是当它们所在的元素不断被操纵时。

更新

在 Chrome 48 中，您无法再设置路径的分段，因为该 API 已被弃用并删除。现在的解决方案是随着指针的移动不断更新d属性。根据我的测试，即使在第二代 iPad 等较旧的设备上，也没有明显的性能损失。