DEV Community

DOM performance case study

Arek Nawo on February 16, 2019

This post is taken from my blog, so be sure to check it out for more up-to-date content 😉 I have an interesting question for you - when have you l...

Read full post

rhymes • Feb 17 '19

Great post Areknawo! There's a lot to learn about browser performance, thanks for the info! :-)

You've probably already read them but this series about how they made Firefox fast is very interesting:

Arek Nawo • Feb 17 '19

Thanks!
I've indeed read some posts from the Mozilla Hacks blog. They're very insightful, well-written and informative! But I haven't stumbled on these ones yet, so thanks for links too!

rhymes • Feb 17 '19

I really love Lin Clark's style of writing (and cartoons) :D

Vipul • Feb 16 '19

15 Years old?

Arek Nawo • Feb 16 '19

Vipul • Feb 16 '19

Your age? Read in your bio, is that true?

Arek Nawo • Feb 16 '19

Yeah... what's the problem?

Vipul • Feb 16 '19

Why u'r acting rude?
I've no problem, in fact, I am amazed that you have this much of knowledge. At your age, I even don't know about writing a function. :Appreciates:

Arek Nawo • Feb 16 '19

Thanks. I'm just a bit conservative about the age stuff... Some people might have different opinions on this topic.

Ben Halpern • Feb 16 '19

Fabulous post!!

Arek Nawo • Feb 16 '19

Thanks!

Matei Adriel • Dec 18 '19

What do u think about stuff like angular ivy, lit-html and svelte having amazing performance without using the vdom?

Ps: bice post

Arek Nawo • Dec 18 '19

Skipping the virtual DOM indeed gives you a performance boost. But there are complex cases in which it needs to be really well executed in order to do so. Aside from that, Svelte is on the rise, and I really like the lit-html template string approach. I somewhat even implemented it in my own framework. 👍

View(() => {
    return Node(({ classes, state, styles, on }) => {
        state({ color: "red" }, true)
        on("created", () => {
            setTimeout(() => {
                state.set("color", "green");
            }, 1000);
        });

        return `<h4 ${styles({
            color: state.get("color")
        })}${classes([
            "hello"
        ])}>Hello World!</h4>`;
    });
}).render();

Matei Adriel • Dec 18 '19

Maybe you'd want to create a function which does nothing called html to allow the lit-html vscode extensions to highlight the html

Arek Nawo • Dec 18 '19

I considered that, but by doing this I lose access to the arguments, (like style and classes), which can be used in pretty interesting ways.