The day has finally come,... to spread awareness regarding a concept called . Yes, you should know about this. Simple but still a game changer when it comes to controlling how your webpage interacts with a user. Mutation Observer I'm saying it with no regrets, let's just for a second. I know it's making our life easier with some operations that are just too tedious to do with vanilla JavaScript. But it's a weighty library for a project whose own code base sometimes comparable to it in size. ditch JQuery What if there is a way you can manipulate more easily and in better optimized way. DOM Yes there is Mutation Observer MutationObserver is a built-in object that observes a DOM element and fires a callback when it detects a change. So what is means is that it allows you to detect when elements in a web page are inserted, changed,or removed. It is still relatively new, but it is supported by . every modern browser First, we create an observer with a callback-function: observer = MutationObserver(callback); let new And then attach it to a DOM node: observer.observe(node, config); Then after any changes, the callback is executed: changes are passed in the first argument as a list of objects, and the observer itself as the second argument. MutationRecord It's pretty simple once you get a hang of it. For a deeper dive into web mutations, visit . here So what is the need for it? Is there any real-life scenario to use this over anything else? Client-side Image Optimization Believe it or not, it’s actually possible to swap the src’s of img tags before the browser begins to load them. We can use that to optimize our images without changing the HTML source of our page. Initializing When An Element Becomes Available on the Page It’s a common pattern to wait for jQuery.ready or DOMContentLoaded to initialize code which depends on elements on the page. Those events don’t fire until the entire DOM has loaded however meaning the page will start to be rendered before you have a chance to change or add to its content. Managing ContentEditable Regions If you are truly building an editor, it’s common to want some control over what the user can enter. You can use MutationObservers to prevent certain modifications or take action when they occur. As our marathon to make our development load fast on the client's machine is not coming to an end. These simple hacks of loading what's necessary, optimizing assets for a device among other things make a huge difference for someone picking your product over others.

The Power of Intersection: How AI Is Enhancing Quantum Computing

Puppeteering HTML - The art of creating optimized web pages

Puppeteering HTML - The Art of Creating Optimized Web Pages

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

The Power of Intersection: How AI Is Enhancing Quantum Computing

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

104 Stories To Learn About Programming Top Story

The Power of Intersection: How AI Is Enhancing Quantum Computing

104 Stories To Learn About Go

105 Stories To Learn About Functional Programming

100+ Free Pluralsight Courses to learn Python, Java, and Spring Boot

10 Websites to Learn JavaScript for Beginners

104 Stories To Learn About Programming Top Story

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps