There are a number of events that currently trigger a full invalidation & subsequent rebuild of the document's layout tree.

Some examples:

• DOM node insertion
• DOM node removal
• Style mutation (of a layout tree affecting property)

Instead of rebuilding the whole dang layout tree, we should figure out how to rebuild only the affected part of the tree.

Here's an example that toggles the CSS display of an element on a 300ms interval timer:

<div id="foo">foo</div>    
<div id="bar">bar</div>    
<script>    
    window.setInterval(function() {    
        bar.style.display = bar.style.display == "none" ? "block" : "none";    
    }, 300);    
</script>

What currently happens:

1. Changing the display property triggers a full layout tree invalidation.
2. The layout tree is deleted.
3. At the next opportunity, a new layout tree is built.

What should happen:

1. Changing the display property causes us to mark the parent as "needs layout tree rebuild" (or some other ancestor, I'm not sure if it's okay to always just restart from the parent. Automatic table fixup might have issues here)
2. At the next opportunity, the layout tree is patched up by doing local rebuilds in the areas needed, not a full rebuild from root.

There's a lot more nuance to this of course, but that's the general idea: dirty bits and partial rebuilds.