你以为浏览器只能打开网页？打开控制台敲 console.log？其实浏览器早就给你准备好了各种"神器"——只是 99% 的人从来没注意过。这些 API 之所以存在，是因为浏览器在发展过程中遇到了真实的问题。
今天，用工具箱的故事，来讲讲浏览器内置的 Web API。
原文地址
墨渊书肆/浏览器藏了这么多神器，你居然不知道？
浏览器是个工具箱
为什么浏览器要内置这么多 API？
浏览器就像一个万能工具箱：
- 木工要锤子、锯子、螺丝刀
- 前端要检测元素、监控性能、访问硬件
浏览器面临的场景越来越复杂：
- 检测页面何时可见/隐藏
- 监听某个元素何时出现在屏幕
- 监听 DOM 元素的大小变化
- 监控网页性能数据
- 访问电池、位置、剪贴板等硬件
所以浏览器厂商（Google、Mozilla、Apple）就把常见需求做成标准 API，让开发者直接用。
兼容性问题
在开始之前，先说个重要的事：不是所有 API 所有浏览器都支持。
| API |
Chrome |
Firefox |
Safari |
Edge |
| IntersectionObserver |
✅ 51+ |
✅ 55+ |
✅ 12.1+ |
✅ 79+ |
| MutationObserver |
✅ 18+ |
✅ 14+ |
✅ 6+ |
✅ 12+ |
| ResizeObserver |
✅ 64+ |
✅ 31+ |
✅ 13.1+ |
✅ 79+ |
| PerformanceObserver |
✅ 56+ |
✅ 58+ |
✅ 11+ |
✅ 79+ |
| Page Visibility API |
✅ 33+ |
✅ 18+ |
✅ 6.1+ |
✅ 12+ |
| Battery API |
✅ 50+ |
✅ 10+ |
❌ 不支持 |
✅ 79+ |
| Clipboard API |
✅ 66+ |
✅ 63+ |
✅ 13.1+ |
✅ 79+ |
| Geolocation API |
✅ 5+ |
✅ 3.5+ |
✅ 3+ |
✅ 12+ |
注意：Battery API 在 Safari 和大多数移动浏览器上不支持，使用时要做好兼容处理。
IntersectionObserver — 懒加载和无限滚动的救星
故事的起因：scroll 事件太慢了
十年前，前端要检测"某个元素是否出现在屏幕上"，只能这样写：
window.addEventListener('scroll', () => {
const rect = element.getBoundingClientRect();
if (rect.top < window.innerHeight) {
loadImage();
}
});
这段代码有什么问题？
| 问题 |
说明 |
| 性能差 |
scroll 事件每秒触发几十次，每次都计算 rect |
| 无法批量 |
多个元素要写多个监听 |
| 滚动卡顿 |
计算太频繁，导致页面卡 |
就像门口站了个保安：每进来一个人，他都要站起来看一眼是不是 VIP——累死了。
IntersectionObserver 的原理
IntersectionObserver = 交叉观察器。
浏览器提供了这个 API，让你能高效地检测元素是否进入视口。
原理很简单：
IntersectionObserver 工作原理：
┌────────────────────────────┐
│ 视口（Viewport） │
│ ┌────────────────────┐ │
│ │ target 元素 │ │
│ │ │ │
│ └────────────────────┘ │
└────────────────────────────┘
↓
元素进入视口？浏览器自动通知你
基本用法
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
console.log('元素可见性:', entry.isIntersecting);
console.log('交叉比例:', entry.intersectionRatio);
});
}, {
root: null, // null = 浏览器视口
rootMargin: '0px', // 扩大/缩小检测区域
threshold: 0.5 // 50% 可见时触发
});
observer.observe(element);
配置参数详解：
| 参数 |
作用 |
示例 |
root |
参考视口 |
null=浏览器窗口，element=某个容器 |
rootMargin |
视口的扩展区域 |
'100px'=提前100px就触发 |
threshold |
触发时机 |
0=刚出现，0.5=一半可见，1=完全可见 |
实际应用：懒加载图片
这是最经典的应用场景：
<img data-src="real-image.jpg" class="lazy" alt="加载中...">
<img data-src="real-image2.jpg" class="lazy" alt="加载中...">
<script>
const images = document.querySelectorAll('.lazy');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src; // 加载真实图片
img.classList.remove('lazy'); // 移除占位符样式
observer.unobserve(img); // 加载完停止观察
}
});
}, {
rootMargin: '100px' // 提前 100px 开始加载
});
images.forEach(img => observer.observe(img));
</script>
实际应用：无限滚动
电商网站、社交媒体最常用的"加载更多"：
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
loadMoreItems().then(() => {
// 新内容加载后，继续观察新的 loading 元素
observer.observe(document.querySelector('.loading'));
});
}
});
}, {
rootMargin: '200px' // 距离底部 200px 就开始加载
});
observer.observe(document.querySelector('.loading'));
MutationObserver — DOM 变化探测器
故事的起因：jQuery 时代的噩梦
很久以前，前端要监听 DOM 变化是这样写的：
$('#container').bind('DOMNodeInserted', function() {
console.log('有新内容了');
});
后来有了 MutationEvent：
document.addEventListener('DOMNodeInserted', (e) => {
console.log('有新节点:', e.target);
});
但这些事件有严重问题：
| 问题 |
说明 |
| 性能灾难 |
每次 DOM 变化都触发，变化多了直接卡死 |
| 不准确 |
不能区分是内容变了还是属性变了 |
| 已废弃 |
现代浏览器不再推荐使用 |
MutationObserver 的原理
MutationObserver = 变化观察器。
浏览器用它来高效地监听 DOM 变化，变化会被批量收集，一次性通知你。
MutationObserver 原理：
┌──────────────────────────────┐
│ DOM 树 │
│ <div id="app"> │
│ <p>你好</p> ← 变化 │
│ </div> │
└──────────────────────────────┘
↓
变化被收集 → 批量通知 → 一次回调
基本用法
const observer = new MutationObserver((mutations) => {
// mutations 数组包含所有变化
mutations.forEach(mutation => {
console.log('变化类型:', mutation.type);
console.log('变化节点:', mutation.target);
});
});
observer.observe(document.body, {
childList: true, // 监听子节点增删
subtree: true, // 监听所有后代节点
attributes: true, // 监听属性变化
attributeOldValue: true, // 记录变化前的属性值
characterData: true, // 监听文本变化
characterDataOldValue: true // 记录变化前的文本
});
变化类型详解：
| type |
说明 |
包含内容 |
childList |
子节点增删 |
新增或删除的节点 |
attributes |
属性变化 |
变化的属性名和值 |
characterData |
文本变化 |
变化前后的文本内容 |
变化收集流程：
1. DOM 发生变化
2. 变化被记录到队列（不立即通知）
3. 变化积累一定数量或时间后
4. 批量通知观察者
实际应用：表单变化检测
监听表单是否有未保存的修改：
const observer = new MutationObserver(() => {
form.hasChanges = true; // 标记有变化
});
observer.observe(form, {
childList: true, subtree: true, attributes: true, characterData: true
});
form.addEventListener('submit', () => {
form.hasChanges = false;
observer.disconnect();
});
ResizeObserver — 元素大小监听器
故事的起因：window.resize 太粗糙了
以前要监听元素大小变化，只能监听整个窗口：
window.addEventListener('resize', () => {
console.log('窗口大小:', window.innerWidth, window.innerHeight);
});
但这有两个问题：
| 问题 |
说明 |
| 不精确 |
只能监听窗口，不能监听某个 div |
| 性能差 |
窗口每次 resize 都触发，频率很高 |
ResizeObserver 的原理
ResizeObserver = 大小观察器。
专门用来监听任意元素的大小变化，精准高效。
ResizeObserver 原理：
┌─────────────────────────┐
│ <div class="box"> │
│ 内容随着大小变化 │
│ </div> │
└─────────────────────────┘
↓
大小变化 → 浏览器自动通知
↓
entry.contentRect 包含新尺寸
基本用法
const observer = new ResizeObserver((entries) => {
entries.forEach(entry => {
const { width, height } = entry.contentRect;
console.log(`元素大小: ${width} x ${height}`);
});
});
observer.observe(boxElement);
// 停止观察
observer.unobserve(boxElement);
observer.disconnect();
实际应用：响应式布局
根据容器大小切换布局：
const observer = new ResizeObserver((entries) => {
entries.forEach(entry => {
const width = entry.contentRect.width;
const target = entry.target;
// 移除旧布局类
target.classList.remove('mobile', 'tablet', 'desktop');
// 根据宽度添加新布局类
if (width < 600) {
target.classList.add('mobile');
renderMobileLayout(target);
} else if (width < 1024) {
target.classList.add('tablet');
renderTabletLayout(target);
} else {
target.classList.add('desktop');
renderDesktopLayout(target);
}
});
});
observer.observe(document.querySelector('.layout-container'));
PerformanceObserver — 性能监控器
故事的起因：Performance API 太难用
浏览器原生提供 performance.timing 等 API 来获取性能数据：
// 获取页面加载时间
const loadTime = performance.timing.loadEventEnd - performance.timing.navigationStart;
console.log('页面加载时间:', loadTime);
但问题是：
| 问题 |
说明 |
| 一次性 |
数据只在特定时间点有效 |
| 不实时 |
无法监控动态加载的资源 |
| 不直观 |
要自己计算各种时间差 |
PerformanceObserver 的原理
PerformanceObserver = 性能观察器。
让你实时监控浏览器的各种性能数据，浏览器会主动通知你。
PerformanceObserver 能监控的数据：
┌───────────────────────────────────┐
│ longtask - 长任务（>50ms） │
│ paint - 绘制时间（FP/FCP） │
│ resource - 资源加载时间 │
│ navigation - 页面导航时间 │
│ mark - 自定义标记 │
│ measure - 自定义测量 │
└───────────────────────────────────┘
基本用法
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach(entry => {
console.log('性能数据:', entry);
});
});
// 观察长任务
observer.observe({ type: 'longtask', buffered: true });
// 观察绘制时间
observer.observe({ type: 'paint', buffered: true });
// 观察资源加载
observer.observe({ type: 'resource', buffered: true });
实际应用：检测长任务
const observer = new PerformanceObserver((list) => {
list.getEntries().forEach(entry => {
console.warn('检测到长任务:', entry.duration, 'ms');
// 长任务超过 50ms，视为需要优化
if (entry.duration > 50) {
console.error('长任务位置:', entry.name);
console.error('开始时间:', entry.startTime);
}
});
});
observer.observe({ type: 'longtask', buffered: true });
Page Visibility API — 页面可见性检测
故事的起因：用户切换标签页你不知道
你有没有想过：
- 用户打开了你的页面，然后切到别的标签页
- 你的动画还在跑吗？定时器还在跑吗？
- 如果是视频网站，用户切走了，视频还在播放吗？
以前的解决方案：
window.addEventListener('blur', () => {
// 窗口失去焦点
});
window.addEventListener('focus', () => {
// 窗口获得焦点
});
但这不够精确——用户可能只是最小化了窗口，或者切换到了别的标签页。
Page Visibility API 的原理
Page Visibility API 让你精确知道页面的可见状态。
visibilityState 的两种状态：
┌─────────────────────────────────────┐
│ visible - 页面完全可见 │
│ hidden - 页面被隐藏 │
└─────────────────────────────────────┘
触发场景：
- 切换标签页 → hidden
- 最小化窗口 → hidden
- 关闭浏览器 → hidden
- 切换应用 → hidden
基本用法
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
console.log('页面被隐藏了');
pauseAnimations();
stopPolling();
} else {
console.log('页面可见了');
resumeAnimations();
startPolling();
}
});
console.log('当前状态:', document.visibilityState);
实际应用：标签页切换统计
const metrics = {
visibleTime: 0,
hiddenTime: 0,
lastChangeTime: Date.now()
};
document.addEventListener('visibilitychange', () => {
const now = Date.now();
if (document.hidden) {
// 开始隐藏，记录可见时长
metrics.visibleTime += now - metrics.lastChangeTime;
metrics.lastChangeTime = now;
// 暂停音乐/视频
video.pause();
} else {
// 结束隐藏，记录隐藏时长
metrics.hiddenTime += now - metrics.lastChangeTime;
metrics.lastChangeTime = now;
// 恢复音乐/视频
video.play();
}
});
window.addEventListener('beforeunload', () => {
navigator.sendBeacon('/analytics', JSON.stringify(metrics));
});
Battery API — 电池状态检测
故事的起因：低电量时该省电
做 Web 应用时，你可能想过：
- 电量低的时候，要不要关闭动画省电？
- 正在充电时，能不能开启高性能模式？
- 用户还能用多久？
这些问题，Battery API 都能回答。
Battery API 的兼容性
| 浏览器 |
支持情况 |
| Chrome |
✅ 50+ |
| Firefox |
✅ 10+ |
| Safari |
❌ 不支持 |
| Edge |
✅ 79+ |
注意：Safari 和 iOS Safari 不支持 Battery API。如果你的用户主要是苹果设备，这个 API 就用不了。
Battery API 的原理
Battery API = 电池状态接口。
浏览器通过操作系统获取电池信息，暴露给 JavaScript。
Battery API 数据来源：
┌─────────────────────────────────────┐
│ 浏览器 │
│ navigator.getBattery() │
└─────────────────────────────────────┘
↓
┌─────────────────────────────────────┐
│ 操作系统 │
│ Windows / macOS / Linux │
│ 提供电池状态、电量、充电时间 │
└─────────────────────────────────────┘
↓
┌─────────────────────────────────────┐
│ 硬件 │
│ 电池芯片提供实时数据 │
└─────────────────────────────────────┘
基本用法
navigator.getBattery().then(battery => {
console.log('是否在充电:', battery.charging);
console.log('电量:', (battery.level * 100).toFixed(0), '%');
console.log('剩余时间:', battery.dischargingTime / 60, '分钟');
// 监听电量变化
battery.addEventListener('levelchange', () => {
console.log('电量变化:', (battery.level * 100).toFixed(0), '%');
});
// 监听充电状态变化
battery.addEventListener('chargingchange', () => {
console.log('充电状态变化:', battery.charging ? '充电中' : '未充电');
});
});
实际应用：省电模式
// 获取电池信息并初始化省电模式
navigator.getBattery().then(battery => {
// 根据电池状态更新页面
function updateMode() {
// 判断是否需要省电：没在充电 且 电量低于 20%
const shouldSavePower = !battery.charging && battery.level < 0.2;
// 切换 body 的省电样式类
document.body.classList.toggle('power-saving', shouldSavePower);
if (shouldSavePower) {
// 电量低：关闭动画、停止轮询、降低画质
disableAnimations();
stopAutoRefresh();
reduceRenderQuality();
} else {
// 电量充足：恢复正常模式
enableAnimations();
startAutoRefresh();
restoreRenderQuality();
}
}
// 监听电量变化和充电状态变化
battery.addEventListener('levelchange', updateMode);
battery.addEventListener('chargingchange', updateMode);
// 页面加载时先检查一次
updateMode();
});
Clipboard API — 剪贴板读写
故事的起因：以前只能靠 document.execCommand
以前复制文本到剪贴板，是这样的：
// ❌ 这种方式已经废弃了
textarea.select();
document.execCommand('copy');
而且这种方式问题很多：
- 只能复制文本
- 体验差（会有选中效果）
- API 废弃了
Clipboard API 的原理
Clipboard API 让你安全地读写剪贴板，支持文本、图片、任意数据。
| 方法 |
作用 |
navigator.clipboard.readText() |
读取剪贴板文本 |
navigator.clipboard.writeText() |
写入文本到剪贴板 |
navigator.clipboard.read() |
读取任意数据（图片等） |
navigator.clipboard.write() |
写入任意数据 |
注意：读写剪贴板需要用户授权！
基本用法
// 复制文本
async function copyText(text) {
try {
await navigator.clipboard.writeText(text);
showToast('复制成功！');
} catch (err) {
console.error('复制失败:', err);
}
}
// 读取剪贴板
async function readClipboard() {
try {
const text = await navigator.clipboard.readText();
console.log('剪贴板内容:', text);
return text;
} catch (err) {
console.error('读取失败:', err);
}
}
实际应用：一键复制代码
document.querySelectorAll('.code-block').forEach(block => {
const button = document.createElement('button');
button.className = 'copy-btn';
button.textContent = '复制';
button.addEventListener('click', async () => {
const code = block.textContent;
try {
await navigator.clipboard.writeText(code);
button.textContent = '已复制！';
setTimeout(() => {
button.textContent = '复制';
}, 2000);
} catch (err) {
button.textContent = '复制失败';
}
});
block.appendChild(button);
});
Geolocation API — 地理位置
故事的起因：LBS 应用越来越火
地图、打车、外卖、社交软件……越来越多的应用需要知道用户的位置。
Geolocation API 就是浏览器提供的定位接口。
Geolocation API 的原理
Geolocation API = 地理位置接口。
浏览器会调用系统定位服务来获取位置。
Geolocation 定位方式：
┌───────────────────────────────────┐
│ GPS 定位 - 精度最高（1-10米） │
│ WLAN 定位 - 通过 WiFi 路由器 │
│ 基站定位 - 通过手机信号塔 │
│ IP 定位 - 精度最低（城市级） │
└───────────────────────────────────┘
浏览器会自动选择最优方式
为什么需要用户授权？
| 原因 |
说明 |
| 隐私 |
位置信息属于敏感个人信息 |
| 法律要求 |
GDPR 等法规要求明确授权 |
| 安全 |
防止网站偷偷获取位置 |
基本用法
navigator.geolocation.getCurrentPosition(
(position) => {
console.log('纬度:', position.coords.latitude);
console.log('经度:', position.coords.longitude);
console.log('精度:', position.coords.accuracy, '米');
},
(error) => {
console.error('获取失败:', error.message);
},
{
enableHighAccuracy: true, // 高精度模式（更慢）
timeout: 5000, // 超时时间
maximumAge: 0 // 不使用缓存
}
);
监听位置变化
const watchId = navigator.geolocation.watchPosition(
(position) => {
updateMapPosition(position.coords.latitude, position.coords.longitude);
},
(error) => {
console.error('监听失败:', error.message);
},
{
enableHighAccuracy: true,
timeout: 10000,
maximumAge: 30000 // 缓存 30 秒
}
);
// 停止监听
navigator.geolocation.clearWatch(watchId);
实际应用：距离计算
function calculateDistance(lat1, lon1, lat2, lon2) {
const R = 6371; // 地球半径（公里）
const toRad = (deg) => deg * Math.PI / 180;
const dLat = toRad(lat2 - lat1);
const dLon = toRad(lon2 - lon1);
const a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) *
Math.sin(dLon/2) * Math.sin(dLon/2);
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
return R * c;
}
// 北京 (39.9042, 116.4074) 到 上海 (31.2304, 121.4737)
const distance = calculateDistance(39.9042, 116.4074, 31.2304, 121.4737);
console.log('北京到上海约:', distance.toFixed(0), '公里');
总结
神器一览表
| API |
作用 |
解决的问题 |
兼容性 |
| IntersectionObserver |
懒加载、无限滚动 |
scroll 事件性能差 |
✅ 主流都支持 |
| MutationObserver |
DOM 变化监控 |
MutationEvent 已废弃 |
✅ 主流都支持 |
| ResizeObserver |
元素大小监听 |
window.resize 太粗糙 |
✅ 主流都支持 |
| PerformanceObserver |
性能监控 |
性能数据不直观 |
✅ 主流都支持 |
| Page Visibility API |
页面可见性 |
不知道用户是否在看 |
✅ 主流都支持 |
| Battery API |
电池状态 |
无法感知电量 |
⚠️ Safari 不支持 |
| Clipboard API |
剪贴板读写 |
execCommand 废弃 |
✅ 主流都支持 |
| Geolocation API |
地理位置 |
需要 LBS 功能 |
✅ 主流都支持 |
使用建议
✅ 推荐大胆使用的：
- IntersectionObserver：懒加载必备
- Page Visibility API：标签页切换必备
- Clipboard API：复制粘贴体验升级
- ResizeObserver：响应式布局神器
⚠️ 需要兼容性处理的：
- Battery API：先检测，不支持就降级
- Geolocation API：用户授权，注意隐私
❌ 已废弃不要用的：
- MutationEvent
- document.execCommand（复制除外）
写在最后
现在你知道了：
- 这些 API 不是浏览器随便加的，而是解决了真实问题
- IntersectionObserver 让懒加载变得简单高效
- MutationObserver 是 DOM 变化监控的唯一选择
- ResizeObserver 解决了 window.resize 的痛点
- PerformanceObserver 让性能监控变得直观
- Page Visibility API 让你知道用户在看什么
- Battery API 可以做省电优化（Safari 除外）
- Clipboard API 是现代复制粘贴的标准方案
- Geolocation API 让网页也能做 LBS 应用
每个 API 的存在都有其意义——用对了，问题迎刃而解。
下次遇到相关场景，记得试试这些神器！
登录
