Skip to main content

Performance of Web HMI

This section provides information that can be used as a reference when using the Web browser engine for embedded HMI applications.

Most of them are not specific to this project nor to embedded HMI, but are rather general performance tips of web development. If you have knowledge and experience in web performance tuning (for low performance mobile devices, etc., not for high performance PCs), you may be able implement web content suitable for embedded platforms.

JavaScript Performance​

TODO: about JS perfs (vs native) general info.

GPU Accelerations​

Modern browsers utilize GPUs in various situations to achieve higher speeds. Web apps that take advantage of the GPU will not be slower than native apps.

  • Scrolls, Pinch Zoom
  • CSS Animations/Transitions
  • Video Decode
  • 2D Graphics API (Canvas)
  • 3D Graphics API (WebGL)
  • GPU API (WebGPU)
  • and so on...
note

Depending on the operating system, hardware, driver, browser preferences etc., some processing may fall back to CPU.

Even if the browser is capable of high-speed processing on the GPU, depending on your JavaScript code, it may be unnecessarily processed on the CPU, or it may seem slow because the JavaScript task blocks screen rendering.

Profiling​

If you feel that the content is slow, be sure to check the profiling results on the actual device. Processors in embedded environments are typically tens of times slower than PCs and have different performance characteristics and bottlenecks than PCs.

Depending on the content, the cause of the slowdown may be DOM operations in deep loops, unnecessary repetitive processing, network processing, asynchronous processing order problems, etc., and the necessary code modifications will differ for each.

In many cases, content that is bottlenecked by the network on a PC is often bottlenecked by data processing by JavaScript on the embedded device.

You should always use profiler before optimizing the code. Please see Firefox Profiler documents for more details:

https://profiler.firefox.com/

caution

Embedding Web developers must be a friend of Profiler!

JavaScript Frameworks​

Check JS Framework benchmark result.

See also Comparison of JS-based web frameworks

jQuery Overhead​

While jQuery was originally designed with a lot of effort to absorb browser incompatibilities, and can be very useful when you don't want to code for browsers that lack web standards support, such as old IE, it is rarely useful for web development in HTML5 and later modern browsers.

Especially in an embedded environment, the target browsers are known in advance, and there is no advantage to use jQuery for compatibilities reason.

DOM (HTML) manipulation is tens of percent to several times slower with jQuery than with the browser-native API, and while this overhead is acceptable only if the HTML rewriting process is extremely small, using jQuery for embedded HMI development has more disadvantages than advantages. Note that the disadvantages of using jQuery in embedded HMI development are often greater than the advantages.

danger

jQuery is purely overhead!

Check points​

Here are check point list:

  • use proper frameworks
    • svelte.js or similar framework is faster than react
    • Vue/React is a little faster than Angular
    • avoid ancient frameworks
    • never jQuery
  • how to use framework features
    • SSG (with Hydration) or SSR mode, not CSR
    • avoid heavy methods within (nested) loop
  • split long JavaScript task
  • use GPU acceleration
  • PRPL
    • Preload the most important resources
    • Render the initial route as soon as possible
    • Pre-cache remaining assets
    • Lazy load other routes and non-critical assets.
  • HTTP protocol version and server settings
    • avoid TCP/HTTP HoLB
  • Image handling
    • properly size images
    • optimize images
    • use better compression format
    • explicit width/height
  • and more...

Professional Support​

If you need professional support for your Web content performance, please contact us or talk to a web development company with experience in performance tuning (at least for slow mobile devices, not desktops).