css-element-queries

css-element-queries copied to clipboard

We are using iframe based code to detect element size change. ResizeSensor has much better API, and we also thought that it would also provide better performance than iframe based mechanism.

However, when we did benchmark, we were surprised to find that ResizeSensor actually had worse performance. I did some investigation: For every scroll event, the handler calls reset() function, which reset width, height, scrollLeft and scrollTop of the div elements. This forces browser to do a layout calculation.

The forced layout issue also exists in the initialization code. When first attaching ResizeSensor to an element, the code calls window.getComputedStyle(element) to get the position property, and then calls element.getBoundingClientRect() to get its initial size. Both of these functions will force layout.

Does anyone see the same issue, or have any idea how they can be solved?

What do you mean by issue and what kind of solution are you looking for? Resetting and forcing to relayout the sensor elements is key to make this whole approach viable. It's a hack. There is no way around those layout calculcation except using chrome's new ResizeOberserver.

Scroll is a frequent event. We want to do some aggressive debouncing, like debouncing with timeout of 85ms. (Currently ResizeSensor uses requestAnimationFrame sort of like debouncing) I see #224 requests a custom scheduler. This may also help here. Suppose that we can pass in a custom scheduler, which is a debouncer with timeout of 85ms. ResizeSensor can measure the size of the element and do the reset in the scheduled/debounced handler. This will reduce the frequency of forced layout from every scroll event to only debounced scroll/resize event. I haven't done benchmarking on this idea yet.