Maintained Display Lists for improved web page performance

Continuing Firefox Quantum’ s investment decision in a high-performance engine, the Firefox 61 discharge will boost responsiveness of modern interfaces with an optimization that people call Retained Screen Lists . Similar to Quantum’ t Stylo and WebRender features, programmers don’ t need to change anything at all on their sites to reap the advantages of these improvements.

We wrote about this feature around the Mozilla Graphics Team blog in January, when it was first implemented within Nightly . Now it’ s i9000 ready to ship with Firefox sixty one. If you’ re already acquainted with retained display lists and how this particular feature optimizes painting performance, you might like to skip ahead to read about the results of our own efforts and the future work we’ re planning.

Dealing with the display list

Display list building is the procedure in which we collect the group of high-level items to display on display (borders, backgrounds, text and much more), and then sort the list according to CSS painting rules into the correct back-to-front order. It’ s at this point that individuals figure out which parts of the web page are already visible on screen.

Currently, whenever we want to revise what’ s on the screen, all of us build a full new display checklist from scratch and then we use it in order to paint everything on the screen. This really is great for simplicity: we don’ capital t have to worry about figuring out which bits transformed or went away. Unfortunately, the process may take a really long time. This has always been the performance problem, but as web sites have become more complex and more users get access to higher resolution monitors, the problem continues to be magnified.

The solution would be to retain the display list between paints— we build a new display listing only for the areas of the page that changed considering that we last painted and then merge the new list to the old to get an updated listing. This adds a lot more complexity, considering that we need to figure out which items to get rid of from the old list, and where you can insert new items. The upside is the fact that, in many cases, the new list can be considerably smaller than the full list. This particular creates the opportunity to improve perceived efficiency and save significant amounts of time.

Motivation

Included in the lead up to the release of Opera Quantum, we added new telemetry to Firefox to assist us measure painting performance, which usually therefore enabled us to make a lot more informed decisions as to where to immediate our efforts. One of these measurements described a minimum threshold for a ‘ slow’ paint (16ms), and recorded proportions of time spent in various paint phases when it occurred. We expected screen list building to be significant, yet were still surprised with the outcomes: On average, display list building has been consuming more than 40% of the complete paint time, for work which was often almost identical to the earlier frame. We’ d long been going to overhaul how we built and handled display lists, but with this brand new data we decided to make it a main concern for our Painting team.

Results

Once we acquired everything working, the next step was to find out how much of an effect we’ g made on performance! We had the particular feature enabled for the first half the Beta 60 cycle, plus compared the results with and without this enabled.

The first and many significant change: The median period of time spent painting (the full pipeline, not just display list building) fallen by more than 33%!

As you can see in the graph, the particular median time spent painting is about 3ms when retained display listings are enabled. Once the feature has been disabled on April 18th, the particular paint time jumped up to four. 5ms. That frees up plenty of extra time for the browser to spend upon running JavaScript, doing layout, plus responding to input events.

Another important improvement is in the regularity at which slow paints occurred. Along with retained display lists disabled, all of us miss the 16ms deadline close to 7. 8% of the time. With it allowed, this drops to 4. 7%, an almost 40% reduction in frequency. You observe that we’ re not just producing fast paints faster, but we’ re also having a significant impact on the particular slow cases.

Long term work

As mentioned over, we aren’ t always in a position to retain the display list. We’ ve spent time working out which areas of the page have changed; whenever our analysis shows that most of the web page has changed, then we still have in order to rebuild the full display list plus time spent on the analysis will be time wasted. Work is continuing to try detect this as early as feasible, but it’ s unlikely that will we’ ll be able to entirely avoid it. We’ re also actively trying to minimize how long the preparation function takes, so that we can make the most of possibilities for a partial update.

Retaining the display list furthermore doesn’ t help for the first time we all paint a webpage when it tons. The first paint always has to build the entire list from scratch, so in the future we’ ll be looking at ways to make that will faster across the board.

Thanks to everyone who has helped allow, including: Miko Mynttinen, Jet Villegas, Timothy Nikkel, Markus Stange, Brian Anderson, Ethan Lin, and Jonathan Watt.

If you liked Maintained Display Lists for improved web page performance by Matt Woodrow Then you'll love Web Design Agency Miami