DOM Performance Best Practices

[00:00:00]
>> Evgenii Ray: Let's move on to performance best practices, the first and the most obvious one, and the one overlooked the most is that we can actually improve the performance of querying by simplifying the selector. So, each time you use the complex selector, the CSS compiler needs to transpire this, and it takes more time, so you pay extra tax on using the complex selector.

[00:00:28]
So, you may notice that it's not significant, so you may pay like five milliseconds on the query to compile this lecture, but all these things are accumulating. So, if you do hundreds of queries, so it will result, maybe to 50 milliseconds, on average in the delay. But if we combine all possible optimizations with this one, the results can be quite significant.

[00:00:55]
Although the IDs is not the best practice, you still can utilize IDs for the core container when, for instance, you need to query the element from the very large tree. So, if we have some DOM tree that has 10,000 elements, if you query from HTML, then you need to go through 10,000 elements on the first query.

[00:01:18]
But if you, for instance, could select this section with an ID, and then you know that this operation should be repeated multiple times, then you can just provide an end query from this section, and it will be just one operation. So, next section is adding and removing elements, and before we jump to that, any questions so far?

[00:01:38]
>> Speaker 1: So, you talked about understanding the differences between these methods being useful if you were gonna build something more low level. If you are working on something that is using a framework like React or Angular, are there recommendations you would make for improving performance or knowing what their methods are using under the hood?

[00:02:00]
Or do you just trust that the library authors have spent a lot of time thinking about it [LAUGH]?
>> Evgenii Ray: Yeah, when you utilize any library that manages the DOM for you, you just rely on this library. The only way you can possibly think you may use the DOM API within some effect in the React when you need to query things, this is the place where you could optimize potentially.

[00:02:25]
But trying to optimize a React is not a good idea because it's quite complex inside.
>> Speaker 2: Is the cost of CSS only during compile time? Wouldn't the runtime of complex selectors also be about performance?
>> Evgenii Ray: No actually, first you compile your styles in CSS, this compiled when you initiate the page.

[00:02:48]
But when you execute the JavaScript with some query selector, this is dynamic selector, this means that should be compiled in runtime. So, you pay the cost every time you execute that, okay? So, let's now understand how we can add or remove elements, and when it comes to adding or removing, every method is bad.

[00:03:09]
[LAUGH] So basically, we don't have a good, so the performance impact is always significant. So, there is no good method to insert the data because every time we modify, the DOM, it triggers the reflow. So, in our application, we want to minimize the reflow operation, but there are a few methods that particularly impact the performance.

[00:03:36]
The first one is innerHTML, so when you use the innerHTML, you basically set the HTML of the element. The browser needs to involve the HTML parser to compile your HTML again, to do the full reflow, validate your HTML, and so on. So, you pay the cost of the parsing, same applies to insert a JSON HTML.

[00:03:59]
Because we use the row HTML, the browser still needs to parse that. But if you need to modify the DOM, make sure that you don't utilize the inner HTML too often. It's okay to use this once per initialization, but if you expected to insert elements dynamically, then it's better to utilize the insert adjacent element or a penchant because it takes the compiled HTML object already and just renders this on a DOM.

[00:04:36]
And we can see how it works, so the method is pretty flexible because it accepts the position where we can insert the element. The first one is before begin, which basically insert the element before the target element. So, we can try to insert that, and the element is inserted, so the after begin will give you the first child position.

[00:05:02]
>> Evgenii Ray: While the before end will render element as a last child, and after end will give you the position right after target element. This method is pretty flexible and can be used almost anywhere, then how do we remove elements. So, removing elements can be done through the remove method, basically we need to have a reference to the object, and we can also reset the whole HTML by setting the EMP string.