1

I am rebuilding an application in Electron/Node.JS that was originally coded in PHP. I am making it from a server-client style PHP program that has to be run on a server and loaded from a browser, into an all-in-one style app that is self-contained. It is specifically designed for the Raspberry Pi, though it will work on most all other systems as well. It has several elements in it including an area for weather forecasts, an rss news feed from the BBC, and a YouTube iFrame player.

One particular element is a clock that has three moving parts to it: a second hand, a minute hand, and an hour hand. In the original program, this clock was drawn with the HTML Canvas, and used base JavaScript to determine the movement of the hands based on the current time. In the Electron/Node.JS version I am making, I found a much shorter way to make this was with a simple function using a JavaScript Library called Moment.js, and three div elements styled to look like hands and animated using jQuery and CSS.

Here's where my question comes in, what would be less resource intensive on a Raspberry Pi: HTML Canvas or JavaScript/CSS? I know for more graphics heavy applications, like web-based games, that canvas is absolutely superior, but what about just 3 simple elements? The code for the JS/CSS version is certainly shorter, with just a dozen lines of JS code and, excluding general styling for the hands, only a couple of important lines of CSS transformation code. The canvas code is well over 100 lines long. The whole combined code for the JS/CSS version, including general CSS styling, isn't even 80 long, with only a 1/4 of that actually being animation vital code. However, I know that code length doesn't translate to code efficiency.

So with this in mind, which would provide the least use of resources on a Raspberry Pi? I am going to need every drop of efficiency I can get because, though the current versions run fine on my Raspberry Pi 3, I know that older/less-powerful Pi's might start seeing performance loss, especially when streaming YouTube. A tiny gain in efficiency on the Pi 3 might translate into the app actually working on something like an older Pi 2 A.

(If you would like specific code examples, I can post those as well)

hsoJ95
  • 36
  • 6
  • If would say canvas has the better performance, but besides that, if you're really "need every drop of efficiency" you should get rid of jQuery first. – cyr_x Oct 15 '17 at 01:07
  • 1
    This seems to be a duplicate... https://stackoverflow.com/questions/11182478/performance-css3-animations-vs-html5-canvas – Derek Brown Oct 15 '17 at 01:08
  • @cyrix jQuery is used through out a large portion of the app. So while I could remove it, it would mean rewriting a large portion of the HTML and JS code, something I'm not keen on doing. – hsoJ95 Oct 15 '17 at 01:24
  • Just mentioning it because you said you needed every drop of efficiency you can get. – cyr_x Oct 15 '17 at 01:26
  • @DerekBrown While that other topic does deal with a similar idea, mine is specifically for the Raspberry Pi while the other one is focused on the idea in general. Interestingly, it seems the general consensus was that using CSS would cause far less headaches coding-wise than using Canvas, a fact I can indeed confirm, though this doesn't answer the efficiency question, unfortunately. – hsoJ95 Oct 15 '17 at 01:26
  • @cyrix It probably would improve performance, but the amount of code I'd have to change just wouldn't be worth it in my opinion. Question though, is there any data on the performance difference between pure JS and jQuery? – hsoJ95 Oct 15 '17 at 01:28
  • @hsoJ95, have you found out what is more efficient? – Darko Riđić Apr 12 '18 at 13:31

0 Answers0