寻找用于处理复杂渲染布局的手势的先进技术，这可以帮助我更好地处理性能-特别是在手机上。
我正在运行一个具有两个版本的网站，一个版本在webgl中，另一个版本使用SVG。
它们表示连接的图，并且在台式机上运行良好，但是却在移动设备性能方面挣扎（也很大程度上取决于手机）。
我查看了笔记本电脑的Web控制台的性能，其中一种改进方法可能是处理更好的事件。
到目前为止，我处理这样的事件： 为每个元素注册事件（它们可以是数百个），并且在这种情况下，我尝试通过查看类似条件来最小化Animation frame的渲染更新；对于webgl，我还实施了剔除，删除了屏幕上不存在的元素（这很有帮助）。
这是SVG网站的伪代码：
Hammer(element).on('touchStart', function(event){
if (window.scheduledAnimationFrame) return;
window.scheduledAnimationFrame = true;
if ( condition is satisfied ) {
requestAnimationFrame( renderingUpdateFunction );
function renderingUpdateFunction() {
// do smtg
window.scheduledAnimationFrame = false;
}
}
... }，否）
优点是我可以保持代码整洁，并为所有元素重复注册。缺点是，也许有数百个元素，加上父级手机中涉及的其他手势（例如缩放）很费劲-我发现很难准确地调试出可能的罪魁祸首，因为我发现台式机和笔记本电脑的速度差别很大。提示性能层还不错。
您能否详细说明使用替代方法的利弊？ 我认为，只听父级（即父级div和画布），检查鼠标/手指触摸的坐标，并尝试确定哪些元素可能对应于那些坐标（认为两个元素可能接近或部分重叠）？ / p>
作为比较，Maps（google，bing，openstreet ...）应用程序如何处理事件：在地图上存在的每个地标上还是在画布上？
我认为他们为工程问题提供了一些见解，以解决具有许多交互点的对象的性能。