前端圈一年365天天天出新框架。但真正能让你少写代码、少引依赖、少踩性能坑的，其实是浏览器爸爸早已偷偷内置的「原生」。话说回来，下面把几款「神级」JS API 重新梳理一遍。直接对接你在实际项目中常见的痛点，让你写更少、跑得更快、卡得更少。

. ResizeObserver

ResizeObserver 用来监听 DOM 元素尺寸变化解决了「窗口 resize 只能捕获视口变化」还有「频繁手动计算元素宽高导致布局抖动」的老问题。

🧩 基本用法

const resizeObserver = new ResizeObserver(entries => {
for {
const { width,height } = entry.contentRect;console.log，console.log;}
})，resizeObserver.observe);怎么说呢，

📦 entry.contentRect vs getBoundingClientRect

• entry.contentRect仅返回内容区域相当于 getComputedStyle.width/height。按理说，
• 若需要包含边框和内边距。可结合 entry.target.getBoundingClientRect 使用。

🛑 停止观察

// 停止观察单个元素
resizeObserver.unobserve;// 停止所有并释放资源
resizeObserver.disconnect;

✅ 使用场景

1. 响应式组件：容器尺寸变化时自动调整图表、Canvas 或视频大小，省去手动监听 window.resize 的繁琐。
2. 自定义滚动条或布局：内容区域变动即更新 UI，防止滚动条错位。
3. 替代 window.onresize：只关注特定元素，提高性能。
4. Web Components / 封装组件：

🌐 浏览器兼容性

• ✅ Chrome +
• ✅ Firefox +
• ✅ Safari +
• ✅ Edge +
• ❌ IE

🛠️ Polyfill

If you need IE support:

npm install @juggle/resize-observer

import ResizeObserver from '@juggle/resize-observer';if {
window.ResizeObserver = ResizeObserver;}

Simplified React 示例

import { useEffect,useRef } from 'react';function MyComponent {
const ref = useRef;useEffect => {
const observer = new ResizeObserver(entries => {
for {
console.log;}
})，if observer.observe;return => observer.disconnect;},)，return 

可变尺寸容器
}

---

. IntersectionObserver

IntersectionObserver 用来"滚动抖动 + 性能低下"。它比手写 throttle+getBoundingClientRect 更省心、更高效。

const observer = new IntersectionObserver => {
entries.forEach(entry => {
if {
console.log;// 如懒加载图片、触发动画…} else {
console.log;}
})，});observer.observe);

⚡ 配置选项

const options = {
从root来看。null,// 默认视口，可指定祖先元素
rootMargin: '0px',// 类似 CSS margin，可正负
根边界
threshold: // 不同相交比例触发回调
};老实说，new IntersectionObserver;怎么说呢，

`threshold` 示例：

• `threshold: 0` – 任意一点进入即触发。
• `threshold: 1` – 完全进入才触发。
• `threshold: ` – 在这些比例点分别回调。

🚫 停止观察 & 清理资源

observer.unobserve;// 单个
observer.disconnect;// 全部并释放资源
// 在 React/Vue 的卸载钩子里调用。防止内存泄漏

✅ 常见使用场景

• P1 – 图片懒加载：
• P2 – 无限滚动：
• P3 – 曝光埋点 / 广告可见性统计：P4 – 滚动动画： 进入视口后添加 CSS 动画类，实现“只看一次”的炫酷效果。

P1 示例代码:

const imgObs = new IntersectionObserver( entries=>{ entries .forEach( entry=>{ if{ const img=entry .target;img .src = img .dataset .src;// 从 data‑src 加载真实图片 imgObs .unobserve; } } )，} );document .querySelectorAll.forEach( img=>{ imgObs .observe;} )，老实说，

P2 示例代码:

const sentinel = document .querySelector;const sentinelObs = new IntersectionObserver( entries=>{
if{
loadMore;// 拉取下一页数据
}
});sentinelObs .observe;

P5的观点是，暴露埋点示例：

const adObs= new IntersectionObserver(entries=>{
entries.forEach(e=>{
if{
reportImpression;adObs.unobserve;}
})，});document.querySelectorAll.forEach);

再看小技巧。使用 rootMargin:'100px' 可提前触发懒加载，让使用者几乎感受不到延迟。

---

. Page Visibility API

` Page Visibility API ` 用来检测页面是否处于前台或后台。它帮助我们 **避免在使用者切到别的标签页时仍继续执行耗电任务**——例如暂停视频播放、停止轮询或统计停留时间。

🧩 主要属性与事件

• ` document.visibilityState `：返回 `'visible'` 或 `'hidden'` 等状态。大多数业务只关心这两种，
• ` visibilitychange `：当状态改变时触发。配合 `addEventListener` 使用即可。老实说，
• ` document.hidden ` 已废弃。不建议使用，其实，

✅ 基本用法示例

 function handleVisibilityChange{
if{
console.log;// 恢复视频播放、重启轮询…} else {
console.log;// 暂停视频、停止轮询…其实，} }
document.addEventListener;

🌟 场景化痛点方法

• P1 — 视频/音频自动暂停/恢复： 当使用者切到别的标签页时避免后台继续消耗流量和电量。不过，
• P2 — 停止无意义轮询或定时任务： 防止后端接口被无效请求刷爆。节省服务器成本，
• P3 — 使用者停留时长统计： 精准记录真实可见时间，用于分析转化率或广告计费。

---

. Web Share API

Web Share API ` 能让网页直接调起程序原生分享面板。无需集成微信、微博等第三方 SDK，实现“一键分享”。话说回来，这是对“每次都要写复制链接弹窗”痛点的根本方法。

✅ 基本用法

 if{
navigator.share({
title的观点是。'分享标题',text:'分享描述文字',url:'https://example.com'
})
.n=>console.log)
.catch(err=>{
if{
console.log;}else{
console.error;}
})，}else{ alert;}

🔐 安全与限制

• HTTPS 必须：。未加密环境会被禁用，
• 使用者手势要求：。不能放在页面 load 时直接执行。其实，
• 参数非全部必填。但至少提供一个，推荐提供 url，以确保程序能生成有效链接。
• 无法指定目标应用，只能让程序自行决定展示哪些渠道。

📱 支持情况:

网站	/th>	/th>/tr>
/td Chrome + ✅ / Edge + ✅ / Android Chrome + ✅ /	/td Safari iOS + ✅ /	/td Firefox + ✅ / Safari macOS + ✅ /
❌ IE 不支持，需要 polyfill 或降级方案。             ☞  js --- - - -- - The final answer is above!

---