I am developing a graphical flow chart kind of application where I link together “modules” which the user can drag around and what not. I’m using libraries like draw2d (which uses raphael.js, for example) that use SVG and HTML5 canvas to do the graphics.
However, I’m not even approaching what I would consider “stress” levels just yet and it’s running ridiculously slow in my browser. When I drag the modules (blue boxes), it feels like 10 frames per second, or even less. Screenshot to show what I have on screen:
On my laptop I have a System Monitor provided by AMD showing what percentage of my CPU cores and GPU is being used. When I drag the objects, my CPU cores (all 4 of ’em) get used up to the max, but the GPU doesn’t get used at all.
Are graphics-based web frameworks not using the GPU? Given what my application is trying to do and the poor state it’s currently in performance-wise, is it likely that I’ll have to find a new graphics library that uses openGL or something? Does such a thing exist?
It really depends on the library and used browser. If you use chrome the first step is to go to chrome://gpu and see what features are enabled for GPU acceleration. Then it purely depends on 2D framework library if it is using standard canvas drawing functions or implements own software rendering functionality.