DOM Implementation
& Optimization
I am:
Marijn Haverbeke
@marijnjh
marijnh
![]() |
CodeMirror
|
The DOM is a great platform
- Declarative creation
- Imperative manipulation
- Heavily optimized
To draw a tree

- Organize by spatial relation
- Assign size and offset to nodes
- Draw in the right order
Once is not enough...
This is a demonstration document
Here
Is A
Side
Bar
There was madness in any direction, at any hour. If not across the Bay, then up the Golden Gate or down 101 to Los Altos or La Honda... You could strike sparks anywhere. There was a fantastic universal sense that whatever we were doing was right, that we were winning...
And that, I think, was the handle—that sense of inevitable victory over the forces of Old and Evil. Not in any mean or military sense; we didn’t need that★. Our energy would simply prevail. There was no point in fighting—on our side or theirs. We had all the momentum; we were riding the crest of a high and beautiful wave...
So now, less than five years later, you can go up on a steep hill in Las Vegas and look West, and with the right kind of eyes you can almost see the high-water mark—that place where the wave finally broke and rolled back. —HST
Hardware Acceleration
Style Resolution
| Nodes | Rules | |
|---|---|---|
| jsconf.eu | 871 | 67 |
| google.com front | 402 | 266 |
| google.com result | 1436 | 710 |
| stackoverflow.com | 2254 | 893 |
| microsoft.com | 3517 | 972 |
| twitter.com | 4251 | 2355 |
| div#nav p #icon |
p.lift div a.internal .nav-item |
a:hover #page div div input[checked] blockquote |
:hover [checked] |
![]() id |
![]() class |
![]() tagname |
![]() rest |




