Smoother animations, Faster apps

Stephen Reeder, Ekioh

 

I am generally pretty disappointed with the performance of the applications on my TV and discussions with friends and colleagues confirm I’m not alone. I started to look around and see if anyone had done some rigorous research on the subject.

One of the most enlightening reports I found was a 2017 study into the impact of application performance on consumer behaviour by App Dynamics. They found a staggering 38% of the 5000 respondents were disappointed with app performance. People’s definitions of poor performance vary, but one of the most noticeable manifestations is slow or jerky animations.

Animations are an important part of delivering a quality experience. They can be used to guide the user around the application and deliver visual hints. Smooth animations also help give an overall feeling of good design and product quality.

Most application developers use some sort of framework to shorten development time and many of these frameworks are based around HTML. Most of these frameworks assume the use of the browser that’s built into the OS, but some flexibility in browser choice often exists.

Part of the challenge of writing a high performance application lies in the platform itself. Almost all modern hardware uses multi-core silicon where a number of processors are combined to deliver increased processing capabilities with minimal power consumption. Whilst traditional HTML browsers, including those built into operating systems like Android and iOS, have some multithreaded capabilities, they are unable to harness the combined processing of multi-core silicon to improve application performance.

Native applications authored for a single core environment, and those developed using a framework that assumes a traditional HTML browser, are unable to reap the benefits of multi-core silicon. This results in much of the platform’s available processing power lying idle. Unfortunately developing software to run efficiently in a multi-core environment is considerably more complicated than writing single-core applications, but there is now a great way to write high performance applications without having to learn new skills.

The Flow browser from Ekioh has been specifically designed for modern, multi-core silicon. Flow is able to combine the processing power of all the cores and the GPU to deliver excellent application performance. Under heavy load, Flow is capable of delivering over twice the frame rate of other browsers meaning smoother animations and more responsive apps. Flow is based upon the same open standards as other HTML browsers meaning that applications and content don’t need re-authoring.

Further details on Ekioh’s Flow browser and its performance results can be found in the Ekioh technical papers Designing a Browser to Benefit from Multi-core Silicon” and  “An Optimal Browser Design for GPU Utilisation”.

More about Flow…

Improving HTML browser layout performance

Ekioh’s Flow browser exploits the benefits of multi-core. HTML layout performance is dramatically improved by using multithreading to distribute page layout across all the processor cores.

 

Layout can account for as much as half of an HTML browser’s overall activity so focusing on this area has a significant performance advantage.

To unlock the performance of multi-core silicon, the layout task needs to be split into multiple, smaller, activities which can be executed in parallel. The speed of a multithreaded solution is limited by the duration of the longest task, so a fine grained architecture where activities are as small as possible is optimal.

The CPU intensive operation of laying text out in paragraphs is particularly suited to parallel execution. On a page of text, nothing in one paragraph affects the word wrapping of the others, just their vertical position. This means that the layout task can process multiple paragraphs simultaneously, which significantly reduces the overall time.

The flexibility of HTML and CSS makes layout more complex than just word wrapping text. Even tasks that may appear simple, such as laying out a table where the widths of the columns are not always known upfront, present added challenges in the multithreaded environment.

Ekioh’s Flow browser delivers significantly improved performance. Solving the problems of multithreaded HTML, Flow cuts layout times by up to 60% on quad core silicon.

Further details on Ekioh’s Flow browser and its performance results can be found in the Ekioh technical paper “Designing a Browser to Benefit from Multi-core Silicon“.

More about Flow…

Better HTML performance with less memory

Browsers can save huge amounts of memory by using graphics techniques from the gaming industry. Using the GPU, Ekioh’s Flow browser delivers smooth high performance animations without the need for memory hungry cached bitmaps.

Using accelerated compositing, Blink and WebKit consume tens of megabytes of cached bitmap memory when performing full screen animations and over one hundred megabytes at 4K resolutions. By grouping parts of the rendered screen into layers and manipulating them independently, high animation frame rates are achievable, but at the expense of memory consumption.

For HD resolutions each layer can be up to 8.3MB in size which increases to 33.2MB at 4K, so it’s easy to see how the consumption figures quickly add up. With memory prices continuing to be significant in overall product costs, it’s time for change – particularly for consumer electronics and embedded systems where cost pressures are most acute.

Taking ideas from the gaming industry, Ekioh’s Flow browser uses GPU rasterisation instead of accelerated compositing to achieve high animation frame rates, without the excessive memory consumption.

Flow’s GPU rasterisation repaints the whole screen for each frame. It may sound counter intuitive that increased performance can be achieved in this way, but GPUs are faster at rendering than CPUs are at working out which parts of the screen need to be updated. Using GPU rasterisation rather than relying upon the manipulation of cached layers has the added benefit that hardware accelerated animations can be more dynamic. This opens up the possibility for richer looking UIs with smoother animations and lower memory consumption.

The key to implementing a highly efficient browser based GPU rasterisation design is to focus solely upon the HTML use case rather than seeking to develop a more generic graphics library that trades performance for flexibility. The Ekioh technical paper ‘An Optimal Browser Design for GPU Utilisation’, contrasts rendering techniques and demonstrates that using a focused approach can more than double browser rendering performance.

Almost all modern multi-core silicon designed for the consumer electronics marketplace includes a GPU. With the double benefits of improved rendering performance and reduced memory consumption, Flow’s GPU rasterisation represents a step change in browser design.

More about Flow…