The Resize Observer explained

How many times have you attached a resize listener to the window object just to track a single DOM element? I have done it many times simply because I’ve had no other choice. There is an issue though — scroll and resize events are performance bottlenecks. Nowadays, the scroll event can be replaced with the Intersection Observer that I explained before. There’s now hope for the resize event — Resize Observer.

I don’t care about window resize

What’s the big deal with windw.onresize then? Essentially you have to trigger a callback every single time the size of the window changes — it doesn’t necessarily mean that the element of interest changes its dimensions. This is a performance heavy event because it fires frequently and blocks a thread preventing the buttery smooth flow of our website. Look at this CodePen to understand the issue (open and resize the window size).

// define a callback
function callback() {
  // something cool here
}

// add resize listener to window object
window.addEventListener('resize', callback)

See the Pen 2018-01-30-1 by Pawel Grzybek (@pawelgrzybek) on CodePen.

Can you see the issue? We’re trying to update the size of the box but the callback fires when the window changes its dimensions, not the box that we care about.

Fire a callback only when you need it — thanks to the Resize Observer

Similarly to the previously explained Intersection Observer the API of the Resize Observer is very simple. You have to instantiate a new ResizeObserver object with a callback function in a constructor. Look at the example now (open it in a new window and play around with its size). Can you see the difference? Pay attention to when and how often the callback is triggered.

// define a callback
function callback() {
  // something cool here
}

// instantiate new observer
const myObserver = new ResizeObserver(callback);

// Observe one or multiple elements
myObserver.observe(someElement);

See the Pen 2018-01-30-2 by Pawel Grzybek (@pawelgrzybek) on CodePen.

Yes, you can use it now

Although the Resize Observer is supported only in Google Chrome 64+ and it is not fully polyfillable, there is a simple way to check if the browser supports it or not. If it does — take advantage of it. If it doesn’t window.onresize will serve us as well as it has for all these years.

if ('ResizeObserver' in window) {
  // new ResizeObserver( callback );
}
else {
  // window.addEventListener('resize', callback)
}

Helpful resources

• Resize Observer 1 specification
• ResizeObserver explainer document
• ResizeObserver: It’s Like document.onresize for Elements by Surma

Leave a comment