95% 前端不知道的 15个现代浏览器 API！
在做前端开发时，我们常常因为某个功能引入一个第三方库，结果打包体积变大、兼容性问题也随之而来。其实，浏览器早已内置了许多强大的能力，只是你可能还没发现！
下面这些 API，使用率不高，但每一个都能精准解决实际开发中的痛点，而且开箱即用，无需引入额外依赖。
文章目录
- 1. 内存泄漏检测
- 2. Navigation Timing API – 全方位性能监控
- 3. Network Information API – 网络状态感知
- 4. Compression Streams API – 原生压缩解压
- 5. Array.prototype.groupBy() – 数据分组
- 6. Object.groupBy() – 对象分组
- 7. View Transitions API – 流畅页面过渡
- 8. Window Controls Overlay API – PWA 自定义标题栏
- 9. Screen Orientation API – 屏幕方向控制
- 10. Bluetooth API – 蓝牙设备连接
- 11. Beacon API – 可靠的数据上报
- 12. Canvas 图像处理 API
- 13. Storage Buckets API – 隔离的存储空间
- 14. Console 高级用法 – 不只是 console.log
1. 内存泄漏检测
解决痛点： 传统内存检测要靠 DevTools，无法在生产环境监控。
场景： 单页应用内存泄漏监控、性能分析平台
// 仅 Chrome/Edge 支持，但很实用
if (performance.memory) {
console.log("已使用堆内存:", (performance.memory.usedJSHeapSize / 1048576).toFixed(2), "MB");
console.log("堆内存限制:", (performance.memory.jsHeapSizeLimit / 1048576).toFixed(2), "MB");
// 监控内存变化
setInterval(() => {
const memory = performance.memory;
const usedMB = memory.usedJSHeapSize / 1048576;
const totalMB = memory.totalJSHeapSize / 1048576;
if (usedMB > 100) {
// 超过 100MB 警告
console.warn("内存使用过高:", usedMB.toFixed(2), "MB");
}
}, 5000);
}解决痛点：手动计算白屏时间、DNS 查询时间太麻烦
场景： 真实用户性能监控、竞品性能分析
const [navigationEntry] = performance.getEntriesByType("navigation");
console.log(`DNS 查询: ${navigationEntry.domainLookupEnd - navigationEntry.domainLookupStart}ms`);
console.log(`首字节: ${navigationEntry.responseStart}ms`);
console.log(`DOM 解析: ${navigationEntry.domContentLoadedEventEnd - navigationEntry.domContentLoadedEventStart}ms`);3. Network Information API – 网络状态感知
解决痛点： 无法根据用户网络状况调整资源加载策略。
场景：智能资源加载、弱网优化
const connection = navigator.connection;
console.log(`网络类型: ${connection.effectiveType}`);
console.log(`下行速度: ${connection.downlink} Mbps`);
connection.addEventListener('change', () => {
// 网络变差时降低图片质量
if (connection.effectiveType === 'slow-2g') {
switchToLowResImages();
}
});4. Compression Streams API – 原生压缩解压
解决痛点： 需要引入第三方压缩库，增加包体积。
场景： 大文件传输、日志压缩上传
// GZIP 压缩
const readableStream = new Blob([data]).stream();
const compressedStream = readableStream.pipeThrough(new CompressionStream('gzip'));
// GZIP 解压
const decompressedStream = compressedStream.pipeThrough(new DecompressionStream('gzip'));5. Array.prototype.groupBy() – 数据分组
解决痛点： 数组分组需要手动实现或引入 lodash。
场景： 数据统计、报表生成
const inventory = [{
name: 'asparagus',
type: 'vegetables',
quantity: 5
}, {
name: 'bananas',
type: 'fruit',
quantity: 0
}, {
name: 'goat',
type: 'meat',
quantity: 23
}, ];
const grouped = inventory.groupBy(({
type
}) => type);
// { vegetables: [...], fruit: [...], meat: [...] }6. Object.groupBy() – 对象分组
解决痛点： 对象数据分组繁琐。
场景： 用户分组、数据聚合
const people = [{
name: 'Alice',
age: 28
}, {
name: 'Bob',
age: 30
}, {
name: 'Eve',
age: 28
}, ];
const groupedByAge = Object.groupBy(people, ({
age
}) => age);
// { 28: [...], 30: [...] }7. View Transitions API – 流畅页面过渡
痛点： 页面切换生硬，手动实现动画复杂。
场景： 路由切换动画、图片画廊、内容更新过渡
// 单页应用路由切换动画
function switchPage(newContent) {
document.startViewTransition(() => {
document.body.innerHTML = newContent;
});
}
// CSS 中定义动画
/* @view-transition { navigation: auto; } */8. Window Controls Overlay API – PWA 自定义标题栏
解决痛点： PWA 应用无法充分利用窗口空间
场景： 桌面级 PWA 应用、自定义窗口布局
if ('windowControlsOverlay' in navigator) {
// 获取窗口控制区域信息
const {
visible
} = navigator.windowControlsOverlay;
const titlebarArea = navigator.windowControlsOverlay.getTitlebarAreaRect();
// 在标题栏区域添加自定义内容
customTitlebar.style.marginLeft = `${titlebarArea.width}px`;
}9. Screen Orientation API – 屏幕方向控制
解决痛点： 无法锁定屏幕方向，横屏体验差。
场景： 游戏应用、视频播放器、演示文稿
// 锁定横屏
await screen.orientation.lock('landscape');
// 监听方向变化
screen.orientation.addEventListener('change', () => {
console.log(`当前方向: ${screen.orientation.type}`);
});
// 解锁
screen.orientation.unlock();10. Bluetooth API – 蓝牙设备连接
痛点： 认为 Web 无法连接硬件设备。
场景： IoT 设备控制、健康监测、智能家居
try {
const device = await navigator.bluetooth.requestDevice({
acceptAllDevices: true,
optionalServices: ['battery_service']
});
const server = await device.gatt.connect();
const service = await server.getPrimaryService('battery_service');
const characteristic = await service.getCharacteristic('battery_level');
const value = await characteristic.readValue();
console.log(`电池电量: ${value.getUint8(0)}%`);
} catch (error) {
console.log('蓝牙连接失败:', error);
}11. Beacon API – 可靠的数据上报
解决痛点： 页面关闭时数据上报丢失。
场景： 用户行为分析、错误监控、性能指标上报
// 在页面卸载时可靠发送数据
window.addEventListener('unload', () => {
const data = JSON.stringify({
event: 'page_unload',
time: Date.now()
});
navigator.sendBeacon('/analytics', data);
});12. Canvas 图像处理 API
解决痛点： 图像处理需要复杂算法或第三方库。
场景： 图片滤镜、图像识别、二维码生成
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const image = new Image();
image.onload = () => {
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image, 0, 0);
// 获取图像数据
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
// 灰度化处理
for (let i = 0; i < data.length; i += 4) {
const avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
// R
data[i] = avg;
// G
data[i + 1] = avg;
// B
data[i + 2] = avg;
}
ctx.putImageData(imageData, 0, 0);
};13. Storage Buckets API – 隔离的存储空间
解决痛点： 所有数据共享同一个存储空间，无法按功能隔离。
场景： 多用户系统、隐私数据隔离、第三方组件沙箱.
// 创建隔离的存储桶
const bucket = await navigator.storageBuckets.open('user_sessions');
// 在该存储桶中使用
Storage APIconst sessionStorage = bucket.sessionStorage;
sessionStorage.setItem('token', 'secret-token');
// 数据与其他存储空间隔离
console.log(sessionStorage.getItem('token')); // 'secret-token'
console.log(window.sessionStorage.getItem('token')); // null14. Console 高级用法 – 不只是 console.log
痛点： 调试手段单一，无法充分利用控制台。
场景： 复杂数据调试、性能分析、流程跟踪
// 表格展示
console.table([{
name: 'Alice',
age: 30
}, {
name: 'Bob',
age: 25
}]);
// 分组日志
console.group('用户操作流程');
console.log('用户登录');
console.log('浏览商品');
console.log('加入购物车');
console.groupEnd();
// 性能计时
console.time('数据计算');
// ... 复杂计算
console.timeEnd('数据计算');
// 条件日志
console.assert(list.length > 0, '列表不能为空');15. :has() 选择器 — 父元素选择终于来了
以前想根据子元素控制父元素样式，只能用 JS。现在一个 :has() 搞定。
/* 如果 .card 里有图片，就给卡片加个边框 */
.card:has(img) {
border: 1px solid #ccc;
}
/* 如果某个选项被选中，改变其父级背景 */
li:has(input:checked) {
background: #e0f0ff;
}