Reusing Computations in Web Browsers
Boosting performance by treating the layout tree as a cache.
1Problem: Slow Text Editing
When editing text with contenteditable in web browsers, re-rendering the entire page on every keystroke causes performance issues. These delays significantly degrade user experience, especially with large documents.
2Limitations of Current Solution
While compositing works well for CSS properties like transform and opacity, it fails with layout-inducing changes like width or font-size. This creates noticeable problems in text editor applications.
3Invalidation Concept
The invalidation technique treats the layout tree as a cache, recalculating only changed portions. This prevents unnecessary computations and dramatically improves performance.
4contenteditable Implementation
To implement basic contenteditable, first make elements focusable. Then append characters to the last text node on each keystroke and display a cursor for simple editing experience.
5Performance Issue
Re-rendering the entire page on each keystroke causes unacceptable delays (up to 1.7s) in large documents. This creates significant barriers for fast typists.
6Incremental Performance Principle
The optimal solution ensures re-rendering time is proportional to change size. This keeps interactions fast even in large, complex web applications.
7Cursor Implementation
A cursor is implemented to improve user experience in editable elements. It visually indicates focus location and where text will be inserted.
8Text Node Management
Managing text nodes in editable elements requires special handling. If no text child exists, create one; otherwise append characters to the last one.
9DrawCursor Implementation
A special DrawCursor function creates the cursor effect by drawing a vertical line at the correct offset position within the element.
10Special Case for Input Elements
Since input elements don't change size while typing and text lacks its own layout object, only paint operations are needed instead of full layout.
11Real-world Complexities
Professional implementations handle cursor movement, Unicode, bidirectional text, and text formatting complexities - all abstracted away by contenteditable.
12Importance of Invalidation
The invalidation technique keeps web applications fast regardless of size, forming a cornerstone of modern web experience. Without it, complex apps would become impractical.
Original article: Web Browser Engineering — Web Tarayıcılarında Hesaplamaların Yeniden Kullanımı