Spineless Traversal for Layout Invalidation

TL;DR

This paper introduces Spineless Traversal, a cache-efficient incremental layout algorithm that significantly reduces latency in web rendering engines by avoiding auxiliary node access, leading to faster interactions.

Contribution

The paper presents Spineless Traversal, a novel incremental layout algorithm that improves cache efficiency and speed over the standard method in web rendering engines.

Findings

Faster than standard approach on 83% of benchmarks

Mean speedup of 1.80x in latency-critical interactions

Reduces cache misses and stalls during layout processing

Abstract

Latency is a major concern for web rendering engines like those in Chrome, Safari, and Firefox. These engines reduce latency by using an incremental layout algorithm to redraw the page when the user interacts with it. In such an algorithm, elements that change frame-to-frame are marked dirty, and only those elements are processed to draw the next frame, dramatically reducing latency. However, the standard incremental layout algorithm must search the page for dirty elements, accessing auxiliary elements in the process. These auxiliary elements add cache misses and stalled cycles, and are responsible for a sizable fraction of all layout latency. We introduce a new, faster incremental layout algorithm called Spineless Traversal. Spineless Traversal uses a cache-friendlier priority queue algorithm that avoids accessing auxiliary nodes and thus reduces cache traffic and stalls. This leads to dramatic speedups on the most latency-critical interactions such as hovering, typing, and animation. Moreover, thanks to numerous low-level optimizations, Spineless Traversal is competitive across the whole spectrum of incremental layout workloads. Spineless Traversal is faster than the standard approach on 83.0% of 2216 benchmarks, with a mean speedup of 1.80x concentrated in the most latency-critical interactions.