90% 前端都不知道的 20 个「零依赖」浏览器原生能力 🔥

ZTeam
53 阅读4分钟

90% 前端都不知道的 20 个「零依赖」浏览器原生能力 🔥

宝子们！别再满世界找插件啦 😭

2025 年还在用第三方库？这些浏览器自带的原生 API 才是 yyds！

少写 100 行兼容代码，性能直接拉满 💥 收藏这篇，面试涨薪都用得上！

1️⃣ ResizeObserver - 尺寸监听神器

精准监听任意 DOM 宽高变化，图表自适应、虚拟滚动必备！再也不用定时器轮询啦 ～

new ResizeObserver(([e]) => chart.resize(e.contentRect.width))
  .observe(chartDom);

2️⃣ IntersectionObserver - 视口检测王者

一次搞定懒加载 + 曝光埋点，性能零损耗！页面滚动丝滑到飞起 ✨

new IntersectionObserver(entrieList =>
  entrieList.forEach(e => e.isIntersecting && loadImg(e.target))
).observe(img);

3️⃣ Page Visibility - 标签页状态管家

侦测标签页隐藏，自动暂停视频、停止轮询，移动端省电神器 🔋 用户体验 upup！

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

4️⃣ Web Share - 系统分享直达车

一键唤起系统分享面板，微信、微博、Telegram 直接发 ～（需 HTTPS 环境哦）

navigator.share?.({ title: '好文', url: location.href });

5️⃣ Wake Lock - 屏幕常亮小能手

直播、PPT、阅读器必备！锁定屏幕常亮，再也不怕自动息屏啦 📱

await navigator.wakeLock.request('screen');

6️⃣ Broadcast Channel - 标签页消息传话筒

同域标签实时广播消息，登录态秒同步！告别 localStorage 轮询的笨方法 🚀

const bc = new BroadcastChannel('auth');
bc.onmessage = () => location.reload();

7️⃣ PerformanceObserver - 性能监控小侦探

无侵入采集 FCP、LCP、FID，一行代码完成前端性能监控 📊 老板夸你专业！

new PerformanceObserver(list =>
  list.getEntries().forEach(sendMetric)
).observe({ type: 'largest-contentful-paint', buffered: true });

8️⃣ requestIdleCallback - 空闲时间利用大师

把埋点、日志丢进浏览器空闲时间，首帧零阻塞！页面打开快到尖叫 😱

requestIdleCallback(() => sendBeacon('/log', data));

9️⃣ scheduler.postTask - 任务优先级指挥官

原生优先级任务队列，低优任务后台跑，主线程丝滑如德芙 🍫

scheduler.postTask(() => sendBeacon('/log', data), { priority: 'background' });

🔟 AbortController - 请求取消小开关

随时取消 fetch，路由切换不再有旧请求竞态！兼容 100% 放心用 ✅

const ac = new AbortController();
fetch(url, { signal: ac.signal });
ac.abort();

1️⃣1️⃣ ReadableStream - 流读取黑科技

分段读取响应流，边下载边渲染！大文件再也不会让内存爆涨啦 💥

const reader = response.body.getReader();
while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  appendChunk(value);
}

1️⃣2️⃣ WritableStream - 稳定写入神器

逐块写入磁盘或网络，实时保存草稿、上传大文件更稳！断网也不怕丢数据 📁

const writer = stream.writable.getWriter();
await writer.write(chunk);

1️⃣3️⃣ Background Fetch - 后台下载管家

PWA 后台静默下载，断网恢复继续！课程视频、大文件提前缓存超省心 🎬

await registration.backgroundFetch.fetch('video', ['/course.mp4']);

1️⃣4️⃣ File System Access - 本地文件读写

读写本地真实文件，需用户授权！Web IDE、在线编辑器即开即用 💻

const [fh] = await showOpenFilePicker();
editor.value = await (await fh.getFile()).text();

1️⃣5️⃣ Clipboard - 安全剪贴板

异步读写剪贴板，无需第三方库！HTTPS 环境下安全复制粘贴超方便 📋

await navigator.clipboard.writeText('邀请码 9527');

1️⃣6️⃣ URLSearchParams - URL 参数处理器

解析、修改、构造 URL 查询串，告别手写正则的烦恼！参数操作超简单 🔗

const p = new URLSearchParams(location.search);
p.set('page', 2);
history.replaceState({}, '', `?${p}`);

1️⃣7️⃣ structuredClone - 深拷贝天花板

深拷贝对象、数组、Map、Date，连循环引用也能完美复制！再也不用写递归啦 🆒

const copy = structuredClone(state);

1️⃣8️⃣ Intl.NumberFormat - 国际化格式化

千分位、货币、百分比一次格式化，国际化零配置！多语言适配超轻松 💱

new Intl.NumberFormat('zh-CN', { style: 'currency', currency: 'CNY' })
  .format(1234567); // ¥1,234,567.00

1️⃣9️⃣ EyeDropper - 浏览器取色器

浏览器级吸管工具，像素级取色！设计系统、调色工具直接调用 🎨

const { sRGBHex } = await new EyeDropper().open();

2️⃣0️⃣ WebCodecs - 音视频硬解码

原生硬解码音视频，4K 60 帧流畅播放！CPU 占用直降，播放体验拉满 📺

const decoder = new VideoDecoder({
  output: frame => ctx.drawImage(frame, 0, 0),
  error: console.error
});
decoder.configure({ codec: 'vp09.00.10.08' });

💡20 个「零依赖」原生能力全更完啦！

👉 收藏这篇，下次开发直接抄作业！有哪个 API 你没用过？评论区聊聊 ～

【ZTeam前端全栈进阶圈】是一个专注技术分享与求解难题的社区，每天都有开发者分享技术文章、解决开发中的实际难题。如果你也有技术上的困惑，欢迎加入，大家一起探讨如何攻克编程中的每一个难关！目前加入还有优惠券哦~

优惠券链接 🔗t.zsxq.com/Itt0z

知识星球链接🔗 t.zsxq.com/rI2ZJ

avatar
文章
阅读
粉丝