Javascript - 大量渲染对象答案

【问题标题】：Javascript - Large number of rendered objectsJavascript - 大量渲染对象
【发布时间】：2015-01-19 21:09:24
【问题描述】：

我正在构建一个基于 javascript/jQuery 和 php 的 Web 应用程序，我需要在网页，并正在寻找有关使用方法/库的建议，主要是为了了解如何在保持页面性能可接受的同时做到这一点。

对象是简单的几何形状（矩形、圆形、正方形等），我需要将事件处理程序附加到它们并能够移动/调整大小。形状属性将基于 javascript 对象的属性，我需要根据 javascript 对象属性更改形状，反之亦然。

画布区域可能非常大（不确定这是否会影响性能？）虽然并非所有对象都会在页面上“可见”，但必须能够在 div 内滚动（使用溢出等）围绕整个画布。我使用 jQuery SVGDOM 构建了一些用于测试目的的东西，当我有几百个对象时效果很好，但是当我超过 1000 个对象时页面会停止。

我喜欢 svgdom 的地方在于它非常适合 jQuery 引用 DOM 对象（用于事件处理程序等），但如果我需要，我愿意（尝试）开发更复杂的代码以便能够从性能角度解决 svgdom 似乎不满意的大量对象。

关于如何做到这一点的任何建议？

【问题讨论】：

试图让用户理解和操作 20000 多个项目肯定会让用户和浏览器都不知所措。所以首先，减少物品的数量。请记住，SVG 项目是 DOM 的“智能”成熟成员，因此它们很有用但使用起来很昂贵。画布形状是“愚蠢的”，因此它们很有用，但编程和跟踪的成本很高。是的，一个过大的画布会消耗资源，因为浏览器必须维护整个画布，即使它只是部分可见。无论哪种方式，您都包含了太多的项目！
感谢 cmets markE - 不幸的是，要求是对象数量，所以问题是如何我处理它们。我仍在考虑的另一个选择是继续使用 SVG 并有效地对对象进行分页，我将显示 500，然后用户需要转到下一页查看下一个 500。虽然这并不理想，因为对于对象的关系，如果现实是在单个画布上管理大量对象不切实际，那么我将不得不这样做
尽管有您的要求，但 20K 的并发托管项目对于即使是功能最强大的设备来说也太多了。 200-500 个并发托管项更现实。
干杯@markE。所以听起来最现实的选择是坚持使用 SVG 并将每页的对象数量保持在数百个以下，然后让用户页面通过以显示下一个/上一个对象集并为每个页面重绘画布。

【解决方案1】：

我认为您需要研究使用 GPU 进行渲染的 webGL。一个很好的框架是three.js。

不过，为了管理您的期望：让 20k 对象交互确实是一个巨大的挑战，可能需要一些智能缓存系统来伪造它。如果您也针对移动设备，我会说您的目标太模糊了。如果 100 个物体运行/移动平稳，我有时已经很高兴了。

【讨论】：

谢谢马克，同意这是一个挑战，我现在真的在寻找选择。正如我在上面对 markE 的评论中提到的，我正在考虑的一个选项是拆分画布并在多个页面上运行它，这会增加一组不同的复杂性。回复：移动设备 - 应用程序会有一个移动元素，但焦点会略有不同，所以我不需要显示相同类型的数据

【解决方案2】：

我正在回答我最初的问题，即在单个页面上显示/管理我需要的对象数量是不切实际的，无论是 SVG 还是直接到画布。

所以我的方法必须是减少在任何给定时间显示的对象数量 - 现在我只需要弄清楚最好的方法是什么......

【讨论】：