# Reusing Computations in Web Browsers

Boosting performance by treating the layout tree as a cache.

- **Source:** [Web Browser Engineering](https://browser.engineering)
- **Published:** 2023-07-14
- **Topic:** [Software & Engineering](https://brifing.si/c/engineering)
- **Original article:** <https://browser.engineering/invalidation.html>
- **On Brifing:** https://brifing.si/s/b1ee5a00-37f8-44ed-a53a-7c806427f636

## Problem: 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.

## Limitations 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.

## Invalidation Concept

The invalidation technique treats the layout tree as a cache, recalculating only changed portions. This prevents unnecessary computations and dramatically improves performance.

## contenteditable 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.

## Performance 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.

## Incremental Performance Principle

The optimal solution ensures re-rendering time is proportional to change size. This keeps interactions fast even in large, complex web applications.

## Cursor Implementation

A cursor is implemented to improve user experience in editable elements. It visually indicates focus location and where text will be inserted.

## Text 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.

## DrawCursor Implementation

A special DrawCursor function creates the cursor effect by drawing a vertical line at the correct offset position within the element.

## Special 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.

## Real-world Complexities

Professional implementations handle cursor movement, Unicode, bidirectional text, and text formatting complexities - all abstracted away by contenteditable.

## Importance 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.

## Sources covering this story

- https://browser.engineering/invalidation.html — 

---

_Summary written by Brifing from the original reporting. Copyright in the original article belongs to its publisher; read the full piece at the link above._