Javascript - 大量渲染的对象

Javascript - Large number of rendered objects

本文关键字：对象 Javascript 更新时间：2023-09-26

我正在构建一个基于 javascript/jQuery 和 php 的 Web 应用程序，我需要在网页上渲染和管理（例如让用户拖放、调整大小等）大量（20,000+）绘制对象，并正在寻找有关使用方法/库的建议，主要是为了了解如何在保持页面性能可接受的同时做到这一点。

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

画布

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

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

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

我认为你需要研究webGL，它使用GPU渲染。一个好的框架是三.js。

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

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

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