DOM Optimizer

Recently, we began releasing a prototype "DOM Optimizer". The code likely seems very confusing (in what it does), so here I'll summarise for technical and hopefully less technical people.

DOM & Browser Painting

The DOM (document object model) is the layout of the page as defined by elements, which can be the entire chat panel, or individual messages or pieces of text. When the DOM changes, the browser has to paint - compute layout and what it should look like, then draw it to the screen. When this happens, especially in large chunks, it causes a noticeable lag to the user.

Discord DOM Changes

When switching channels (or servers), there are many DOM changes which take place, big and small. The entire main chat panel is removed and readded, but also every member's activity text is changed. All of these are done in one large bulk chunk with React.

DOM Optimizer

OpenAsar's DOM Optimizer delays some unimportant DOM changes for later (100ms), currently mostly member activity (RPC) status text.

Why? Instead of currently doing this:

1. Switch channel
2. All DOM changes
3. Large lag and wait...
4. Paint, usable again

With the DOM Optimizer, it now does:

1. Switch channel
2. Important DOM changes
3. Less major lag and wait
4. Paint, usable again earlier/faster
5. Less important DOM changes
6. Second paint, now identical to normal

On my setup, this made switching channels noticeably quicker. Hope it does for you too :)