1. 监听页面可见状态
浏览器支持率：97%（Chrome 13+、Edge 12+）
典型场景：用户切换浏览器标签时自动暂停视频播放、停止后台数据轮询

document.addEventListener('visibilitychange', () => {
  document.visibilityState === 'hidden'
    ? video.pause()
    : video.play();
});

2. 调用系统原生分享功能
浏览器支持率：92%（要求 HTTPS 环境）
典型场景：移动端快速分享文章内容至微信、微博等社交平台

if (navigator.share) {
  navigator.share({
    title: '我的新文章',
    text: '快来看看',
    url: location.href,
  });
}

3. 实现同源标签页通信
浏览器支持率：94%（Chrome 54+）
典型场景：用户在一个标签页完成登录，其他同源标签页自动更新认证状态

// 堆代码 duidaima.com
const bc = new BroadcastChannel('login');
bc.postMessage({ token: 'abc123' });
bc.onmessage = (e) => console.log(e.data);

4. 智能数字格式化
浏览器支持率：100%
典型场景：金融场景中的价格展示、股票数据呈现、报表数字格式化

new Intl.NumberFormat('zh-CN').format(1234567); // 1,234,567

5. 元素视口交叉检测
浏览器支持率：97%（Chrome 51+）
典型场景：实现图片懒加载机制、统计广告内容曝光次数

const io = new IntersectionObserver((entries) => {
  entries.forEach((e) => e.isIntersecting && loadImg(e.target));
});
io.observe(img);

6. 监听元素尺寸变化
浏览器支持率：94%（Chrome 64+）
典型场景：响应式图表重绘、虚拟滚动列表动态渲染

const ro = new ResizeObserver((entries) => {
  entries.forEach((e) => console.log('尺寸变化', e.contentRect));
});
ro.observe(chartContainer);

7. 现代化剪贴板操作
浏览器支持率：95%（要求 HTTPS 环境）
典型场景：实现邀请码、优惠券码的一键复制功能

await navigator.clipboard.writeText('COUPON2025');

8. 智能URL参数解析
浏览器支持率：100%
典型场景：路由参数获取、埋点参数解析、搜索条件处理

const params = new URLSearchParams(location.search);
params.get('id'); // ?id=123

9. 可控的网络请求中断
浏览器支持率：100%
典型场景：取消过期接口请求、实现搜索防抖优化

const controller = new AbortController();
fetch(url, { signal: controller.signal });
controller.abort(); // 立即中断

10. 利用浏览器空闲时间
浏览器支持率：95%（Chrome 47+、Edge 79+）
典型场景：非紧急任务调度（如数据埋点、资源预加载、复杂计算）

requestIdleCallback(() => {
  // 在主线程空闲时执行
});

这些现代浏览器API极大提升了开发效率与用户体验，覆盖了页面生命周期管理、系统集成、性能优化等关键场景，值得在现代Web项目中广泛应用。