Scheduling timers to improve input responsiveness
Wednesday, August 26, 2015
A good frame rate is important to maintain a fast browsing experience. A few months ago, Chrome added a scheduler, a new under-the-hood feature that places tasks in the idle time between rendering frames to help hit 60 frames per second. Chrome’s frame rate can be reduced by Javascript timers executing at the wrong time, making them a natural next candidate to optimize with the scheduler. The most recent version of Chrome beta reschedules Javascript timers to create a smoother experience when the user is interacting with a page.
Javascript timers enable web developers to write code that checks in on a page periodically with APIs like setTimeout. Advanced developers can use setTimeout to schedule their code at opportune times, but they often don't have enough information to schedule it optimally. A timer’s function is placed into the main execution queue, meaning that if the function is run at the wrong time, it could block time-critical work that shares the queue, like input or rendering. Chrome has signals that important work is incoming, but before M45 they were ignored for timers.
When the user taps the page, they often interact with it again immediately or Chrome needs to re-render part of the screen. The scheduler now delays impending expensive timers after a tap in anticipation of these tasks, allowing many web pages to be scheduled more efficiently. In practice, this can result in up to a 50% input latency improvement on websites that use timers heavily.
Javascript timers enable web developers to write code that checks in on a page periodically with APIs like setTimeout. Advanced developers can use setTimeout to schedule their code at opportune times, but they often don't have enough information to schedule it optimally. A timer’s function is placed into the main execution queue, meaning that if the function is run at the wrong time, it could block time-critical work that shares the queue, like input or rendering. Chrome has signals that important work is incoming, but before M45 they were ignored for timers.
When the user taps the page, they often interact with it again immediately or Chrome needs to re-render part of the screen. The scheduler now delays impending expensive timers after a tap in anticipation of these tasks, allowing many web pages to be scheduled more efficiently. In practice, this can result in up to a 50% input latency improvement on websites that use timers heavily.
The latest version of Chrome scrolling a timer heavy site with no optimizations (left) and delayed timer execution (right).
Scheduling timers intelligently is just one use of the scheduler’s infrastructure. To keep improving, Chrome will continue integrating the scheduler with more rendering engine tasks. Using cycles wisely is one way to keep the web fast for everyone.
Posted by Alex Clarke, Software Engineer and Timer Tamer