But why’s the browser DOM still so slow after 10 years of effort?

by

When you change something in the DOM it can have myriad side-effects to do with recalculating layouts, style sheets etc.

This isn’t the only reason: when you set element.innerHTML=x you are no longer dealing with ordinary “store a value here” variables, but with special objects which update a load of internal state in the browser when you set them.

The full implications of element.innerHTML=x are enormous. Rough overview:

  • parse x as HTML
  • ask browser extensions for permission
  • destroy existing child nodes of element
  • create child nodes
  • recompute styles which are defined in terms of parent-child relationships
  • recompute physical dimensions of page elements
  • notify browser extensions of the change
  • update Javascript variables which are handles to real DOM nodes

All these updates have to go through an API which bridges Javascript and the HTML engine. One reason that Javascript is so fast these days is that we compile it to some faster language or even machine code, masses of optimisations happen because the behaviour of the values is well-defined. When working through the DOM API, none of this is possible. Speedups elsewhere have left the DOM behind.

More Related Contents:

  1. How do I check if an element is hidden in jQuery?
  2. Detect element content changes with jQuery
  3. How can I select an element by name with jQuery?
  4. When does reflow happen in a DOM environment?
  5. Firing event on DOM attribute change
  6. jQuery object and DOM element
  7. How to resolve the C:\fakepath?
  8. How to expose IFrame’s DOM using jQuery?
  9. How can I simulate a click to an anchor tag?
  10. How to get the element clicked (for the whole document)?
  11. Browser-independent way to detect when image has been loaded
  12. Can I load an entire HTML document into a document fragment in Internet Explorer?
  13. Get selected text position and place an element next to it
  14. How do I monitor the DOM for changes?
  15. change html text from link with jquery
  16. Adding an img element to a div with javascript
  17. Jquery Event Not Triggering for DOM Elements Created after page load [duplicate]
  18. Does HTML Hidden control have any events? Like onchange or something?
  19. How to dynamic filter options of with jQuery?
  20. How to inherit from the DOM element class
  21. for each element type in body
  22. What is the difference between node.nextSibling and ChildNode.nextElementSibling?
  23. Why do multiple `.appendTo` calls on a newly created jQuery element only append it once?
  24. React Error: Target Container is not a DOM Element
  25. Is there a way to know if a link/script is still pending or has it failed
  26. How to properly unload/destroy a VIDEO element
  27. How to get element by class name
  28. How to do a wildcard element name match with “querySelector()” or “querySelectorAll()” in JavaScript?
  29. Getting width & height of an image with filereader
  30. Replacement for deprecated `keypress` DOM event

Leave a Comment