Chromium Blog: New APIs to help developers improve scroll performance

Chromium Blog

News and developments from the open source browser project

New APIs to help developers improve scroll performance

Tuesday, May 3, 2016

Speed has been a top priority since Chrome's first release, and it's only gotten more important as developers continue to push the boundaries of interactive web experiences. While there are many performance optimizations Chrome can make without involving the developer, sometimes it's impossible for Chrome to execute as quickly as possible without more information. In Chrome 51 we've introduced support for passive event listeners and Intersection Observer, two emerging web standards that help developers create engaging, efficient experiences.

Touch event listeners are often used on the web for custom scrolling experiences and user engagement analytics. They allow developers to register JavaScript to run when the user touches the screen, and give web apps the opportunity to cancel scrolling altogether. Without knowing in advance if the web app will cancel scrolling, Chrome needs to wait for this JavaScript to finish before scrolling the page itself. Over 80% of touch listeners don't cancel the scroll and unnecessarily delay scrolling by up to several seconds. This results in a large amount of jank where the page doesn't seem anchored to the user's finger.

Chrome 51 allows developers to proactively declare that an event listener won't prevent a scroll. While developers should continue to avoid long-running script to reduce all forms of jank, this change eliminates the need to delay scrolling until the JavaScript completes. To learn more about passive event listeners and how to use them, check out the in-depth EventListenerOptions explainer.

Touch scrolling on cnn.com unmodified (left) and with a planned site update to make touch listeners passive (right).

Another way web platform improvements can help developers reduce delays is take common operations that can't be implemented efficiently in JavaScript and instead build them natively into the browser. One prevalent example is heavy Javascript used to calculate whether an element is visible in the document's viewport or other scrolling container. This is useful for knowing whether a certain element was seen or when to dynamically load more content at the bottom of a page, but can cause annoying jank and unnecessary battery drain if run frequently on user interactions.

Chrome 51 includes support for Intersection Observer, a new API to provide viewability information in a more efficient way. Sites can receive a callback whenever any element intersects a watched element or its children. The site no longer needs to implement this functionality with its own custom JavaScript, and gains the benefits of improved page load and scroll performance. For more information and implementation details, see the Intersection Observer explainer.

Studies have shown that an increase in performance leads to happier, more engaged users. Performance is something for everyone in the web ecosystem to care about--not just browser implementers, but also web authors. As developers of both top-level sites and embedded content make use of these new APIs, the result will be a faster web for everyone.
Posted by Rick Byers and Stefan Zager, Professional Jank Busters