Factors that contribute to the modern web browser performance

Browser being one of the most important application on any device, it is important to have smooth browsing experience. There are lot of factors that come into picture while differentiating one browser from the other and browser performance is very important here. Below I am discussing some browser performance measures and what really affects them apart from browser implementation. Before directly jumping into the browser source code and trying to change it for making your browser perform better, all other external factors that contribute to the browser performance should also be considered.

What to measure:
Making sure browser is performing well would be to make sure at least below things are performing well on your targeted device(Phone, Tablet, WebOS, Desktop, etc).

The first and most important performance measure for the browser is page load performance. Your browser needs to be as fast as possible here as there are high chances of users cancelling page loads if browser is taking long to display a page. There are different techniques implemented in different browsers to make sure page is displayed quickly on screen. It includes caching at both network and browser level, partial rendering of the pages – displaying pages without css/scripts first and then displaying it again once all the external resources are ready, parallel loading/parsing/decoding of resources, etc. Different top web sites needs to be tested for this as different websites could expose different browser code paths.

Second important performance measure is browser scrolling and browser zoom. To get smooth and enjoyable browser experience, 60fps scrolling and zoom performances should be the aim for browsers for all the cases as almost all the modern displays are having 60Hz refresh rates these days. Again, browser code is not only responsible for making this happen and we will discuss it later in this article.

Third, things like opening/closing/switching tabs, virtual keyboard launches, etc are also very important for excellent browsing experience. For example, it is very frustrating to wait for virtual keyboard to pop-up when you touch input fields or tab switching taking lot of time when you try to view different pages. Modern browsers now try to cache rendered pages completely for tab switching performance.

Finally, it is the browser power consumption. The power consumption may not matter much on desktops but it is one of the most important performance measure on handheld devices like phone, tablets and even notebooks like chrome book. Your browser might be performing well for page loading, scrolling, etc but it is not good if it is consuming lot of power as this can cause your device battery to drain quickly.

Factors that affect browser performance:
The browser is not the only component responsible for all performance measure discussed above and it also depends on many system level components and other factors that we are discussing below. If you are working on improving browser performance you need to considers all these factors before you actually jump into the browser code and try to change it for improving performance.

Web Contents: Web browsers performance depends a lot on web contents as well. When some webpage is not doing well, there is a possibility that it is coded badly. And this needs to be checked first. There are many best practices given in articles mentioned here : http://www.html5rocks.com/en/features/performance and following those helps in making webpages better. Look at how page styling, events handling, triggering layout/paints affects webpage scrolling – http://www.html5rocks.com/en/tutorials/speed/scrolling/

Actual network speed: Many times it is a actual network problem when you observe poor page loading performances. Slow networks and varying network speeds give you different results every time. so you need to make sure that you have a same constant network speed when you actually test page loads and also compare it with some other device page loads.

Network stack implementation: It is possible that you are getting proper response from network and could be a bug in your network stack that is making performance poor. Caching at network stack also affects page load performances.

Caching: There are different kind of cache mechanisms like caching at network stack level, browser level, caching completely rendered pages and all these affects your page loading and tab navigation.

Multi-threading / Multi-processing: How may threads you browser is running and how many processes it is distributed on also matters. So it needs to be considered when you are measuring/comparing browser performance. Less number of threads could mean it may not take advantage of large number of CPU cores. And high number of threads/processes is good on powerful hardware having large number of CPU cores but could mean there is more thread hopping and it is hard for browser to perform consistently on less powerful hardware.

CPU governor and frequency scaling: CPU governor policies also affects all the performance measures mentioned above. If you are observing low browser performance, you need to make sure all the CPU cores are getting load balanced properly and also each CPU core frequency is scaled accordingly. Normally page load, scrolling, event handling are high processing use cases and so you should find most of the CPU cores getting utilized here and also scaled to proper frequencies if required. But remember there will be more power consumption when cores are unnecessarily running at max clocks and sometimes there could be low browser performance when cores are not turned ON properly and not scaled to required higher frequencies. So, system bugs that schedules tasks incorrectly on CPU cores or incorrect frequency scaling can cause poor browser performance. If you are comparing browser performance on two devices, you need to also consider how governor is behaving.

GPU performance: With modern browsers, most of the browser work is now happening on GPU, so GPU performance also affects how your browser is performing. Generally you achieve power saving when more work is moved to GPU, so what rasterization / drawing techniques used inside browser for your device also affects browser performance and power consumption. If you are measuring browser performance or comparing it against other browser or other device, you also need to consider what techniques have been enabled/disabled. Here are few to mention:
        – Hardware accelerated compositing: Final rendering of the browser’s tab area is handled directly by the GPU. Here is the chrome article about this – http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome
        – Software rasterization: CPU rasterizing contents into software bitmaps first and then transferring them to GPU memory as textures. Data transfer mechanism used to transfer bitmaps from CPU to GPU also affects your browser performance. For example, using EGL Images for texture uploads could be performing better than using conventional TextImage2D and TexSubImage2D for texture uploads. And directly rasterizing into a GPU memory avoids these transfer and could perform better than rasterizing in CPU memory and then transferring to GPU. There is also a asynchronous texture upload mechanism and with this you don’t need to block on texture uploads.
        – Hardware accelerated rasterization: With this, rasterization is handled by GPU and as more work is now shifted to GPU with this, it will generally be consuming less battery as compared to software rasterization on mobile devices. Here is related chrome doc : https://docs.google.com/document/d/1Vi1WNJmAneu1IrVygX7Zd1fV7S_2wzWuGTcgGmZVRyE/edit#heading=h.7gtvwy48curk
So, make sure you consider all these techniques and check which ones are getting used for your target browser when you measure/compare the performance.

Framework libraries: Many times you will find browser getting blocked on certain operations because of some underlying library taking long time. Few slower function calls can make browser performance really worse on your device.

You will need good profiling tools to check all this. On android, you can get most of the things using systrace.

  1. Very useful info, thanks Arun.

Leave a Comment