Thrashing inside a resize event listener can trigger this hundreds of times per second, which can cause the browser to slow down and even freeze. This is called layout thrashing, and it’s a common performance bottleneck. The browser has to account for the fact that styles have changed in some way since you last read the size of the element, so it has to recalculate the size of the element all over again next time you read it. If you then make changes to something on the screen, this invalidates the layout again and the browser can’t cache the size. Reading the size of an element forces the browser to immediately and synchronously calculate its size, which forces the entire page to undergo layout and style calculations. Each of these values will be calculated for the box size specified by the property being accessed.What makes it worse is that you’re probably going to pair the resize event with some logic to read the size of an element on the screen, such as with element.clientWidth, element.getBoundingClientRect(), or getComputedStyle(). If the writing mode of your document is vertical, though, the blockSize will define the width while the inlineSize will define the height. The blockSize property defines the height of the element while the inlineSize defines the width. Each of these properties will be an array that will almost always contain just one value which is an object with a blockSize and inlineSize property. These properties are borderBoxSize, contentBoxSize, and devicePixelContentBoxSize, and they perfectly line up with the 3 different box model types discussed earlier.
There are also 3 additional properties that all provide additional information about the width/height of the element. The most important properties are the target and contentRect since they tell you the majority of the information you need to know about which element is resizing and what its new size is. The entries array in the Resize Observer callback contains lots of useful information about the element. Const observer = new ResizeObserver ( entries => ) Resize Observer Entry
0 kommentar(er)
