关于ResizeObserver，你还可以这样做性能优化...

先说说ResizeObserver

ResizeObserver的作用主要是用来监听DOM元素的尺寸变化，在这个API还没有诞生时，通常需要通过CSS媒体查询，或者通过window上的resize事件间接监听整个视窗的变化。

但在有些情况下，视窗尺寸的改变不一定导致监测元素尺寸的变化，或者，监测元素尺寸的变化并不由视窗尺寸元素的变化导致。例如，自身支持resize的元素在响应式布局中影响其他元素，支持动态增删改的列表也会导致父元素的尺寸变化。这种时候，监听视窗的尺寸变化，不仅浪费性能，还有可能起不到想要的监听效果。

ResizeObserver可以做到，不管什么层级的DOM元素，调用它的observer方法，即可精准监听尺寸变化。不用再去憨憨地监听整个视窗的变化了。

同时，这也是一种无侵入的观察方式，可以在完全不影响目标元素业务逻辑的同时，嵌入需要响应变化的功能逻辑，例如发送埋点数据。减轻了开发者的心智负担和维护成本。

目前基本是现代浏览器全线支持：

ResizeObserver的基本使用

ResizeObserver本身是一个构造函数，通过调用它创建一个实例。

同时需要传给它一个callback，在callback中写好当目标元素尺寸发生变化时，需要相响应的逻辑。

callback本身接收一个变化对象数组参数，每个对象中包含了尺寸变化的相关信息。

const observer = new ResizeObserver(callback);

function callback(entries){
    for(const entry of entries){
        const rect = entry.contentRect;
        // ...
    }
}

其中，entry.contentRect返回的是一个DOMRect对象，其中包含了目标元素的x, y, width, height, top, bottom, left, right等属性。

ResizeObserver有三个方法，observe(),unobserve(),disconnect(),分别对应了开始监听，结束监听，以及取消所有对目标元素的的监听。

// 获取目标元素
const ele = document.getElementsByClassName('list-item');
// 开始监听
observer.observe(ele);
// 结束监听
observer.unobserve(ele);
// 取消监听所有目标元素
observer.disconnect();

通常，在完成监听功能后，我们需要及时调用unobserve(),disconnect()方法，防止产生内存泄漏问题。

全局唯一实例的性能优化

其实，ResizeObserver的诞生，相较于MutationObserver以及传统的resize事件，本身就是高效的尺寸变化监测。它的精准性避免了很多不必要的性能开销。

但在最近的一个项目中，由于业务需求，需要通过ResizeObserver监听动态列表项高度，将它加在了一个长列表的每一项。由于每一项都是一个单独的组件，每个组件都拥有自己的 ResizeObserver 实例，这意味着浏览器会为每个实例分配内存和处理事件。当页面上有大量组件时，会对性能产生相当程度的影响。

细心的读者应该发现了，每个ResizeObserver实例是可以同时监听多个目标元素的，那么借鉴单例模式的思想，尝试封装一个全局的ResizeObserver，限制整个项目只有一个实例。在需要调用的地方直接GlobalResizeObserver.observe()!话不多说，上代码：

export const GlobalResizeObserver = (function() {  
    const ATTR_NAME = 'global-resizeobserver-key';  

    const attrValueToCallback = {};  

    const o = new ResizeObserver((entries) => {  
        for (const entry of entries) {  
            const resizedElement = entry.target;  
            const attrValue = resizedElement.getAttribute(ATTR_NAME);  
            if (attrValue) {  
                const callback = attrValueToCallback[attrValue];  
                if (typeof callback === 'function') {  
                    callback(entry);  
                }  
            }  
        }  
    });  
  
    return Object.freeze({  
        /**  
        * @param { Element } element  
        * @param { (ResizeObserverEntry) => {} } callback  
        */  
        observe(element, callback) {  
            if (!(element instanceof Element)) {  
                console.error('GlobalResizeObserver, cannot observe non-Element.');  
                return;  
            }  

            let attrValue = element.getAttribute(ATTR_NAME);  
            if (!attrValue) {  
                attrValue = String(Math.random());  
                element.setAttribute(ATTR_NAME, attrValue);  
            }  

            attrValueToCallback[attrValue] = callback;  
            o.observe(element);  
        },  

        /**  
        * @param { Element } element  
        */  
        unobserve(element) {  
            if (!(element instanceof Element)) {  
                console.error('GlobalResizeObserver cannot unobserve non-Element.');  
                return;  
            }  
            const attrValue = element.getAttribute(ATTR_NAME);  
            if (!attrValue) {  
                console.error('GlobalResizeObserver cannot unobserve element w/o ATTR_NAME.'); 
                return;  
            }  
            delete attrValueToCallback[attrValue];  
            o.unobserve(element);  
        }
    });  
})();

主要思路是通过JS的闭包特性，构建对象保存每个被监听元素对应的callback。

通过构建全局唯一的ResizeObserver实例，页面的fps, Response Time, CPU Usage, Memory Consumption, Event Handling等性能指标都有了提升！

当然，如果监听的目标元素足够多，相应的给callback函数加上防抖节流也是很有必要的，毕竟前端页面性能直接关乎用户体验的好坏。

在React中的使用

不管是原生的生成实例用法，还是封装全局唯一实例，在React中的使用应该不存在什么最佳实践，仁者见仁，智者见智。这里仅介绍一种回调ref的做法，供大家参考。

import React, { useCallback } from 'react';
import { GlobalResizeObserver } from 'global-resize-observer';

export const component = () => {
    const callbackRef = useCallback((node) => {  
        if (!node) {  
            GlobalResizeObserver.unobserve(node);  
            return;  
        }          
        GlobalResizeObserver.observe(node, (entry) => {  
            // 响应逻辑...  
        });  
    }, []);
    
    return <div ref={callbackRef}></div>
}

callbackRef会将当前ref的值作为函数入参传入，并通过useCallback封装，并且依赖数组为[]，所以callbackRef会在组件初始化和卸载阶段被调用，执行绑定和解绑逻辑，不失为一种优雅调用方法～

有类似场景的同学不妨给自己的项目封装一个试试吧！