Shulou(Shulou.com)06/02 Report--

This article mainly introduces "what are the API commonly used in javascrip advanced front-end development". In daily operation, I believe many people have doubts about API commonly used in javascrip advanced front-end development. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the questions of "what are the commonly used API in javascrip advanced front-end development?" Next, please follow the editor to study!

MutationObserver

MutationObserver is an interface that can listen for structural changes in DOM.

MutationObserver is notified of any changes to the DOM object tree.

API

MutationObserver is a constructor that accepts a callback parameter, which is a callback function that handles node changes, and returns two parameters:

Mutations: node change record list (sequence)

Observer: construct a MutationObserver object.

The MutationObserver object has three methods, one of which is as follows:

Observe: set observation target. Accept two parameters. Target: observe target, options: set observation options through object members.

Disconnect: prevents the observer from observing any changes

TakeRecords: clear the record queue and return its contents

/ / Select a node to observe var targetNode = document.getElementById ('root') / / set the configuration option of observer var config = {attributes: true, childList: true, subtree: true} / / the function to be executed when the node changes var callback = function (mutationsList) Observer) {for (var mutation of mutationsList) {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 example associated with the callback function var observer = new MutationObserver (callback) / / use the configuration file to observe the target node observer.observe (targetNode Config) / / stop observing observer.disconnect ()

There are several options for the options parameter in the observe method:

ChildList: set true, which means to observe the changes of target child nodes, such as adding or deleting target child nodes, excluding modification of child nodes and changes of descendants of child nodes.

Attributes: set true to observe the change of the target attribute

CharacterData: set true to observe changes in the target data

Subtree: set to true, the target and its descendant changes will be observed.

AttributeOldValue: if the attribute is true or omitted, it is set to true, indicating that the target attribute value before the change needs to be recorded. If attributeOldValue is set, the attributes setting can be omitted.

CharacterDataOldValue: if characterData is true or omitted, it is set to true, indicating that the target data before the change needs to be recorded. If characterDataOldValue is set, the characterData setting can be omitted.

AttributeFilter: if not all property changes need to be observed, and attributes is set to true or ignored, set a list of local names of properties that need to be observed (no namespace is required)

Characteristics

MutationObserver has the following characteristics:

It waits for all script tasks to complete before it runs, that is, asynchronously

It encapsulates DOM change records into an array for processing, rather than dealing with DOM changes individually.

It can observe not only all the changes that take place in the DOM node, but also a certain type of change.

The MutationObserver event is triggered when the DOM changes. However, there is an essential difference between events and events: events are triggered synchronously, that is, events are triggered immediately when DOM changes; MutationObserver is triggered asynchronously, and DOM is not triggered immediately after a change, but not until all current DOM operations are completed.

For example, if you insert 1000 paragraphs (p element) in a row in a document, 1000 insert events will be triggered in a row, and the callback function for each event will be executed, which is likely to cause stutter in the browser; while MutationObserver is completely different, it will only be triggered after 1000 paragraphs are inserted, and only once, which reduces the frequent changes in DOM and greatly improves performance.

IntersectionObserver

When developing a web page, you often need to know whether an element has entered the "viewport", that is, whether the user can see it.

The traditional method is to monitor the scroll event, call the getBoundingClientRect () method of the target element, get its coordinates corresponding to the upper-left corner of the viewport, and then determine whether it is in the viewport or not. The disadvantage of this method is that due to the intensive occurrence of scroll events, the amount of computation is very large, which is easy to cause performance problems.

There is a new IntersectionObserver API that automatically "observes" whether the element is visible, which is already supported by Chrome 51 +. Because the essence of the visible (visible) is that the target element creates an intersection with the viewport, this API is called a "cross viewer".

API

IntersectionObserver is a constructor provided natively by the browser and accepts two parameters: callback is the callback function when visibility changes, and option is the configuration object (this parameter is optional).

Var io = new IntersectionObserver (callback, option) / / start watching io.observe (document.getElementById ('example')) / / stop observing io.unobserve (element) / / close observer io.disconnect ()

If you want to observe multiple nodes, call this method multiple times.

Io.observe (elementA) io.observe (elementB)

When the visibility of the target element changes, the viewer's callback function callback is called. Callback is usually triggered twice. Once the target element has just entered the viewport (visible at first), and the other time it leaves the viewport completely (invisible at first).

Var io = new IntersectionObserver ((entries) = > {console.log (entries)})

The parameter (entries) of the callback function is an array, and each member is an IntersectionObserverEntry object. For example, if the visibility of two objects being observed changes at the same time, the entries array will have two members.

Time: the time when visibility changes, which is a high-precision timestamp in milliseconds

Target: the observed target element, which is a DOM node object

IsIntersecting: whether the target is visible

RootBounds: information about the rectangular area of the root element, the return value of the getBoundingClientRect () method, or null if there is no root element (that is, scrolling directly relative to the viewport)

BoundingClientRect: information about the rectangular area of the target element

IntersectionRect: information about the intersection of the target element and the viewport (or root element)

IntersectionRatio: the visible ratio of the target element, that is, the ratio of intersectionRect to boundingClientRect, is 1 when it is fully visible, and less than or equal to 0 when it is completely invisible

For example, Document # div1 {position: sticky; top: 0; height: 50px; line-height: 50px; text-align: center; background: black; color: # ffffff; font-size: 18px } Home var div2 = document.getElementById ('div2') let observer = new IntersectionObserver (function (entries) {entries.forEach (function (element)) Index) {console.log (element) if (element.isIntersecting) {div1.innerText ='I'm out'} else {div1.innerText = 'homepage'})}, {root: null, threshold: [0 1]}) observer.observe (div2)

Compared with getBoundingClientRect, its advantage is that it does not cause redrawing backflow.

Picture lazy load

The principle of picture lazy loading is mainly realized by the core logic of judging whether the current picture has reached the visual area. This can save bandwidth and improve the performance of web pages. The traditional breakthrough of lazy loading is achieved by listening to scroll events, but scroll events will be triggered many times in a very short time, seriously affecting page performance. To improve page performance, we can use IntersectionObserver to load images lazily.

Const imgs = document.querySelectorAll ('IMG [data-src]') const config = {rootMargin: '0pxrabbit, threshold: 0} let observer = new IntersectionObserver ((entries) Self) = > {entries.forEach ((entry) = > {if (entry.isIntersecting) {let img = entry.target let src = img.dataset.src if (src) {img.src = src img.removeAttribute ('data-src')} / / unobserve self.unobserve (entry.target)})}, config) imgs.forEach ((image) = > {observer.observe (image)}) unlimited scrolling

The implementation of infinite scrolling (infinite scroll) is also simple.

Var intersectionObserver = new IntersectionObserver (function (entries) {/ / if not visible, return if (entries [0] .intersectionRatio 0) {return true} else if (top > = se | | bottom

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.