loading...

What Is DOM

satansdeer profile image Maksim Ivanov Originally published at maksimivanov.com on ・1 min read

DOM (Document Object Model) is a programming api for your HTML (or XML) documents. Basically it is an object representing parsed code of your page.

It has tree-like structure and allows you to traverse, access and modify its nodes.

You are probably familiar with DOM API methods:

document.getElementById(id)
document.getElementsByTagName(name)
document.createElement(name)
parentNode.appendChild(node)

// ... etc.

Why Updating DOM Is Expensive

When you update DOM it can cause browser to run two expensive operations: reflow and repaint.

Reflow happens where there is a change to DOM layout. It calculates dimensions and positions of page elements. And it does it for every element and it’s children.

Repaint goes through elements and determines visual changes (opacity, color, outline, visibility) and then updates pixels on the screen.

Because of how updating DOM is expensive - React is using technique called Virtual DOM.

Posted on by:

satansdeer profile

Maksim Ivanov

@satansdeer

I write tutorials for developers at https://maksimivanov.com

Discussion

markdown guide