Two and twenty years of browsers OR Jankfree Animation
Why are some web pages faster than others? How are browsers going to change over the next few years? These are questions that web developers should know the answers to, but often don't.
Making a new browser is a risky engineering challenge. Browsers take years to prototype and many more years to productionise. Even then it still might not succeed. While it's easy to make a toy browser that is faster at one thing, a real browser has to be well-rounded, it has to implement dozens of standards, and it has to be better than existing browsers. Due to these difficulties all popular browsers have instead chosen to optimise their late 1990s legacy, rather than starting anew (and to be fair, this has been successful-for the most part).
But one design decision has plagued all browsers: single-threading,
CREDIT: Google Material design.
These animations can assist people to understand the information hierarchy of the web page. In 'Consistent Choreography' [above] the first item appears a fraction of a second before the others – drawing peoples attention to the most important item. Menus slide out rather than abruptly appearing. Toggle buttons transform to indicate their current action of 'Open' or 'Close'. These are all subtle details, and any individual feature is debatable, but together they add up to make for a more coherent and smoother user experience. It can also make people more engaged. Facebook has done A/B tests and found that user engagement is correlated to frames-per-second. The jargon term "Jank" means jerky animations, and conversely 'Jankfree' refers to smooth animation.
Unfortunately, even with a tight millisecond budget there can still be janky animation –in part– due to this nearly 20 year old architecture.
Mozilla's Servo is a new browser written from scratch3. All other existing browsers are written in C++, but Servo is written in a new programming language called Rust which allows for safer multi-threading while also preventing many types of memory security problems. Servo is scheduled for an alpha-quality release this year (2015), but it will be a few more years until it's ready for general public use. Mozilla have some bold words to describe Servo "Our goal is nothing less than building the fastest and most secure browser engine, and we aim to succeed by miles, not inches. We aim for double the performance of current engines, with no crashes." This claim should be taken seriously, and results from their prototype browser are already promising:
CREDIT: A graph of Mozilla's Gecko vs Mozilla's Servo rendering CNN.com (smaller bars = faster) (source)
Google's Blink isn't a new browser, but it began with a significant fork of Webkit – halving the size of its source code within a month. Google withdrew support for Webkit, and that project hasn't recovered4. Blink has been used in Chrome since version 28, and in Android since version 4.4. As Blink is a pre-existing browser it's harder to change, but Google have equally bold goals to bring significant multi-threading into the browser engine, and to reduce animation delays. This work is underway, however significant results are yet to be seen.
It will be some years until these plans come to fruition. In the meantime web developers have to work within the constraints of existing browsers. So what can web developers do?
There are, however, some general lessons that apply to all current browsers:
- Cache DOM selectors, avoid unnecessary reflow, and debounce frequently triggered events.
- Opacity and Transforms are significantly faster than other animation methods because they're typically on a fast path that avoids recalculating the geometry of page objects (more commonly known as reflow).
- CSS (such as box-shadow2) can often be computationally complex and it can even cause jank. A workaround is to turn off complex CSS while scrolling, and then reapply it afterwards.
- Put long-running tasks in web workers (when appropriate).
- Consider using <canvas> (perhaps React Canvas) to render content.
If you want to know more about how to make your web pages and apps fast, contact Catalyst IT.
1. This a generalisation, and of course there are modern techniques like Off-main-thread Compositing (OMTC) that have rearchitected some parts of browsers but the majority remains single-threaded. Multi-threading doesn't mean that things will necessarily be faster, but there certainly are many areas within browsers that could be improved with it. Finally, there are approaches like preemptive multitasking but they've been excluded for clarity.
2. Yes, CSS can actually cause jank too.
NaCL Gaol (Update: article originally said NaCL but this was wrong, it's unclear what they will use but Gaol is relevant).
4. A graph of contributions to the Webkit project via Browser Contributions.pdf