浏览器的5种Observer

IntersectionObserver

监听一个元素和可视区域相交部分的比例，然后再可视比例达到某个阀值的时候触发回调

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1,
        #box2 {
            width: 100px;
            height: 100px;
            background: blue;
            color: #fff;
            position: relative;
        }

        #box1 {
            top: 500px;
        }

        #box2 {
            top: 800px;
        }
    </style>
</head>

<body>
    <div id="box1">BOX11</div>
    <div id="box2">BOX22</div>
    <script>
        // 监听一个元素和可视区域相交部分的比例，然后再可视比例达到某个阀值的时候触发回调
        const intersectionObserver = new IntersectionObserver(
            function (entries) {
                console.log('info')
                entries.forEach(item => {
                    console.log(item.target, item.intersectionRatio)
                })
            }, {
            threshold: [0.5, 1]
        }
        )
        intersectionObserver.observe(document.querySelector('#box1'))
        // intersectionObserver.observe(document.querySelector('#box2'))
    </script>
</body>

</html>

MutationObserver

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background: blue;
            position: relative;
        }
    </style>
</head>
<body>
    <div id="box">
        <button>光</button>
    </div>
    <script>
        // 监听对元素的属性的修改、对它的子节点的增删改
        setTimeout(() => {
            box.style.background = 'pink'
        }, 2000)
        setTimeout(() => {
            const dom = document.createElement('button')
            dom.textContent = 'blog'
            box.appendChild(dom)
        }, 3000)
        setTimeout(() => {
            document.querySelectorAll('button')[0].remove()
        }, 5000)
        const mutationObserver = new MutationObserver((mutationsList) => {
            console.log(mutationsList)
        })
        mutationObserver.observe(box, {
            attributes: true,
            childList: true
        })
    </script>
</body>
</html>

ResizeObserver

监听大小的改变,当 width 、height 被修改时会触发回调

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        // 监听大小的改变,当width、height被修改时会触发回调
        const box = document.querySelector('#box')
        setTimeout(() => {
            box.style.width = '200px'
        }, 2000)
        const resizeObserver = new ResizeObserver(entries => {
            console.log('当前', entries)
        })
        resizeObserver.observe(box)
    </script>
</body>
</html>

PerformanceObserver

用于监听记录 performance 数据的行为,一旦记录了就会触发回调

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick="measureClick()">Measure</button>
    <img src="https://cloudneedle-tv.oss-cn-hangzhou.aliyuncs.com/hs_tv/hs_logo/hslogo.png" />
    <script>
        // 用于监听记录performance数据的行为,一旦记录了就会触发回调
        const performanceObserver = new PerformanceObserver(list => {
            list.getEntries().forEach(entry => {
                console.log(entry)
            })
        })
        performanceObserver.observe({entryTypes: ['resource', 'mark', 'measure']})
        // 用mark方法记录某个时间点
        performance.mark('registered-observer')
        function measureClick () {
            // 用measure方法记录某个时间段
            performance.measure('button clicked')
        }
    </script>
</body>
</html>

ReportingObserver

监听过时的 api 、浏览器的一些干预行为的报告

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>测试</button>
    <script>
        // 监听过时的api、浏览器的一些干预行为的报告
        const reportingObserver = new ReportingObserver((reports, observer) => {
            for (const report of reports) {
                // 上报
                console.log(report.body)
            }
        }, {types: ['intervention', 'deprecation']})
        reportingObserver.observe()
    </script>
</body>
</html>

参考

Previous浏览器宏任务和微任务 Next深入理解赋值、浅拷贝、深拷贝

Last updated 1 year ago

Was this helpful?