• MutationObserver
  用于監(jiān)控DOM節(jié)點(diǎn)的變化，如 屬性變化、子節(jié)點(diǎn)增刪改、子樹的變化等

// 1、選擇需要觀察變動(dòng)的節(jié)點(diǎn)
const targetNode = document.getElementById('some-id');

// 2、觀察器的配置（需要觀察什么變動(dòng)）
const config = { attributes: true, childList: true, subtree: true };

// 3、當(dāng)觀察到變動(dòng)時(shí)執(zhí)行的回調(diào)函數(shù)
const callback = function(mutationsList, observer) {
    for(let 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.');
        }
    }
};

// 4、創(chuàng)建一個(gè)觀察器實(shí)例并傳入回調(diào)函數(shù)
const observer = new MutationObserver(callback);

// 5、以上述配置開始觀察目標(biāo)節(jié)點(diǎn)
observer.observe(targetNode, config);

// 6、之后，可停止觀察
observer.disconnect();

• IntersectionObserver
  目標(biāo)A是否與目標(biāo)B相交

// 圖片懶加載的例子
function callback(entry) {
  if(entry[0].isIntersecting) {   // 出現(xiàn)在可視區(qū)內(nèi)(默認(rèn) viewport)
    entry[0].target.src = entry[0].target.dataset.src;
    observer.unobserve(entry[0].target);
  }
}

var observer = new IntersectionObserver(callback); // 這里可以指定第二個(gè)參數(shù)做些定制化配置

var img = document.getElementById('img');

observer.observe(img);

詳細(xì)解釋：https://letswrite.tw/intersection-oserver-basic/

• ResizeObserver
  專門用來觀察DOM元素的尺寸是否發(fā)生了變化，不光是窗體resize

var ro = new ResizeObserver( entries => {
  for (let entry of entries) {
    const cr = entry.contentRect;
    console.log('Element:', entry.target);
    console.log(`Element size: ${cr.width}px x ${cr.height}px`);
    console.log(`Element padding: ${cr.top}px ; ${cr.left}px`);
  }
});

// 觀察一個(gè)或多個(gè)元素
ro.observe(eleZxx);

注意：觀測(cè)的是 contentRect，只有 content 改變（margin,padding不行）才會(huì)觸發(fā)回調(diào)
用途：1、原生resize行為的檢測(cè)，如 textarea 的拉升
2、 感知交互行為的發(fā)生（無埋點(diǎn)方案？）
3、感知元素是否顯示或隱藏（MutationObserver 有時(shí)做不到）
詳情：https://www.zhangxinxu.com/wordpress/2020/03/dom-resize-api-resizeobserver/