20 个浏览器原生能力 替代工具库少写百行代码
很多前端开发者习惯依赖工具库实现常见功能，却忽略了浏览器原生 API 的强大能力。以下 20 个零依赖原生能力，覆盖性能监控、交互优化、数据处理等多个场景，既能替代第三方库，又能减少代码量，提升项目效率。
一、DOM 与视口相关
- ResizeObserver：精准监听 DOM 元素宽高变化，无需频繁监听窗口 resize 事件，适用于图表自适应、虚拟滚动等场景。
scss
new ResizeObserver(([entry]) => {
chart.resize(entry.contentRect.width)
}).observe(chartDom)- IntersectionObserver：检测元素是否进入视口，高效实现懒加载和曝光埋点，性能优于传统滚动监听。
scss
new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) loadImg(entry.target)
})
}).observe(imgElement)- Page Visibility：监听标签页显示状态，标签页隐藏时自动暂停视频或轮询请求，节省设备资源。
javascript
document.addEventListener('visibilitychange', () => {
document.hidden ? video.pause() : video.play()
})二、交互与系统能力
- Web Share：唤起系统原生分享面板，支持分享链接标题等内容，需在 HTTPS 环境下使用。
css
navigator.share?.({ title: '优质内容', url: location.href })- Wake Lock：请求屏幕常亮权限，适用于直播阅读器 PPT 展示等需要持续亮屏的场景。
csharp
await navigator.wakeLock.request('screen')- Broadcast Channel：同域下不同标签页间实时通信，快速同步登录态等全局状态，无需轮询 localStorage。
ini
const channel = new BroadcastChannel('auth-state')
channel.onmessage = () => location.reload()- Clipboard：异步读写系统剪贴板，安全实现复制粘贴功能，无需操作 DOM 元素。
csharp
await navigator.clipboard.writeText('邀请码 9527')
const copiedText = await navigator.clipboard.readText()- EyeDropper：调用浏览器原生取色工具，精准获取页面任意像素颜色，适用于设计相关功能。
javascript
const { sRGBHex } = await new EyeDropper().open()
console.log('选中颜色', sRGBHex)三、性能优化相关
- PerformanceObserver：无侵入式采集页面性能指标，如 LCP FCP FID 等，轻松实现前端性能监控。
javascript
new PerformanceObserver(list => {
list.getEntries().forEach(metric => sendPerformanceData(metric))
}).observe({ type: 'largest-contentful-paint', buffered: true })- requestIdleCallback：利用浏览器空闲时间执行低优先级任务，如日志上报埋点发送，不阻塞首帧渲染。
scss
requestIdleCallback(() => {
sendBeacon('/analytics', JSON.stringify(logData))
})- scheduler.postTask：原生任务优先级队列，将低优先级任务标记为 background，确保主线程流畅。
scss
scheduler.postTask(() => {
sendBeacon('/logs', logData)
}, { priority: 'background' })四、网络与数据流
- AbortController：主动取消 fetch 请求，解决路由切换时旧请求竞态问题，提升用户体验。
scss
const controller = new AbortController()
fetch(apiUrl, { signal: controller.signal })
// 取消请求
controller.abort()- ReadableStream：分段读取响应数据，边下载边渲染，避免大文件加载导致的内存暴涨。
csharp
const reader = response.body.getReader()
while (true) {
const { done, value } = await reader.read()
if (done) break
renderChunk(value)
}- WritableStream：逐块写入数据到磁盘或网络，适用于大文件上传、实时保存草稿等场景。
scss
const writer = stream.writable.getWriter()
await writer.write(chunkData)
writer.close()- Background Fetch：PWA 应用后台静默下载资源，断网后恢复可继续下载，适合课程视频离线缓存。
csharp
await registration.backgroundFetch.fetch('course-resource', ['/video.mp4'])五、数据处理与格式
- URLSearchParams：便捷解析修改 URL 查询参数，无需手写正则表达式，操作更高效。
csharp
const params = new URLSearchParams(location.search)
params.set('page', 2)
history.replaceState({}, '', `?${params}`)- structuredClone：原生深拷贝方法，支持对象数组 Map Date 等类型，可处理循环引用。
ini
const stateCopy = structuredClone(originalState)- Intl.NumberFormat：快速格式化数字为千分位货币百分比格式，支持国际化适配。
javascript
const formatter = new Intl.NumberFormat('zh-CN', {
style: 'currency',
currency: 'CNY'
})
console.log(formatter.format(1234567)) // ¥1,234,567.00六、媒体与文件
- File System Access：获取本地文件读写权限，用户授权后可直接操作本地文件，适用于 Web IDE 等场景。
vbnet
const [fileHandle] = await showOpenFilePicker()
const file = await fileHandle.getFile()
const content = await file.text()- WebCodecs：原生硬解码音视频，支持 4K 60 帧流畅播放，大幅降低 CPU 占用率。
go
const decoder = new VideoDecoder({
output: frame => ctx.drawImage(frame, 0, 0),
error: console.error
})
decoder.configure({ codec: 'vp09.00.10.08' })这些原生 API 无需额外依赖，兼容性覆盖现代主流浏览器，合理运用能显著精简代码、提升性能。收藏这份清单，开发时直接取用，告别冗余工具库。
海云前端丨前端开发丨简历面试辅导丨求职陪跑