Javascript 提高Android浏览器上的多点触摸性能

我需要在SVG上实现收缩缩放和拖动平移。 此SVG以480*480像素显示，但其实际大小为1920*1920像素

我跟着去，听了

捏

和

拖

：

$(document).hammer().on('pinch', $.throttle(30, setZoom)).
on('drag', $.throttle(30, moveTo));

在这些方法（

setZoom

，

moveTo

）中，我已经在阻止事件的默认操作，如下所示

如您所见，我正在使用限制处理程序

我的缩放和平移实现通过更改SVG的

viewbox

属性来工作。因此，为了显示整个图像，我将上述属性设置为

viewbox=“0 0 1920 1920”

，为了显示特定图像，我将其设置为

viewbox=“100 100 1720 1720”

。 （操作我正在使用的SVG）

最后，SVG具有以下结构：

• 一幅图像（1920*1920像素）
• 20条线，在一个组内，代表一个网格
• 大约50个组，每个组包含一个

  椭圆

  和一个

  text>tspan

  元素

这是SVG代码的一部分：

<image id="SvgjsImage1027" xlink:href="/exams/still_picture/exam-4" width="1920" height="1920" x="0" y="0"></image>
<g id="SvgjsG1002" class="grid">
    <line id="SvgjsLine1003" x1="0" y1="0" x2="1920" y2="0"></line>
    …
</g>
<g id="SvgjsG1026" class="points">
    <g id="s10621674-24" class="threshold">
        <ellipse id="SvgjsEllipse1029" rx="7" ry="7" cx="1062" cy="1674" fill="#2b96d9"></ellipse>
        <text id="SvgjsText1030" style="font-size:40;font-family:Helvetica, Arial, sans-serif;text-anchor:middle;textLength:1;" font-size="40" text-anchor="middle" x="1067.6568542494924" y="1690.5354797464468">
            <tspan id="SvgjsTspan1031" dy="36.93333336" x="1067.6568542494924" style="font-size:40;font-family:Helvetica, Arial, sans-serif;text-anchor:middle;textLength:1;">24</tspan>
        </text>
    </g>
    …
</g>

…
24
…

问题: Android上的性能相当差。我们已经在三星Galaxy Tab 2上试用了Chrome 26（

Chrome 26.0.1410.58

）和Chrome Beta 27（

Chrome 27.0.1453.74

），但感觉很慢。 我们曾尝试在iPad2（iOS 6上的Safari）上打开相同的页面，它工作正常，性能与本机应用相当

我们可以尝试什么来提高Android的性能？我们无法切换到其他浏览器（比如Firefox Mobile），因此解决方案必须位于HTML/Javascript领域

---

---

我们还尝试使用一些库来处理从捏缩到缩放和从拖动到平移（例如），但我们没有得到更好的结果。

我们放弃了将其与web应用程序一起工作的尝试

我们尝试使用HTML而不是SVG，但没有看到很大的性能改进——这让我觉得Javascript中的多点触控事件处理速度很慢（在Android上）

因为我们计划发布一个包装我们的web应用的原生Android应用，所以我们决定使用原生应用处理缩放和平移

---

基本上，当需要缩放和平移功能时，web应用程序通过web套接字发送一些消息，这些消息被本机应用程序截获。此时，它会在另一个web视图的顶部显示另一个web视图，该视图仅加载SVG（我们的web应用程序创建并操作SVG，将其序列化，并通过web套接字将其发送到本机应用程序）。因此，缩放和平移性能非常好，因为它们由web视图处理。最终用户没有注意到幕后发生的事情。

您是否尝试过使用较小的svg或只是移动一个div？我做了类似的事情，而dom/css更新是瓶颈。例如，如果我更新一个dom位置（很昂贵），它是不可用的，但是使用一个硬件加速的css转换，即使在我的蹩脚的仿制品平板电脑上，性能也是可以接受的。Android ICS与SVG的性能令人震惊。如果你需要以Android为目标，那么试着切换到HTML并使用translate3d。

<image id="SvgjsImage1027" xlink:href="/exams/still_picture/exam-4" width="1920" height="1920" x="0" y="0"></image>
<g id="SvgjsG1002" class="grid">
    <line id="SvgjsLine1003" x1="0" y1="0" x2="1920" y2="0"></line>
    …
</g>
<g id="SvgjsG1026" class="points">
    <g id="s10621674-24" class="threshold">
        <ellipse id="SvgjsEllipse1029" rx="7" ry="7" cx="1062" cy="1674" fill="#2b96d9"></ellipse>
        <text id="SvgjsText1030" style="font-size:40;font-family:Helvetica, Arial, sans-serif;text-anchor:middle;textLength:1;" font-size="40" text-anchor="middle" x="1067.6568542494924" y="1690.5354797464468">
            <tspan id="SvgjsTspan1031" dy="36.93333336" x="1067.6568542494924" style="font-size:40;font-family:Helvetica, Arial, sans-serif;text-anchor:middle;textLength:1;">24</tspan>
        </text>
    </g>
    …
</g>