简体繁体 English

Javascript-大量渲染的对象

[英]Javascript - Large number of rendered objects

原文 2015-01-15 21:32:07 3 2 javascript/ jquery/ html5/ canvas/ svg

I'm building a web app based on javascript/jQuery and php, and I need to render and manage (eg have the user drag/drop, resize, etc) a large number (20,000+) of drawn objects on a web page and am looking for a recommendation in terms of approach/libraries to use, mainly to get an idea of how to do this whilst keeping page performance acceptable. 我正在建立一个基于javascript / jQuery和php的网络应用程序，我需要在网页上渲染和管理（例如，让用户拖放，调整大小等）大量（20,000+）绘制对象，并且我正在寻找要使用的方法/库方面的建议，主要是要了解如何做到这一点，同时保持可接受的页面性能。

The objects are simple geometric shapes (rectangles, circles, squares, etc) that I will need to attach event handlers to and be able to move/re-size. 对象是简单的几何形状（矩形，圆形，正方形等），我需要将事件处理程序附加到该对象上并能够移动/调整大小。 Shape attributes will be based on properties of javascript objects and I'll need to change the shapes based on the javascript object properties and vice versa. 形状属性将基于javascript对象的属性，而我需要根据javascript对象属性来更改形状，反之亦然。

The canvas area is likely to be quite large (not sure if this will affect performance?) although not all objects will be 'visible' on the page, but must be able to scroll within a div (using overflow, etc) around the full canvas. 画布区域可能很大（不确定这是否会影响性能吗？），尽管并非所有对象在页面上都是“可见的”，但必须能够在div内滚动（使用溢出等）帆布。 I have built something for test purposes using jQuery SVGDOM which works well when I have a couple of hundred objects, but the page grinds to a halt when I go over 1000 objects. 我已经使用jQuery SVGDOM构建了一些用于测试目的的东西，当我有数百个对象时，它可以很好地工作，但是当我超过1000个对象时，页面就会停顿下来。

What I like about svgdom is the way it fits nicely with jQuery for referencing the DOM objects (for event handlers, etc), but am willing to (try to) develop more complex code if I need to in order to be able to address the larger number of objects that svgdom doesn't seem happy with from a performance perspective. 我喜欢svgdom的方式是它非常适合jQuery，用于引用DOM对象（用于事件处理程序等），但是如果需要，我愿意（尝试）开发更复杂的代码，以便能够解决从性能的角度来看，大量的svgdom似乎不满意的对象。

Any suggestions for how to do this? 有关如何执行此操作的任何建议？

2 个解决方案

I think you need to look into webGL, which renders using the GPU. 我认为您需要研究使用GPU渲染的webGL。 A good framework for that is three.js. 一个很好的框架是three.js。

Still, to manage your expectations: making 20k objects interactive really a big challenge and might need some smart caching system to fake it. 尽管如此，要满足您的期望：使2万个对象进行交互确实是一个巨大的挑战，可能需要一些智能缓存系统来伪造它。 if you target mobile devices too, I would say your goal is way too ambigious. 如果您也以移动设备为目标，我会说您的目标太含糊了。 I am sometimes already happy if 100 objects run/move smooth. 如果100个对象平滑运行/移动，有时我会很高兴。

I'm taking as the answer to my original question that it is not practical to display/manage the number of objects that I need on a single page whether SVG or directly to the canvas. 我以最初的问题作为答案，即在单个页面上显示或管理我需要的对象数量（无论是SVG还是直接在画布上）都是不切实际的。

So my approach must be to reduce the number of objects displayed at any given time - now I just need to figure out what the best way to do this is... 所以我的方法必须是减少在任何给定时间显示的对象数量-现在我只需要找出实现此目的的最佳方法是...