Javascript - 大量渲染对象
Javascript - Large number of rendered objects
我正在构建一个基于 javascript/jQuery 和 php 的网络应用程序，我需要呈现和管理（例如让用户 drag/drop、调整大小等）一个大的网页上绘制对象的数量 (20,000+)，我正在寻找 approach/libraries 方面的建议，主要是为了了解如何在保持页面性能可接受的同时做到这一点。
这些对象是简单的几何形状（矩形、圆形、正方形等），我需要将事件处理程序附加到它们并能够 move/re-size。形状属性将基于 javascript 对象的属性，我需要根据 javascript 对象属性更改形状，反之亦然。
canvas 区域可能很大（不确定这是否会影响性能？）虽然并非所有对象都会 'visible' 在页面上，但必须能够在页面内滚动a div（使用溢出等）围绕完整 canvas。我使用 jQuery SVGDOM 构建了一些用于测试目的的东西，当我有几百个对象时效果很好，但是当我超过 1000 个对象时页面就会停止。
我喜欢 svgdom 的地方在于它非常适合 jQuery 引用 DOM 对象（用于事件处理程序等），但我愿意（尝试）开发更复杂的如果我需要代码，以便能够解决 svgdom 从性能角度来看似乎不满意的大量对象。
关于如何做到这一点有什么建议吗？
我认为您需要研究使用 GPU 呈现的 webGL。 three.js.
是一个很好的框架
不过，要满足您的期望：让 20k 对象交互确实是一个巨大的挑战，可能需要一些智能缓存系统来伪造它。如果您也针对移动设备，我会说您的目标太模糊了。如果100个对象run/move顺利，我有时已经很高兴了。
我的原始问题的答案是 display/manage 单个页面上我需要的对象数量是不切实际的，无论是 SVG 还是直接 canvas。
所以我的方法必须是减少在任何给定时间显示的对象数量 - 现在我只需要弄清楚最好的方法是什么...
我正在构建一个基于 javascript/jQuery 和 php 的网络应用程序，我需要呈现和管理（例如让用户 drag/drop、调整大小等）一个大的网页上绘制对象的数量 (20,000+)，我正在寻找 approach/libraries 方面的建议，主要是为了了解如何在保持页面性能可接受的同时做到这一点。
这些对象是简单的几何形状（矩形、圆形、正方形等），我需要将事件处理程序附加到它们并能够 move/re-size。形状属性将基于 javascript 对象的属性，我需要根据 javascript 对象属性更改形状，反之亦然。
canvas 区域可能很大（不确定这是否会影响性能？）虽然并非所有对象都会 'visible' 在页面上，但必须能够在页面内滚动a div（使用溢出等）围绕完整 canvas。我使用 jQuery SVGDOM 构建了一些用于测试目的的东西，当我有几百个对象时效果很好，但是当我超过 1000 个对象时页面就会停止。
我喜欢 svgdom 的地方在于它非常适合 jQuery 引用 DOM 对象（用于事件处理程序等），但我愿意（尝试）开发更复杂的如果我需要代码，以便能够解决 svgdom 从性能角度来看似乎不满意的大量对象。
关于如何做到这一点有什么建议吗？
我认为您需要研究使用 GPU 呈现的 webGL。 three.js.
是一个很好的框架不过，要满足您的期望：让 20k 对象交互确实是一个巨大的挑战，可能需要一些智能缓存系统来伪造它。如果您也针对移动设备，我会说您的目标太模糊了。如果100个对象run/move顺利，我有时已经很高兴了。
我的原始问题的答案是 display/manage 单个页面上我需要的对象数量是不切实际的，无论是 SVG 还是直接 canvas。
所以我的方法必须是减少在任何给定时间显示的对象数量 - 现在我只需要弄清楚最好的方法是什么...