摘要 Abstract
延迟问题是Chrome、Safari和Firefox等网页渲染引擎的主要关注点。这些引擎通过采用增量布局算法,在用户交互时重绘页面以减少延迟。在该算法中,帧间发生变化的元素被标记为脏节点;只需处理这些脏节点即可绘制下一帧,从而大幅降低延迟。然而,标准的增量布局算法必须遍历整个页面查找脏节点,过程中会访问大量辅助节点。这些辅助节点会导致缓存缺失和停顿周期增加,并占用了相当大的布局延迟比例。我们提出了一种新的、更快的增量布局算法——无脊布局。无脊布局采用计算成本更高的优先队列算法,避免了对辅助节点的访问,从而减少了缓存流量和停顿。这在悬停、输入或动画等最延迟敏感的交互中带来了显著加速。此外,由于进行了许多底层优化,我们使无脊布局在增量布局工作负载的整个频谱中具有竞争力。结果,在2216个基准测试中,无脊布局在78.2%的基准测试中更快,平均加速比为3.23倍,特别是在悬停、输入和动画等最延迟敏感的交互中表现尤为突出。
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; only the dirty elements need be processed to draw the next frame, dramatically reducing latency. However, the standard incremental layout algorithm must search the page for dirty elements, accessing a number of 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 more computationally demanding priority queue algorithm to avoid the need to access auxiliary nodes and thus reduces cache traffic and stalls. This leads to dramatic speedups on the most latency-critical interactions such as hovering, typing, or animations. Moreover, thanks to numerous low-level optimizations, we are able to make Spineless Traversal competitive across the whole spectrum of incremental layout workloads. As a result, across 2216 benchmarks, Spineless Traversal is faster on 78.2% of the benchmark, with a mean speedup of 3.23x concentrated in the most latency-critical interactions such as hovering, typing, and animations.