20个浏览器的原生能力

最新推荐文章于 2025-12-05 08:37:05 发布

原创最新推荐文章于 2025-12-05 08:37:05 发布 · 377 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

JavaScript性能优化实战 10w+人浏览 461人参与

在各种组件、插件、JS库大行其道的今天，很少人知道，很少人直接使用这些浏览器原生的API，仅次记录。

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

监测标签页的隐藏，自动暂停视频、停止轮询、移动端省电

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

4.Web Share

一键唤起系统分享面板，直达微信、微博、Telegram，需要HTTPS，电脑端也可唤起

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

5.Web 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.requestldleCallback

将埋点、日志丢进浏览器的空闲时间，首帧零阻塞

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

9.scheduler.postTask

原生优先级任务队列，低优先级任务后台跑，不占用主线程资源

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

10.AbortController

取消异步请求、fetch、promise

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

11.ReadableStream

分段读取响应流，边下载边渲染，处理大文件内存问题

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

12.WritableStream

逐块写入磁盘或网络，实时保存草稿、上传大文件更稳定

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

13.Background Fetch

PWA后台静默下载，断网恢复继续、课程视频的提前缓存

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

14.File System Access

读写本地真实文件，需要用户授权，web ide 开箱即用

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

15.Clipboard

异步读写剪贴板，无需第三方库，HTTPS环境安全复制

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

16.URLSeachParams

解析、修改、构造URL查询串，告别手写正则

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

17.structuredClone

深拷贝对象、数组、Map、Date，循环引用也能完美复制

const copy = structuredClone(state);

18.Intl.NumberFormat

千分位、货币、百分比一次性格式化，国际化零配置

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

19.EyeDropper

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

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

20.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' });

参考文章：https://mp.weixin.qq.com/s/3B88ZJtpRciGJDi5vcNn4g