浏览器的五种ObserverIntersectionObserver 用于监听一个元素和可视区域的相交比例，达到某个阈值

IntersectionObserver

用于监听一个元素和可视区域的相交比例，达到某个阈值的时候触发回调。

    const observer = new IntersectionObserver((entries)=>{
        entries.forEarch(item=>{
            console.log(item.target,item.intersectionRation)
        })
    })
    
   observer.observe(document.querySelector('#img'))

MutationObserver

用于监听元素属性的修改、对它子节点的增删改查

const observer = new MutationObserver((mutationsList,observer)=>{
        // 监听回调 
        console.log(mutationsList, observer);
 })
 
 observer.observe(elem,{attributes:true})

ResizeObserver

用于监听元素的大小改变，当width、height被修改时会被触发回调。

    const observer = new ResizeObserver(entries=>{
        console.log('当前大小',entries)
    })
    observer.observe(elem)

PerformanceObserver

用于监听记录perdormance数据行为，一旦记录了就会触发回调。

    // 记录某个时间节点
    performance.mark('registered-observer')
    
    // 记录某个时间段
    performance.measure('button clicked','form','to')
    
    cosnt observer = new PerformanceObserver(list=>{
        list.getEntries().forEarch(entry=>{
            console.log(entry)
           
        })
    })

ReportObserver

监听一个普通的js对象的变化可以用Object.defineProperty or Proxy 监听窗口变化可以用addEventListener监听resize