ResizeObserver

[00:00:00]
>> Erik: So, let's overview the methods of how we can do changes when we resize things. So, for instance, if we resize the window, then we have two main methods, how can we do the changes on the web page. First is CSS media queries, it's used when we built adaptive design or it's the resize event.

[00:00:26]
When we track the element size, then there are two other options, that is a re-size observer that allows us to fire the callback, and there is a CSS container query that allows us to change the UI. So let's compare all of these methods from the performance-wise. So the CSS media query is, performance-wise is the best way to do the adaptive layout cases when you don't need to actually execute any JS callback.

[00:00:57]
But it has some limitation, we can't fire any callback, and we also can track specific element. So, for this specific reason, the CSS container queries implemented, so we can set up the container that we're and based on this container size, we can change the children, Lisa has styles.

[00:01:18]
So it's also pretty super fast, and it allows us to track the elements. But the problem is that we still can't fire any JS callbacks on that. Then we have the resize event, so the resize event is super slow. This, may be one of common reason why your application is potentially slow.

[00:01:35]
The reason why the resize event is slow, is it relies on standard DOM events, and as you know, when we fire any event in the DOM. So first, the event goes from top to the target element, and then event goes from bottom to the top again, so this is called bubbling mechanism.

[00:01:56]
And every time resize event is fired, we actually need to traverse the whole DOM tree internally to provide the target element with an event. So, this is one reason why it's slow. The second one is it's fired too often. So if you try to set up a resize event for the window object, it can be fired like 5,000 times in just a small resize.

[00:02:20]
So, you usually debounce that, but it allows us to track the window size and fire the callback. But the issue is, we still cannot track the specific element size. So, my recommendation would be to not to use resize event unless you really need this or you're supporting some legacy clients.

[00:02:43]
So, it's always better to rely on ResizeObserver instead because the ResizeObserver was designed specifically for this case where you need to track resize of the different elements in a very fast way. So, the ResizeObserver on average round 10 times faster than the resize event. It also supports the callback, so we can fire the GIS callback on certain element resize and we can track multiple elements with that.

[00:03:13]
So, we can combine the CSS media queries with a ResizeObserver to build our complex adaptive view layout cases. And before we jump to overview of ResizeObserver. So, the ResizeObserver has the most simple API actually. So, ResizeObserver constructor doesn't take any more arguments except the callback. And the callback has just, and the callback itself has the observer resize entries, but let's first understand what are the properties that observe method takes.

[00:03:48]
So, it just one property, which is the box, and you can stop the box as a content box or the border box. So in case of the content box, we'll just track the size of this blue rectangle. So if you change the padding or the border, the observer will not be triggered.

[00:04:03]
And if we use the border box, then we utilize both the border and the padding in the resize event calculations. And the ResizeObserver entry has a slightly weird property set. So it has the border box size, content box size, and as you can see, it's an array of boxes.

[00:04:25]
Why it's an array of boxes? Why it's just not a single box? Apparently, so, the spec developers, so right now, you will always have a single element in this array. But the spec developers, they think that in the future we will have HTML elements that may be not just a single box, but may contain multi-column layout in one single element.

[00:04:50]
That's why we need to track multiple columns within single element. And in the future, we're gonna use this array of boxes. So, they, but right now, you will always have just a single element because no there are no such multicolumn elements at the current spec. So, also, there is a target element that we are going to use, which gives us the element that trigger three sides observer.

[00:05:20]
The callback is implemented similar way. It takes the entries and we need to look for the entries and to access the width or the high properties. So we use the first element of the water box size. So as you can see, so because we always know that it's just a single element, then we use the zero index here.

[00:05:42]
And here we have the inline size and the block size. So, inline size corresponds to the width, the block size corresponds to the height. And then we can set up the ResizeObserver for multiple boxes and trigger the callback