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

NodesRules
jsconf.eu87167
google.com front402266
google.com result1436710
stackoverflow.com2254893
microsoft.com3517972
twitter.com42512355
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

Questions!