Improve performance of Hybrid apps to achieve almost native performance

Native performance

In this post we are going to cover how to achieve almost native performance with APIs that the web provides, to make fast hybrid apps. Every day the browsers evolves and improve at a very accelerated speed, so in my personal opinion we are going to get to a point were the performance of a web page running on a browser and the performance of a native applications is going to be seamless, if we are not there already.

What is a hybrid app

Hybrid applications are, websites packaged into a native wrapper (WebView). Basically, a hybrid app is a web app built using HTML5 and JavaScript, wrapped in a native container

Improving for the web

The goal of this article is to expose how to improve the HTML, CSS and javascript performance for mobile hybrid applications, is in deed to show some of the techniques used by the hybrid frameworks to boost the performance on mobile applications

Rendering Performance

To write performant sites and apps you need to understand how HTML, JavaScript and CSS is handled by the browser, and ensure that the code you write (and the other 3rd party code you include) runs as efficiently as possible. Read more here

requestAnimationFrame()

How it works:

• When you call requestAnimationFrame, it request that your function be called before next paint
• The function is called ~60 times/sec or throttled in the background
• Animations optimized into single reflow/repaint
• Smooth animations without jank

Example of requestAnimationFrame()

function animate() { 
  requestAnimationFrame(animate) 
  myElement.style.transform = `translateX(${x}px)`; 
  X++; 
} 
requestAnimationFrame(animate)

requestAnimationFrame() Browser support

Reference: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

Avoiding Layout Thrashing with DOM batching

What is layout thrashing:

Layout Thrashing is where a web browser has to reflow or repaint a web page many times before the page is ‘loaded’. In the days before JavaScript’s prevalence, websites were typically reflowed and painted just once, but these days it is increasingly common for JavaScript to run on page load which can cause modifications to the DOM and therefore extra reflows or repaints. Depending on the number of reflows and the complexity of the web page, there is potential to cause significant delay when loading the page, especially on lower powered devices such as mobile phones or tablets.

Reference: https://blog.idrsolutions.com/2014/08/beware-javascript-layout-thrashing /

This can be avoided by batching the writes and reads with fastdom (it relies on requestAnimationFrame())

How it works?

FastDom works as a regulatory layer between your app/library and the DOM. By batching DOM access we avoid unnecessary document reflows and dramatically speed up layout performance.

More info here

Reference: https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing

Efficient style modifications

Skip layout and paint by only modifying composite-only

properties.

Modern browsers can animate four things really cheaply: position , scale , rotation and opacity . If you animate anything else, it’s at your own risk, and the chances are you’re not going to hit a silky smooth 60fps.

Reference: https://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

Passive Event Listeners

Indicate touch events won’t block scrolling, Run event listener without holding up scrolling, provides smooth touch and scroll animations and gestures

Example:

Passive Event Listeners browser availability

Reference: https://developers.google.com/web/updates/2016/06/passive-event-listeners

will-change

Indicates to the browser certain properties will change

frequently (ex: scrolling, animations, gestures, etc.)

Browser promotes element to it’s own layer, smoother animations with less CPU usage (though

possibly higher RAM usage).

Note: Use with caution: If everything is optimized, nothing is

will-change example:

will-change: auto;
will-change: scroll-possition;
will-change: contents;
will-change: transform;
will-change: opacity;
will-change: left, top;

Fallback:

transform: translateX(0)

will-change – availability

Reference: https://developer.mozilla.org/en/docs/Web/CSS/will-change

CSS containment

The new CSS Containment property lets developers limit the scope of the browser’s styles, layout and paint work. learn more here

In other words, it indicate isolated elements, browser optimizes, limiting recalculation paint/layout/size/style to sub-tree, deriving in fast component updates

Example of CSS containment

This layout is 1425x faster!

CSS containment browser availability

Reference: https://developers.google.com/web/updates/2016/06/css-containment

Conclusions

We highly recommend you to use a framework, frameworks do this stuff for you, for example in ionic all the components are optimized with these performance improvements.

In other words if you want to create a hybrid a mobile application try to avoid direct DOM manipulation, always use a framework, with that you’ll be more close to achieve native performance .