Happy to share the second post from our Front End guru, Dekus Lam. Dekus is the go-to problem solver for Resolute’s ambitious Front End Web Developer team. In this series, he aims to describe what makes optimizing Front End so crucial in today’s increasingly innovative web design world. Here are his thoughts below:
The key parts of optimizing Front-End performance rely on understanding how the browser actually works as a whole. I will briefly go over some very important elements, which most people forget to consider.
Just think of reflow as an inevitable process that every browser must perform as the DOM elements encounter a change in their content or view position and geometries (e.g. height and width). Reflow is blocking. What this means is that you cannot query a DOM element for its style during reflow.
Remember reflow is unavoidable, stick with it, live with it, but minimize it. No matter if you are changing the style property of the element or modifying the class name or class list, you will see reflow. All you can do is to shorten the time each reflow requires by grouping all the style assignments (instead of performing a series of write-then-reflow). That way you can decrease the number of unnecessary reflow and improve performance (less blocking time).
Ask yourself under what circumstances you will likely be using PNG instead of JPG, or vice versa, or maybe a GIF? Should the JPG be progressive or not? Maybe you can use PNG-8 rather than PNG-24 for some images that are less colorful and without a crazy background alpha shadow? Or just hope WebP will be broadly adapted? Choosing the right image format will save you bandwidth and increase rendering time.
We have so many devices with different DPI displays, and we will want to target them and display images with the best resolution. Let’s say you have a retina iPad and you want to display a w by h image. In order to take advantage of the display, you decide to have a media query that will swap that lower resolution image with the higher resolution one (4x the area). Do you realize that the browser will not only spend more time fetching and downloading the image, but also will need to decode and resize the image (in this case, downscaling)? All of these extra overheads are added towards the overall rasterizing and rendering time. But as mobile operating systems are getting better and more efficient, the decompression and rendering time for different image formats is shorter.