3 Web Observers Every Web Developer Should Know
You probably know the MutationObserver, but do you know the others?
In the browser, we can use addEventListener to listen to user events, but what if I want to listen to DOM changes or to listen to some browser behavior?
Browsers provide us with several Observers to meet these needs. Do you know which ones are there? What are their specific uses? This article will reveal it to you.
MutationObserver
The MutationObserver interface can monitor changes in the DOM tree and is part of the DOM3 event specification. It can monitor changes in the properties of the current node, changes in child nodes, and so on. Here is a simple example:
When the button is clicked, you can see that the MutationObserver listens to the change, and can clearly know whether the attributes has changed or the childList has changed.
It is particularly important that all Observer event callbacks are microtasks, which has two benefits.
- It is asynchronous. It’s not like Mutation Events which fires a synchronous callback every time the DOM changes. Instead, it waits for multiple DOM changes before triggering an asynchronous callback.
- It can guarantee real-time, it will definitely be called before the next macro task starts.
Here’s an example using Mutation Events and MutationObserver:
Using the default number of 3, when clicking Add Multiple Child, you can see that insertCallback is called three times, while observerCallback is called only once. And in mutationsList you can get the records of these three changes. You can also change other numbers to test.
Below is a screenshot of the Performance:
The user click event is a macro task. After clicking the button, it can be seen that the DOMNodeInserted event is called three times, and the observerCallback is called once in the microtask. The next step is for the browser to render a new frame. If the user clicks again, a new macro task starts.
So it cleverly uses the mechanism of the event loop to solve the real-time problem without affecting performance.
ResizeObserver
To listen for changes in the size of the browser window we can use addEventListener to listen for the resize event, and to listen to a single element, you can use ResizeObserver.
The ResizeObserver interface reports changes to the dimensions of an Element’s content or border-box, or the bounding box of an SVGElement.
Here is a simple example:
Note that ResizeObserver also fires a callback when initialized. Drag the slider above to see that the callbacks are triggered in sequence, and you won't feel any lag, which is also due to the microtasks mentioned above.
resizeObserver can be useful when doing visualization chart adaptation.
IntersectionObserver
The IntersectionObserver interface can observe changes in the intersection of the target element with an ancestor element or the document viewport. When creating, you can specify a threshold for the visible scale of the intersection, etc.
Here is a simple example:
Scroll the scroll bar in the container area to see the console output. where intersectionRatio identifies the ratio of the current intersection. We specify output at 0.5 and 1.
This API is very useful for lazy loading of images or data collection, and Medium’s lazy loading may use this 😃
Additional
In addition to the Observer of the above three monitoring elements, there are two other types of Observer, which are PerformanceObserver and ReportingObserver.
PerformanceObserver is used to monitor performance measurement events. The callback function is triggered once there is a measurement event (performance entries), and then you can choose to report it for performance analysis.
ReportingObserver allows collection and access to reports. For example, when using the browser's deprecated API, it fires a callback function. Since this is not an error, you can only use ReportingObserver to listen.
That’s all for today. I’m Zachary and I’ll keep outputting stories related to web development. If you like such stories and want to support me, please consider becoming a Medium member. It costs $5 per month and gives you unlimited access to Medium content. I’ll get a little commission if you sign up via my link.
Your support is very important to me — thank you.
