视口之外不渲染IntersectionObserver 懒加载与组件卸载回收一、长页面首屏之痛全量加载的隐性代价某内容聚合平台做过一次复盘。首页图文流加载 47 张图首屏 LCP 5.8 秒移动端跳出率 38%。定位时发现47 张图全部在 DOM 加载阶段发起请求浏览器并发上限是 6剩下的 41 张在队列里排队把首屏 hero 图也堵在后面。用户最关心的头图反而最晚出现。这事我见过太多团队栽进去——把图片列表当数组渲染img 标签一次性全挂上。每多挂一张浏览器就要分配解码任务、占内存、抢网络槽位。屏幕外的图占了首屏资源屏幕内的图反而拿不到。更隐蔽的是重型组件的成本。某运营后台首页挂了 8 个图表组件每个都跑 ECharts init。哪怕用户只看了前两个后六个还是全量初始化、绑定 resize 监听、占内存。低端机直接 OOM。按需加载是这些问题的工程化解法。IntersectionObserver 把渲染时机从 DOM 挂载推迟到进入视口。让首屏只承担首屏的代价。但它的配置项与生命周期管理有不少坑本文把这些坑讲清楚。二、视口观察机制root、rootMargin 与 threshold 的语义IntersectionObserver 的核心是异步观察。它跟踪目标元素与根容器的相交状态。浏览器在内部维护一个观察列表只在布局变化时计算相交矩形把回调放进微任务队列。这比 scroll 事件里手写位置计算高效得多。后者每次滚动都强制同步布局是经典的布局抖动来源。三个关键配置项决定触发时机。root指定参考容器默认是浏览器视口。指定为某个滚动容器时观察范围就局限在该容器内。rootMargin是参考矩形的向外扩张量类似 CSS margin常用200px来提前加载。目标距离视口 200 像素时就触发避免用户滚到了才加载的卡顿感。threshold是相交比例阈值。0 表示刚进入就触发1 表示完全进入才触发常用于渐进式动画。懒加载组件的卸载回收也至关重要。重型组件如图表、视频播放器滚出视口后应主动 unobserve 并销毁实例释放内存。某监控大屏曾未做卸载回收用户滚了 20 屏后内存涨到 1.2GB浏览器直接卡死。但卸载也有代价用户来回滚动会触发反复加载。要配合加载后稳定策略。一旦加载过就保持挂载仅对极重型组件做卸载回收。与虚拟列表的配合是另一个工程细节。虚拟列表通过 DOM 复用减少节点数IntersectionObserver 在这种场景下要小心。列表项会被复用observe 的目标元素会变化。正确做法是在列表项的 effect 里挂载观察并在 cleanup 里 unobserve避免观察悬空到旧 DOM。SSR 场景必须兜底。服务端没有 IntersectionObserver直接调用会报错。要在 hydration 完成后再创建观察器并对不支持 IO 的旧浏览器降级到直接加载。三、生产级代码通用懒加载组件含 SSR 兜底下面给出一个 React 通用懒加载组件。它兼容 SSR降级旧浏览器并支持离屏卸载回收。import { useEffect, useRef, useState, type ReactNode } from react; interface LazyRenderProps { // 支持函数形式避免未加载也构造重型组件实例 children: ReactNode | (() ReactNode); fallback?: ReactNode; // 占位 UI rootMargin?: string; // 提前加载距离默认 200px threshold?: number; // 相交比例阈值 unmountWhenOut?: boolean; // 滚出视口是否卸载重型组件用 placeholderHeight?: number; // 占位高度防止布局抖动 } // 通用懒加载组件兼容 SSR降级旧浏览器支持离屏卸载 export function LazyRender({ children, fallback null, rootMargin 200px, threshold 0, unmountWhenOut false, placeholderHeight 200, }: LazyRenderProps) { const ref useRefHTMLDivElement(null); const [visible, setVisible] useState(false); // 离屏观察器仅在 unmountWhenOut 时启用 const unobserveRef useRefIntersectionObserver | null(null); useEffect(() { const el ref.current; if (!el) return; // SSR 与旧浏览器兜底直接加载避免白屏 if (typeof IntersectionObserver undefined) { setVisible(true); return; } const io new IntersectionObserver( (entries) { // 仅处理目标元素自身的相交变化过滤回调中的其他 entries const entry entries.find((e) e.target el); if (!entry) return; if (entry.isIntersecting) { setVisible(true); // 加载后停止观察避免重复触发 io.unobserve(el); // 注册离屏观察用于重型组件的卸载回收 if (unmountWhenOut) { unobserveRef.current new IntersectionObserver( (outEntries) { const out outEntries.find((e) e.target el); if (!out) return; if (!out.isIntersecting) { setVisible(false); // 卸载真实组件释放内存 } else { setVisible(true); // 重新进入视口重新加载 } }, { rootMargin: 0px, threshold: 0 } ); unobserveRef.current.observe(el); } } }, { rootMargin, threshold } ); io.observe(el); return () { // cleanup 必须显式断开两个观察器防止悬空到复用 DOM io.disconnect(); unobserveRef.current?.disconnect(); unobserveRef.current null; }; }, [rootMargin, threshold, unmountWhenOut]); return ( div ref{ref} style{{ minHeight: placeholderHeight }} {/* 未加载时返回占位避免重型组件在未可见时也构造实例 */} {visible ? (typeof children function ? (children as () ReactNode)() : children) : fallback} /div ); }使用示例// 图片懒加载保持挂载不启用离屏卸载 LazyRender placeholderHeight{300} fallback{div classNameskeleton /} img src/heavy.jpg alt loadinglazy / /LazyRender // 重型图表组件懒加载 离屏卸载回收 LazyRender unmountWhenOut placeholderHeight{400} fallback{ChartSkeleton /} rootMargin100px {() HeavyChart data{chartData} /} /LazyRender关键点三处。其一children 支持函数形式未加载时不构造重型组件实例。其二SSR 与旧浏览器降级到直接加载保证可访问性。其三离屏卸载仅对极重型组件启用普通组件保持挂载避免反复加载。四、边界分析占位高度的代价与离屏卸载的反噬懒加载不是无损。占位高度会改变页面布局影响滚动条位置与文档总高度。若占位高度与实际高度差距大用户滚动时会出现跳页现象。某商品流曾用 0 占位高度结果滚到中部时整个页面突然向上跳 300 像素。用户以为是 bug 反馈了一周。rootMargin 的提前量也要克制。200 像素看似合理但在长页面下意味着同时有 10 到 20 个目标处于即将进入状态。全部触发加载会让首屏资源再次被抢。对图片密集场景rootMargin 应压到 50 到 100 像素。离屏卸载有反噬。用户快速滚动时组件会反复加载卸载每次都重新初始化。某图表组件因此每次重入视口都跑 200 毫秒 init反而比保持挂载更卡。离屏卸载只适合内存占用极大大于 50MB的组件且要配合加载一次后保持挂载 N 秒的稳定窗口。与虚拟列表配合时要警惕观察悬空。虚拟列表复用 DOM 节点IntersectionObserver 绑定的元素会被换给其他数据项。必须在 effect cleanup 里显式 unobserve否则会出现数据项 A 进入视口却触发了数据项 B 的加载的错乱。threshold 配置也容易踩坑。配 1 时若目标元素比 root 还高永远不会完全进入视口回调永远不触发。配 0.5 时目标大于两倍视口也会卡住。经验是默认用 0只在确有渐进动画需求时才调高。适用边界长页面、图片密集、重型组件分散的场景收益最高。短页面、首屏即全部可见的场景懒加载反而是负优化。多一层观察器开销无任何收益。五、总结懒加载的核心是把渲染时机与 DOM 挂载解耦让首屏只承担首屏的代价。落地建议第一rootMargin 控制在 50 到 200 像素提前量过大会让首屏资源再次被抢。第二占位高度必须接近真实高度避免滚动跳页。第三重型组件支持离屏卸载但要配稳定窗口避免反复加载。第四与虚拟列表配合时effect cleanup 必须显式 unobserve。防止观察悬空。第五SSR 与旧浏览器降级到直接加载保证可访问性。最终在首屏性能、内存占用与滚动稳定性之间取得平衡。这条路在百屏级长页面下能跑通回报是值得的。
视口之外不渲染：IntersectionObserver 懒加载与组件卸载回收
视口之外不渲染IntersectionObserver 懒加载与组件卸载回收一、长页面首屏之痛全量加载的隐性代价某内容聚合平台做过一次复盘。首页图文流加载 47 张图首屏 LCP 5.8 秒移动端跳出率 38%。定位时发现47 张图全部在 DOM 加载阶段发起请求浏览器并发上限是 6剩下的 41 张在队列里排队把首屏 hero 图也堵在后面。用户最关心的头图反而最晚出现。这事我见过太多团队栽进去——把图片列表当数组渲染img 标签一次性全挂上。每多挂一张浏览器就要分配解码任务、占内存、抢网络槽位。屏幕外的图占了首屏资源屏幕内的图反而拿不到。更隐蔽的是重型组件的成本。某运营后台首页挂了 8 个图表组件每个都跑 ECharts init。哪怕用户只看了前两个后六个还是全量初始化、绑定 resize 监听、占内存。低端机直接 OOM。按需加载是这些问题的工程化解法。IntersectionObserver 把渲染时机从 DOM 挂载推迟到进入视口。让首屏只承担首屏的代价。但它的配置项与生命周期管理有不少坑本文把这些坑讲清楚。二、视口观察机制root、rootMargin 与 threshold 的语义IntersectionObserver 的核心是异步观察。它跟踪目标元素与根容器的相交状态。浏览器在内部维护一个观察列表只在布局变化时计算相交矩形把回调放进微任务队列。这比 scroll 事件里手写位置计算高效得多。后者每次滚动都强制同步布局是经典的布局抖动来源。三个关键配置项决定触发时机。root指定参考容器默认是浏览器视口。指定为某个滚动容器时观察范围就局限在该容器内。rootMargin是参考矩形的向外扩张量类似 CSS margin常用200px来提前加载。目标距离视口 200 像素时就触发避免用户滚到了才加载的卡顿感。threshold是相交比例阈值。0 表示刚进入就触发1 表示完全进入才触发常用于渐进式动画。懒加载组件的卸载回收也至关重要。重型组件如图表、视频播放器滚出视口后应主动 unobserve 并销毁实例释放内存。某监控大屏曾未做卸载回收用户滚了 20 屏后内存涨到 1.2GB浏览器直接卡死。但卸载也有代价用户来回滚动会触发反复加载。要配合加载后稳定策略。一旦加载过就保持挂载仅对极重型组件做卸载回收。与虚拟列表的配合是另一个工程细节。虚拟列表通过 DOM 复用减少节点数IntersectionObserver 在这种场景下要小心。列表项会被复用observe 的目标元素会变化。正确做法是在列表项的 effect 里挂载观察并在 cleanup 里 unobserve避免观察悬空到旧 DOM。SSR 场景必须兜底。服务端没有 IntersectionObserver直接调用会报错。要在 hydration 完成后再创建观察器并对不支持 IO 的旧浏览器降级到直接加载。三、生产级代码通用懒加载组件含 SSR 兜底下面给出一个 React 通用懒加载组件。它兼容 SSR降级旧浏览器并支持离屏卸载回收。import { useEffect, useRef, useState, type ReactNode } from react; interface LazyRenderProps { // 支持函数形式避免未加载也构造重型组件实例 children: ReactNode | (() ReactNode); fallback?: ReactNode; // 占位 UI rootMargin?: string; // 提前加载距离默认 200px threshold?: number; // 相交比例阈值 unmountWhenOut?: boolean; // 滚出视口是否卸载重型组件用 placeholderHeight?: number; // 占位高度防止布局抖动 } // 通用懒加载组件兼容 SSR降级旧浏览器支持离屏卸载 export function LazyRender({ children, fallback null, rootMargin 200px, threshold 0, unmountWhenOut false, placeholderHeight 200, }: LazyRenderProps) { const ref useRefHTMLDivElement(null); const [visible, setVisible] useState(false); // 离屏观察器仅在 unmountWhenOut 时启用 const unobserveRef useRefIntersectionObserver | null(null); useEffect(() { const el ref.current; if (!el) return; // SSR 与旧浏览器兜底直接加载避免白屏 if (typeof IntersectionObserver undefined) { setVisible(true); return; } const io new IntersectionObserver( (entries) { // 仅处理目标元素自身的相交变化过滤回调中的其他 entries const entry entries.find((e) e.target el); if (!entry) return; if (entry.isIntersecting) { setVisible(true); // 加载后停止观察避免重复触发 io.unobserve(el); // 注册离屏观察用于重型组件的卸载回收 if (unmountWhenOut) { unobserveRef.current new IntersectionObserver( (outEntries) { const out outEntries.find((e) e.target el); if (!out) return; if (!out.isIntersecting) { setVisible(false); // 卸载真实组件释放内存 } else { setVisible(true); // 重新进入视口重新加载 } }, { rootMargin: 0px, threshold: 0 } ); unobserveRef.current.observe(el); } } }, { rootMargin, threshold } ); io.observe(el); return () { // cleanup 必须显式断开两个观察器防止悬空到复用 DOM io.disconnect(); unobserveRef.current?.disconnect(); unobserveRef.current null; }; }, [rootMargin, threshold, unmountWhenOut]); return ( div ref{ref} style{{ minHeight: placeholderHeight }} {/* 未加载时返回占位避免重型组件在未可见时也构造实例 */} {visible ? (typeof children function ? (children as () ReactNode)() : children) : fallback} /div ); }使用示例// 图片懒加载保持挂载不启用离屏卸载 LazyRender placeholderHeight{300} fallback{div classNameskeleton /} img src/heavy.jpg alt loadinglazy / /LazyRender // 重型图表组件懒加载 离屏卸载回收 LazyRender unmountWhenOut placeholderHeight{400} fallback{ChartSkeleton /} rootMargin100px {() HeavyChart data{chartData} /} /LazyRender关键点三处。其一children 支持函数形式未加载时不构造重型组件实例。其二SSR 与旧浏览器降级到直接加载保证可访问性。其三离屏卸载仅对极重型组件启用普通组件保持挂载避免反复加载。四、边界分析占位高度的代价与离屏卸载的反噬懒加载不是无损。占位高度会改变页面布局影响滚动条位置与文档总高度。若占位高度与实际高度差距大用户滚动时会出现跳页现象。某商品流曾用 0 占位高度结果滚到中部时整个页面突然向上跳 300 像素。用户以为是 bug 反馈了一周。rootMargin 的提前量也要克制。200 像素看似合理但在长页面下意味着同时有 10 到 20 个目标处于即将进入状态。全部触发加载会让首屏资源再次被抢。对图片密集场景rootMargin 应压到 50 到 100 像素。离屏卸载有反噬。用户快速滚动时组件会反复加载卸载每次都重新初始化。某图表组件因此每次重入视口都跑 200 毫秒 init反而比保持挂载更卡。离屏卸载只适合内存占用极大大于 50MB的组件且要配合加载一次后保持挂载 N 秒的稳定窗口。与虚拟列表配合时要警惕观察悬空。虚拟列表复用 DOM 节点IntersectionObserver 绑定的元素会被换给其他数据项。必须在 effect cleanup 里显式 unobserve否则会出现数据项 A 进入视口却触发了数据项 B 的加载的错乱。threshold 配置也容易踩坑。配 1 时若目标元素比 root 还高永远不会完全进入视口回调永远不触发。配 0.5 时目标大于两倍视口也会卡住。经验是默认用 0只在确有渐进动画需求时才调高。适用边界长页面、图片密集、重型组件分散的场景收益最高。短页面、首屏即全部可见的场景懒加载反而是负优化。多一层观察器开销无任何收益。五、总结懒加载的核心是把渲染时机与 DOM 挂载解耦让首屏只承担首屏的代价。落地建议第一rootMargin 控制在 50 到 200 像素提前量过大会让首屏资源再次被抢。第二占位高度必须接近真实高度避免滚动跳页。第三重型组件支持离屏卸载但要配稳定窗口避免反复加载。第四与虚拟列表配合时effect cleanup 必须显式 unobserve。防止观察悬空。第五SSR 与旧浏览器降级到直接加载保证可访问性。最终在首屏性能、内存占用与滚动稳定性之间取得平衡。这条路在百屏级长页面下能跑通回报是值得的。
