1. ResizeObserver：像素级「监听」元素尺寸
痛点：window.resize 只能监听视口，图表容器被 flex 布局偷偷撑开你却拿不到回调。
一行代码：
new ResizeObserver(entries => myChart.resize()).observe(document.querySelector('#chart'));
生产场景：ECharts、AntV 自适应、虚拟滚动条重算高度。
兼容：Chromium 64+、FF 69+、Safari 13.1+，polyfill 3 KB。
2. IntersectionObserver：懒加载 & 曝光埋点「零 JS」
痛点：手写滚动监听，一滚动就掉帧。
一行代码：
const io = new IntersectionObserver(([{isIntersecting}]) => { isIntersecting && sendExposure(); }, {threshold: 0.5}); io.observe(document.querySelector('#ad'));
生产场景：图片懒加载、视频自动播放、埋点曝光。
注意：rootMargin 支持 "50px 0px" 提前触发，做预加载神器。
3. Page Visibility：标签页切走，自动暂停一切
痛点：用户切后台，你的轮询 & 动画还在烧电。
一行代码：
document.addEventListener('visibilitychange', () => { document.hidden ? video.pause() : video.play(); });
生产场景：直播、游戏、轮询接口、WebSocket 心跳。
隐藏彩蛋：document.visibilityState 还能区分 "prerender"。
4. Web Share：「系统级分享」一呼百应
痛点：自己写分享面板，安卓 & iOS & PC 永远调不好。
一行代码：
navigator.share({title: '白皮书', text: '2025 前端趋势', url: location.href});
生产场景：H5 页一键分享到微信、Telegram、邮件。
注意：必须用户手势触发，HTTPS 下可用。
5. Wake Lock：让屏幕「常亮」
痛点：直播、PPT 演示 30 秒后自动息屏，老板以为你卡了。
一行代码：
const lock = await navigator.wakeLock.request('screen');
生产场景：直播、在线会议、车载中控 HMI。
隐藏彩蛋：页面可见性变化会自动释放，记得重新申请。
6. Broadcast Channel：同域标签页「微信群」
痛点：A 标签登录，B 标签 302 还在登录页。
一行代码：
new BroadcastChannel('login').postMessage({token});
生产场景：登录态同步、主题色切换、购物车合并。
注意：同域限制，跨域请用 localStorage + storage 事件。
7. PerformanceObserver：性能指标「无侵入」采集
痛点：手动算 FCP、LCP、FID 太麻烦。
一行代码：
new PerformanceObserver(list => { for (const entry of list.getEntries()) analytics.send(entry.name, entry.startTime); }).observe({type: 'paint'});
生产场景：灰度发布性能回归、SLA 看板。
隐藏彩蛋：element 类型能拿到 LCP 具体 DOM。
8. requestIdleCallback：浏览器「闲时」偷偷干活
痛点：埋点、日志上传阻塞主线程，导致掉帧。
一行代码：
requestIdleCallback(() => sendLogs(), {timeout: 2000});
生产场景：非关键日志、预加载下一路由。
注意：React 18 的 startTransition 底层就是它。
9. scheduler.postTask：原生「优先级」队列
痛点：后台数据同步抢走了用户点击的算力。
一行代码：
scheduler.postTask(refreshData, {priority: 'background'});
生产场景：低优先级数据同步、预渲染。
隐藏彩蛋：支持 signal 与 AbortController 联动取消。
10. AbortController：fetch「取消」竞态
痛点：快速切换 Tab，旧请求后回来覆盖新数据。
一行代码：
const ctrl = new AbortController(); fetch(url, {signal: ctrl.signal}); ctrl.abort(); // 任意时机取消
生产场景：搜索框联想、路由切换清理。
隐藏彩蛋：同时能取消 ReadableStream、scheduler.postTask。
11. ReadableStream：大文件「流式」下载
痛点：1 GB 安装包一次性读进内存，Tab 直接崩。
一行代码：
const reader = response.body.getReader(); while (true) { const {done, value} = await reader.read(); if (done) break; await writeChunk(value); }
生产场景：断点续传、进度条。
隐藏彩蛋：配合 BYOB 能把内存占用再降 30%。
12. WritableStream：大文件「流式」上传
痛点：前端生成 500 MB CSV，直接 xhr.send(blob) 必崩。
一行代码：
const writer = (await fetch(url, {method: 'POST', body: stream})).body.getWriter();
生产场景：日志实时上传、SQLite 备份。
注意：需要服务端支持 Transfer-Encoding: chunked。
13. Background Fetch：PWA「断网续传」
痛点：用户下载到 99%，地铁进隧道，回来又要重下。
一行代码：
sw.registration.backgroundFetch.fetch('pkg', ['/1.zip', '/2.zip']);
生产场景：App Shell、游戏资源包。
隐藏彩蛋：系统通知栏自带进度，用户可暂停/继续。
14. File System Access：浏览器里「读写」本地文件
痛点：用户想保存 .psd，你只能给 .zip 下载。
一行代码：
const h = await window.showSaveFilePicker(); const w = await h.createWritable(); await w.write(blob);
生产场景：Web IDE、在线 Photoshop、Notion 本地备份。
注意：需要用户主动交互，HTTPS 下可用。
15. Clipboard：「异步」剪贴板
痛点：老派 document.execCommand('copy') 被 Chrome 废弃。
一行代码：
await navigator.clipboard.writeText('Hello, 2025!');
生产场景：代码编辑器、在线 Excel。
隐藏彩蛋：clipboard.read() 能读图片，做「一键去水印」神器。
16. URLSearchParams：告别「手写」正则
痛点：拼接参数总是漏 &、多 ?。
一行代码：
const p = new URLSearchParams({q: '前端', year: 2025}); console.log(p.toString()); // q=%E5%89%8D%E7%AB%AF&year=2025
生产场景：任意 GET 请求、分页跳转。
隐藏彩蛋：URLSearchParams 本身是可迭代对象，可以直接 for-of。
17. structuredClone：「深拷贝」循环引用
痛点：JSON.parse(JSON.stringify(obj)) 掉 function、Date、undefined。
一行代码：
const copy = structuredClone(original);
生产场景：Redux 巨型 Store、画板历史记录。
注意：支持 Map/Set/Blob/File，但不拷贝函数。
18. Intl.NumberFormat：「千分位 & 货币」一步到位
痛点：后端给 1234567.89，你要显示「￥ 123 万」。
一行代码：
new Intl.NumberFormat('zh-CN', {style: 'currency', currency: 'CNY'}).format(1234567); // ¥1,234,567.89
生产场景：电商价格、股票行情。
隐藏彩蛋：unit: 'meter-per-second' 直接显示 5 m/s。
19. EyeDropper：浏览器级「吸管」
痛点：用户想在网页取色，你还要靠 Canvas 自己算像素。
一行代码：
const {sRGBHex} = await new EyeDropper().open();
生产场景：在线设计工具、主题色提取。
注意：需要用户手势触发，Chromium 95+。
20. WebCodecs：「原生硬解」4K 视频
痛点：H.265 10bit 在浏览器卡成 PPT。
一行代码：
const decoder = new VideoDecoder({output: frame => canvas.draw(frame), error: e => console.error(e)}); decoder.configure({codec: 'hvc1.1.6.L120.90'});
生产场景：在线剪辑、云游戏、安防监控。
隐藏彩蛋：支持 WebWorker 解码，主线程 0 占用。
 - 指南)
