I'm building a web app based on javascript/jQuery and php, and I need to render and manage (e.g. 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.
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.
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. 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.
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.
Any suggestions for how to do this?
I think you need to look into webGL, which renders using the GPU. A good framework for that is 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. 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.
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.
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...
Related
I am developing a website with React which has what we called "snippets", basically a modal window displaying some kind of media (audios, videos, slides, text quotations, pdfs). These media have "positions", as a page number, an image number, a playback position, or a scroll position. If she likes the user may store these snippets together with their positions in a "locker" and come back later to whatever is in there. Visually the locker will hold a "thumbnail" of the snippet representing the appearance of the snippet at the time of storing it. My question is how to go about making such a on-the-fly thumbnail. Two approaches come to my mind, however, if you have other ideas I am eager to hear them.
Component approach: Since I already have the component, I could reuse or rather clone it, scale it down, disable it for mouse interaction. Would React.cloneElement() be the way to go?
Advantage: Easy to do.
Disadvantage: Too many duplicates of potentially resource-heavy components may slow down website. Styling may become non-trivial as some embedded media (audio, video) bring their own potentially inaccessible styling with them.
Image generation approach: Since I only need an image, I could take a screenshot of the snippet area, scale it down and use it. Can this be done fully (from generation to usage) on the client side? Is there a good library which does the heavy-work for me?
Advantage: Resource-heavy only during the making of the thumbnail, resource-light in the locker. Accessible for any styling.
Disadvantage: Potentially difficult to do?
After some research I found a solution. Interestingly, it is a mixture of the two approaches I was able to think of. It is possible to access and rasterize the DOM elements which make up the snippets, draw them on a canvas and turn it into an image. The most popular library for this seems to be html2canvas, however, there are a number of others among which rasterizeHTML and html-to-image seem to stand out. Often wrappers for React exist, in the case of html2canvas, for example, use-react-screenshot.
I would like to know what is the maximum data that angular framework can handle. Say, I am displaying a chart using angular and some charting framework like chartjs. I'd like to know up to how many data can the browser display properly, with slowness, or up to when it crashes.
Your question has no simple answer, but I will try to flatten it and give a simple answer, or at least simple things to consider...
Angular (at runtime), like many other frameworks is simply JavaScript,
So let us reduce the question to "Limitation of JavaScript and browsers with regards to data loaded",
JavaScript has no upper limit of memory or storage it can handle,
I've seen JavaScript applications that require more than 15GB of RAM,
and they performed well too.
So assume data size itself is not an issue (unless your application is poorly implemented, leaking memory or just not very efficient, of course).
The main challenge as I see it, is displaying and manipulating the information
without causing unnecessary delay or unresponsiveness.
Displaying the information - let's say you have a list (or a table) containing 1,000,000 possible gifts which you then want to display for the user to select.
Adding the list items to the document one by one is tempting, but will require the browser to repaint after each addition (causing a delay or full unresponsiveness until finished), another way is adding the elements to some DOM element (denoted by N) still being kept in memory, then adding all elements corresponding the list items to the element N (still, just an in memory operation), finally adding N to the document containing the entire list - the will be a much better solution for displaying the large amount of data.
Manipulating the information - displaying is indeed not enough. you would like to move, drag, sort and filter the data being displayed. And as mentioned before, it is a bad idea removing many elements directly from DOM. You should instead remove container from the document's DOM to memory, manipulate the data in it, and then add the container right back to the document. Angular does this kind of magic for you.
(Toggling the 'display:none\block' css attribute of many elements has a similar blocking effect as I recall).
A good practice is implementing an application/page showing only the amount of data that can be processed by a human at a single glance. The rest of it should be considered in the application data-layer, in memory, and should be loaded to display given the appropriate need or request.
To conclude, you can deal with huge amounts of data as long as you provide a mechanism that efficiently filter the displayed information.
I hope it helps...
for further reading:
Slow and fast ways of adding elements to DOM
A question emphasizes the lack of memory limit used by JS
CSS display attribute performance
A good discussion about the reasons for slow DOM
About using HTML5 correctly - old but still true
Once the DOM creation procedure is understood - it much easier to display data without affecting performance / user experience
I'm working with ChemDoodle library for rendering complex chemical structures. Everything works fine, but with big molecules (about 20k atoms) it's working quite slow. I don't have much experience in graphics, but I think it might me because each atom is rendering independently - every time it's rerendering, it has to iterate over array of atoms (it should be buffered).
My idea was to create some structure, that would be calculated on init time and when render, only camera would change it's position. I don't need to manipulate with atoms, only use mouse to rotate/move whole molecule. Is something like this even possible and would it improve performance?
I would appreciate info if it's possible (or some other suggestions), ideally in pure WebGL, without ThreeJS..
A very common question, but almost all comparison I've seen is mainly focused on games with a lot of interaction.
What I'll be working on is a web application that manipulate objects one at a time. For example, the object can be either an image or a text, then it can be replaced, resized, rotated, zoomed in, and deleted.
If the manipulations applied to many objects, I know that canvas will be a better choice but here the manipulation only can be done one at a time to one object only. Each container will at most have about 30 object in it, and I'll be working on multiple containers (maybe around 20 containers) that will be hidden or shown depends on the interaction.
The question is whether to use Canvas or CSS3? What I'm looking is the performance issue and complexity of the app.
I don't have a lot of experience with canvas but as far as I know if you use it together with requestAnimationFrame the performance is pretty similar to CSS animations. You should also consider that CSS animations are very limited when it comes to working with complex animations.
What is the best cross-browser way to get a flat mouse coordinate input data and simple callback for mouse events for my rectangular game area on my web page, even when it has loads of larger and smaller images and text string overlaid haphazard onto it?
And what is the best way to insert or remove a text string or semi-transparent image overlay at an arbitrary location (and Z order, specified relative to existing objects) in a board game rectangle with cross-browser DHTML?
And how can I stop the user selecting part or all of my montage of images (I just want them to interact with it as if it was Flash), and can I stop the right click menus coming up in IE, FF etc?
I want to do this without Flash because I want something that will work both on desktops and on iPhone and potentially other mobile platforms too.
I appreciate there are serious limitations (eg less image scaling capabilities, not vector, no rotation capability) to what I can do if I'm not using Flash but I'm very interested to know what capabilities are available.
Are there perhaps any frameworks available to make it easier than coding from scratch?
Would J/Query be a good match for some of the requirements? What else do I need?
I would recommend Google Web Toolkit. It lets you program in Java, which gives you all the type-safety and nice IDE functionality that Java entails, but compiles to Javascript so that you can just run it in a browser. It also does a ton of optimization and supports tons of features.
jQuery is excellent at doing this. I used jQuery's UI and Ajax functionality to implement the frontend for a game of chess.
I made it a little easier by creating an 8-by-8 table with unique div names for each tile, so Javascript can access them by getting the elements by id. If you can't create something like that, you do have the option of placing elements anywhere on the page (either absolute or relative to a given element). You can also easily change the z-index, including when the use is dragging a piece or when they have dropped it.
As far as disable right click and item selection goes, that's something that I didn't figure out how to do. You might want to take a look at some other Ajax games like Grand Strategy, which are much more polished than my experiment and may have figured out how to do this.
There are two main APIs for working with arbitrary drawing and positioning on the web, Canvas and SVG.
Take a look at Chrome Canvas Experiments and the Raphael Javascript toolkit to see some examples and Javascript abstractions.
The key is element.style.position = 'absolute'. To illustrate just what's possible here's how far I've managed to push javascript (and from scratch at that!):
http://slebetman.110mb.com/tank3.html - RTS in DOM! Click on units/squads then click somewhere else to tell them where to go. You can control both sides.