别急着装第三方库，这些事浏览器原生就能搞定——Web Native API 教程

写在前面

每次遇到新需求。我们的肌肉反应是 npm install。但很多时候，浏览器早就内置了对应能力，只是你不知道。不过，

痛点一：频繁维护 npm 依赖。导致项目体积膨胀，

痛点二：包更新频繁，可能破坏现有功能。话说回来，

痛点三：安全与隐私担忧：外部库可能引入漏洞。

• 功能说明和使用场景
• 可直接复制的代码示例
• 📊 浏览器兼容性数据表

Intersection Observer API — 懒加载与视口检测

异步观察一个元素与其祖先或顶级文档视口的交叉状态。简单说的观点是，告诉你某个元素是否进入/离开了可视区域。老实说，相比传统的 scroll + getBoundingClientRect。它是浏览器原生调整过的，不会引起频繁重排。

真实代码

// 图片懒加载
const images = document.querySelectorAll;const observer = new IntersectionObserver => {
entries.forEach => {
if {
const img = entry.target;其实，img.src = img.dataset.src;img.removeAttribute;observer.unobserve;// 加载一次后停止观察
}
});},{ root: null。rootMargin: '50px',threshold: });images.forEach => observer.observe);// 无限滚动 sentinel
const sentinel = document.querySelector;const scrollObserver = new IntersectionObserver => {
if loadMoreData;},{ rootMargin: '200px' });scrollObserver.observe;

📊 浏览器兼容性

Clipboard API — 剪贴板读写

异步读写程序剪贴板。不仅支持文本，还支持图片等富文本内容。替代已废弃的 document.execCommand. 痛点四：复制粘贴功能常因跨域或权限限制失效，需要额外封装。

真实代码

// 写入文本
async function copyText{
try{
await navigator.clipboard.writeText;console.log，}catch{console.error;}
}
// 从剪贴板读取文本
async function pasteText{
try{
const text = await navigator.clipboard.readText;console.log，}catch{console.error;}
}
// 写入图片
async function copyImage{
try{
await navigator.clipboard.write]);不过，console.log;}catch{console.error;话说回来，}
}
const canvas=document.querySelector;canvas.toBlob},'image/png');怎么说呢，

📊 浏览器兼容性 writeText/readText/ClipboardItem分别列出覆盖率细节：

⚠️ 安全要求：

• 必须在 HTTPS 环境下使用；老实说，localhost 被视为安全上下文。
• 读取操作需使用者手势触发。

Notification API — 桌面通知

"桌面通知"即使网页不在前台也能弹出提醒。适合消息提醒、任务完成等场景。

真实代码

// 请求通知权限
async function requestNotificationPermission{
if ){
console.log;return，}
const permission=await Notification.requestPermission;if console.log;}
// 发起通知
function showNotification{
const notification=new Notification;notification.onclick=e=>{
e.notification.close;window.focus;if{ /.../ }
};}
document.querySelector.addEventListener=>{
await requestNotificationPermission;showNotification;})，