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)

Improve this question
7
  • 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. Commented Oct 15, 2017 at 1:07
  • 1
    This seems to be a duplicate... stackoverflow.com/questions/11182478/… Commented Oct 15, 2017 at 1: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. Commented Oct 15, 2017 at 1:24
  • Just mentioning it because you said you needed every drop of efficiency you can get. Commented Oct 15, 2017 at 1: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. Commented Oct 15, 2017 at 1:26
Related questions
23
Performance of moving image on web page via CSS vs HTML5 Canvas
2
isn't canvas supposed to be faster than dom manipulation when we have a lot of animation?
1
For quick Web Animations, Javascript/jQuery or CSS3?
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.