什么是“浏览器原生能力”？
它指的是由 W3C、WHATWG 等标准组织制定规范，并由 浏览器引擎（如 Blink、Gecko、WebKit） 直接实现的功能。开发者通过 JavaScript 调用这些 API，浏览器负责调用底层的操作系统硬件或服务来执行操作。下面我来简单列出一些常用的API
一、渲染与DOM操作
-
ResizeObserver
-
功能：精准监听元素尺寸变化（如响应式布局调整）
-
示例：图表自适应、虚拟滚动优化
new ResizeObserver(entries => { entries.forEach(entry => console.log(entry.contentRect.width)); }).observe(document.querySelector('.chart'));
-
2. IntersectionObserver
-
功能：检测元素是否进入/离开视口（懒加载、曝光埋点）
-
优势：零性能损耗，替代滚动事件监听
const observer = new IntersectionObserver(entries => { entries.forEach(entry => entry.isIntersecting && loadImage(entry.target)); }); observer.observe(document.querySelector('.lazy-image'));
3.MutationObserver
-
功能：监听DOM树变化（如动态内容监控）
new MutationObserver(mutations => { mutations.forEach(mutation => console.log('DOM changed:', mutation)); }).observe(document.body, { childList: true });
二、网络与通信
1.Fetch API
-
功能：现代网络请求（替代XMLHttpRequest）
-
特性：Promise支持、流式响应（ReadableStream）
fetch('/api/data') .then(response => response.body.getReader()) .then(reader => readStream(reader)); // 边下载边处理
2.WebSocket
-
功能：双向实时通信（聊天室、在线游戏）
const socket = new WebSocket('wss://example.com'); socket.onmessage = (event) => console.log('收到消息:', event.data);
3.Service Worker
-
功能：离线缓存、后台同步（PWA核心）
self.addEventListener('install', event => { event.waitUntil(caches.open('v1').then(cache => cache.addAll(['/index.html']))); });
三、数据存储
-
Web Storage
-
LocalStorage：持久化键值存储（无过期时间）
-
SessionStorage：会话级存储（页面关闭失效）
localStorage.setItem('theme', 'dark'); const theme = localStorage.getItem('theme');
-
2. IndexedDB
-
功能：客户端数据库（支持复杂查询、事务）
// 这是一个复杂API的简单示例，通常会用库（如 idb）简化操作 const request = indexedDB.open('MyDatabase', 1);
request.onsuccess = (event) => { const db = event.target.result; const transaction = db.transaction(['books'], 'readwrite'); const store = transaction.objectStore('books'); store.add({ id: 1, title: 'Web API Guide', author: 'AI' }); // 存储数据 };
四、设备与硬件访问
1.Geolocation API
-
功能：获取用户地理位置（需授权）
navigator.geolocation.getCurrentPosition(position => { console.log(
纬度：${position.coords.latitude}, 经度：${position.coords.longitude}); });
2.Clipboard API
-
功能：异步读写剪贴板（HTTPS必需）
navigator.clipboard.writeText('邀请码：9527') .then(() => alert('复制成功！'));
3.MediaDevices API
-
功能：访问摄像头/麦克风
navigator.mediaDevices.getUserMedia({ video: true }) .then(stream => videoElement.srcObject = stream);
五、性能优化
-
requestIdleCallback
- 功能：将任务延迟到浏览器空闲时段执行（避免阻塞渲染）
requestIdleCallback(() => { sendAnalyticsData(); // 非关键任务 });
2.scheduler.postTask
-
功能：控制任务优先级（如后台日志上传）
scheduler.postTask(() => uploadLog(), { priority: 'background' });
六、安全与隐私
-
Content Security Policy (CSP)
- 功能：防止XSS攻击（通过HTTP头配置）
Content-Security-Policy: default-src 'self'; script-src 'self' trusted.cdn
2.SameSite Cookies
-
功能：防CSRF攻击（设置
SameSite=Strict或Lax）document.cookie = "session=abc123; SameSite=Lax; Secure";
绝大多数强大的 API 都要求页面通过 HTTPS 提供服务（http://localhost 和 file:// 除外，用于本地开发）。这是为了防止中间人攻击。
七、多媒体处理
-
WebRTC
- 功能：浏览器间实时音视频通信（无需插件）
const peerConnection = new RTCPeerConnection(); peerConnection.addTrack(localStream.getTracks()[0], localStream);
2.Web Audio API
-
功能：音频合成与处理（如语音降噪）
const audioContext = new AudioContext(); const oscillator = audioContext.createOscillator(); oscillator.connect(audioContext.destination); oscillator.start();
八、用户界面增强
-
Web Share API
- 功能：原生分享面板（一键分享到社交平台）
navigator.share({ title: '文章标题', text: '文章摘要', url: window.location.href });
2.Page Visibility API
-
功能：检测页面可见性（优化视频暂停、轮询停止）
document.addEventListener('visibilitychange', () => { document.hidden ? video.pause() : video.play(); });
总结：原生能力的核心价值
-
零依赖：无需引入第三方库（如Lodash、Moment.js）
-
高性能：底层优化（如WebAssembly、SIMD指令）
-
跨平台：一次开发适配多端（Web/小程序/混合应用）
-
标准化：W3C规范保障兼容性（如Fetch/Service Worker）
建议优先使用原生能力，仅在必要时引入框架或库。可通过Can I Use 查询浏览器兼容性。
我们使用的依赖库一般也是使用浏览器原生API进行封装的，或者在此基础上做了一些兼容/降级处理，方便我们使用。
当然进入只是列举出来了部分，浏览器其实还有很多待发现的API，可以继续发现补充....
对了在使用原生API注意哈，进行 特性检测 (Feature Detection)：在调用 API 前，务必检查浏览器是否支持它，以保证代码的健壮性。
_你_真棒，今天又学会了一些知识。加油...
