JavaScript Observers are programs designed to monitor and detect specific activities or changes in a system. In the context of web development, observers play a crucial role in tracking various events and behaviors within a browser environment. Much like the faithful companionship of dogs, observers diligently watch over specific activities and notify us whenever something unusual occurs. It is then our responsibility to take appropriate actions based on these alerts.
Use case of Observer in JavaScript?
Observers enable us to monitor a wide range of activities that take place in the browser and respond accordingly. For example, we can observe whether a video is currently visible within the viewport and enable autoplay functionality if necessary. We can also keep an eye on changes in the child elements of a parent DOM element, track alterations in the size or dimensions of a box element, and much more.
Types of JavaScript Observer
Following are five different types of JavaScript Observer supported by modern browsers.
Mutation Observer
Resize Observer
Intersection Observer
Performance Observer
Reporting Observer
1. JavaScript Mutation Observer
The MutationObserver interface in JavaScript allows us to monitor and track changes that occur in the DOM (Document Object Model). It is part of the DOM3 event specification and provides a powerful mechanism to observe modifications within the DOM tree.
Syntax:
To use a MutationObserver, we need to follow these steps:
STEP 1: Create an observer with a callback function:
let observer = new MutationObserver(callback); STEP 2: Attach the observer to a DOM node:
observer.observe(node, config); The config parameter is an object with boolean options that determine the types of changes the observer will react to:
childList: Monitors changes in the direct children of the node.
subtree: Monitors changes in all descendants of the node.
attributes: Monitors changes in attributes of the node.
attributeFilter: An array of attribute names to observe only selected ones.
characterData: Monitors changes in the text content of the node.
Example:
// Select the node that will be observed for mutations
const targetNode = document.getElementById('some-id');
// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };
// Callback function to execute when mutations are observed
const callback = function(mutationList, observer) {
// Use traditional 'for loops' for IE 11
for (const mutation of mutationList) {
if (mutation.type === 'childList') {
console.log('A child node has been added or removed.');
} else if (mutation.type === 'attributes') {
console.log(`The ${mutation.attributeName} attribute was modified.`);
}
}
};
// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(targetNode, config);
// Later, you can stop observing
observer.disconnect();Examples where Mutation Observer is Helpful:
Mutation observers are incredibly useful in various scenarios, including:
Detecting and responding to changes in the DOM structure, such as when child nodes are added or removed.
Monitoring attribute modifications of specific elements.
Tracking changes in text content within nodes.
Reacting to modifications within specific subtrees of the DOM.
Benefits:
Mutation observers provide a flexible and efficient way to listen for changes within the DOM.
They enable developers to build responsive applications that can dynamically adapt to modifications, ensuring smooth user experiences and efficient handling of data updates.
By utilizing mutation observers effectively, developers can create robust and interactive web applications."
2. JavaScript Resize Observer
To listen for changes in the size of the browser window, you can use the addEventListener method to listen for the resize event. If you want to listen to changes in the size of a specific element, you can use the ResizeObserver interface.
The ResizeObserver interface provides a way to report changes to the dimensions of an element's content or border-box, as well as the bounding box of an SVGElement.
Syntax:
// Observe changes to an element
observe(target);
observe(target, options);target: A reference to an element or SVGElement to be observed.
options: An optional object allowing you to set options for the observation. The only available option is:
box: Sets which box model the observer will observe changes to. Possible values are:
content-box (the default): Size of the content area as defined in CSS.
border-box: Size of the box border area as defined in CSS.
device-pixel-content-box: The size of the content area as defined in CSS, in device pixels, before applying any CSS transforms on the element or its ancestors.
Example:
const h1Elem = document.querySelector('h1');
const pElem = document.querySelector('p');
const divElem = document.querySelector('body > div');
const slider = document.querySelector('input[type="range"]');
const checkbox = document.querySelector('input[type="checkbox"]');
divElem.style.width = '600px';
slider.addEventListener('input', () => {
divElem.style.width = `${slider.value}px`;
});
const resizeObserver = new ResizeObserver((entries) => {
for (let entry of entries) {
if (entry.contentBoxSize) {
// Firefox implements `contentBoxSize` as a single content rect, rather than an array
const contentBoxSize = Array.isArray(entry.contentBoxSize) ? entry.contentBoxSize[0] : entry.contentBoxSize;
h1Elem.style.fontSize = `${Math.max(1.5, contentBoxSize.inlineSize / 200)}rem`;
pElem.style.fontSize = `${Math.max(1, contentBoxSize.inlineSize / 600)}rem`;
} else {
h1Elem.style.fontSize = `${Math.max(1.5, entry.contentRect.width / 200)}rem`;
pElem.style.fontSize = `${Math.max(1, entry.contentRect.width / 600)}rem`;
}
}
console.log('Size changed');
});
resizeObserver.observe(divElem);
checkbox.addEventListener('change', () => {
if (checkbox.checked) {
resizeObserver.observe(divElem);
} else {
resizeObserver.unobserve(divElem);
}
});Here are some of the Applications and Benefits of using Resize Observer:
Responsive Design: Using ResizeObserver, you can dynamically adjust the layout or styling of elements based on their size changes. This is particularly useful in responsive web design.
Element Visibility: You can use ResizeObserver to detect when an element becomes visible or hidden by monitoring changes in its dimensions.
Element-based Animations: By observing size changes, you can trigger animations or transitions on elements based on their size variations.
UI Updates: ResizeObserver can be used to update UI components, such as sliders or progress bars, based on changes in element sizes.
Performance Optimization: By efficiently observing size changes, you can optimize resource allocation and minimize unnecessary calculations.
The ResizeObserver provides a versatile tool to build more adaptive and responsive web applications, allowing developers to create dynamic layouts and improve user experiences based on element size changes.
3. JavaScript Intersection Observer
The IntersectionObserver interface allows you to observe changes in the intersection of a target element with its ancestor element or the document viewport. It provides a powerful way to efficiently detect when an element enters or exits the viewport or intersects with other elements.
new IntersectionObserver(callback)
new IntersectionObserver(callback, options)callback: A function that is called when the percentage of the target element that is visible crosses a specified threshold. The callback receives two parameters:
entries: An array of IntersectionObserverEntry objects, each representing a threshold that was crossed.
observer: The IntersectionObserver instance for which the callback is being invoked.
options: An optional object that customizes the observer's behavior. If not specified, the observer uses the document's viewport as the root with no margin and a 0% threshold. You can provide the following options:
root: An element or document object that serves as the ancestor of the target element. The root's bounding rectangle is considered the viewport, and any part of the target not visible within the root is not considered visible.
rootMargin: A string specifying a set of offsets to add to the root's bounding box when calculating intersections. It effectively expands or shrinks the root for intersection calculations. The syntax is similar to the CSS margin property.
threshold: Either a single number or an array of numbers between 0.0 and 1.0. It represents the ratio of intersection area to the total bounding box area of the observed target. A value of 0.0 means that even a single visible pixel counts as the target being visible, while 1.0 means that the entire target element must be visible.
Example:
let options = {
root: document.querySelector('#scrollArea'),
rootMargin: '0px',
threshold: 1.0
};
let observer = new IntersectionObserver(callback, options);The IntersectionObserver is widely used in various scenarios, including:
Lazy Loading: By observing the intersection of an image or a section with the viewport, you can defer the loading of off-screen or below-the-fold content until it becomes visible, improving the initial page load performance.
Infinite Scrolling: When a scrollable container reaches a certain threshold, the observer can trigger the loading of additional content, allowing seamless infinite scrolling experiences.
Ad Tracking and Analytics: Tracking impressions or measuring the viewability of advertisements can be accomplished by observing the visibility of ad elements within the viewport.
Animations and Effects: IntersectionObserver can be used to trigger animations, transitions, or other effects when elements enter or leave the viewport, providing a smooth and engaging user experience.
Responsive Design: It allows you to dynamically adjust layout, styling, or behavior based on the visibility or intersection of elements, enabling more adaptive and responsive designs.
By leveraging the IntersectionObserver interface, you can efficiently and accurately detect changes in element visibility, leading to improved performance, enhanced user experiences, and more flexible web applications.
4. JavaScript Performance Observer
The PerformanceObserver interface is used to observe the Performance Timeline and be notified of new performance entries as they are recorded by the browser. It provides a way to measure various performance metrics in both browser and Node.js applications, enabling developers to optimize and fine-tune the performance of their web applications.
Syntax:
observer.observe(options);options: A PerformanceObserverInit dictionary that accepts the following members:
entryTypes: An array of DOMString objects, each specifying a performance entry type to observe. This allows you to specify which types of performance entries you're interested in. Note that entryTypes cannot be used together with the type or buffered options.
type: A single DOMString specifying exactly one performance entry type to observe. Similar to entryTypes, this option allows you to focus on a specific performance entry type. It cannot be used together with the entryTypes option.
buffered: A boolean flag indicating whether buffered entries should be queued into the observer's buffer. This option should only be used with the type option.
Example:
var observer = new PerformanceObserver(function(list, obj) {
var entries = list.getEntries();
for (var i=0; i < entries.length; i++) {
// Process "mark" and "frame" events
}
});
observer.observe({entryTypes: ["mark", "frame"]});
function perf_observer(list, observer) {
// Process the "measure" event
}
var observer2 = new PerformanceObserver(perf_observer);
observer2.observe({entryTypes: ["measure"]});The PerformanceObserver allows you to capture and process performance entries related to different aspects of your web application's performance. By leveraging this interface, you can optimize your web applications in several ways, such as:
Measuring page load times: You can observe performance entries like navigation timing to measure the overall page load time and identify potential bottlenecks.
Analyzing network performance: By observing resource timing entries, you can analyze network performance metrics such as DNS lookup time, connection time, and response time to optimize your application's network requests.
Identifying rendering issues: By monitoring paint timing entries, you can identify rendering issues like the excessive layout or rendering time and optimize the rendering pipeline.
Analyzing JavaScript execution: Performance entries like measure and mark can help you analyze the execution time of specific JavaScript functions or code blocks, allowing you to optimize critical parts of your code.
Monitoring user interactions: By observing user timing entries, you can measure the performance of user interactions, such as button clicks or form submissions, and optimize the responsiveness of your application.
The PerformanceObserver interface is a powerful tool for performance analysis and optimization in web applications. By collecting and analyzing performance entries, you can gain insights into your application's performance characteristics and make informed optimizations to enhance the user experience.
5. JavaScript Reporting Observer
The ReportingObserver() constructor of the Reporting API allows you to create a new ReportingObserver object instance, which is used to collect and access reports. The Reporting API provides a standardized way to collect and send various types of reports from the browser, such as deprecations, interventions, or crashes.
new ReportingObserver(callback)
new ReportingObserver(callback, options)callback: A callback function that is executed when the observer starts to collect reports by calling ReportingObserver.observe(). The callback function receives two parameters:
reports: A sequence of Report objects representing the reports collected in the observer's report queue. This is the primary way to retrieve the reports and perform further processing.
observer: A reference to the same ReportingObserver object, allowing for recursive report collection or additional operations.
options: A ReportingObserverOptions object that allows you to set the options for creating the observer. The available options are:
types: An array of strings representing the types of reports to be collected by this observer. You can specify the desired report types, such as 'deprecation', 'intervention', or 'crash' (although the availability of 'crash' reports may vary). Only reports matching the specified types will be collected.
buffered: A boolean that determines whether reports generated before the observer was created should be observable (true) or not (false). If buffered is set to true, any existing reports in the report queue will be accessible when the observer is created.
Example:
let options = {
types: ['deprecation'],
buffered: true
}
let observer = new ReportingObserver(function(reports, observer) {
reportBtn.onclick = () => displayReports(reports);
}, options);
The ReportingObserver allows you to collect reports and handle them accordingly. You can define the types of reports you want to collect and access them through the provided callback function. Some benefits of using the ReportingObserver include:
Comprehensive error reporting: By observing different types of reports, such as deprecations or interventions, you can gain insights into potential issues or deprecated features in your web application.
Real-time feedback: With the ability to receive reports as they occur, you can take immediate actions based on the reported information, such as logging the reports or displaying warnings to the user.
Diagnostic capabilities: Reports collected by the ReportingObserver can aid in diagnosing and fixing problems in your application, ensuring a smoother user experience.
Standardized reporting: The Reporting API provides a standardized way to collect reports across different browsers, enabling consistent reporting and analysis of web application issues.
By leveraging the ReportingObserver and its associated features, you can proactively monitor and address potential issues in your web application, resulting in improved performance, better user experiences, and more robust applications.
Conclusion
The JavaScript Observer pattern provides a powerful mechanism for monitoring and responding to various events and changes in a browser environment. By using different types of observers, developers can track and react to specific activities and updates, enabling them to enhance user experiences, optimize performance, and streamline application functionality.