现代浏览器早给了我们一堆“性能外挂”——那些听过但没敢用的高级 API，居然能精准解决“卡、慢、烫”的问题。今天就把我实测有效的 9 个 API 分享给你，每一个都在项目里带来了肉眼可见的提升！
省流上重点：
- IntersectionObserver → 懒加载
- requestIdleCallback → 空闲任务
- requestAnimationFrame → 流畅动画
- ResizeObserver → 尺寸监听
- performance.now() → 性能测量
- preload/prefetch → 资源预加载
- Cache API → 离线缓存
- Web Workers → 后台计算
- visibilityState → 节流优化
🔍 1. IntersectionObserver：懒加载的终极方案
痛点：以前做图片懒加载，要么用scroll事件+getBoundingClientRect()，要么用onload监听，结果一滚动就触发几百次计算，CPU 直接拉满，页面卡成“电子 ppt”。
API 作用：浏览器原生提供的“视口监听神器”，能自动检测元素是否进入视口，完全不阻塞主线程，性能比手动监听高 10 倍不止！
Vue3+TS 实战：封装LazyImage组件
vue
<!-- components/LazyImage.vue -->
<template>
<img
ref="imgRef"
:data-src="src"
:alt="alt"
class="lazy-image"
/>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
const props = defineProps<{
src: string // 真实图片地址
alt?: string
}>()
const imgRef = ref<HTMLImageElement | null>(null)
let observer: IntersectionObserver | null = null
onMounted(() => {
// 创建观察器：监听元素是否进入视口
observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting && imgRef.value) {
// 进入视口：替换src为真实地址
imgRef.value.src = imgRef.value.dataset.src || ''
// 停止监听，避免重复触发
observer?.unobserve(imgRef.value)
}
})
},
{
rootMargin: '200px 0px', // 提前200px开始加载，优化体验
}
)
// 开始监听当前图片
if (imgRef.value) observer.observe(imgRef.value)
})
onUnmounted(() => {
// 组件销毁时清理观察器，避免内存泄漏
if (observer && imgRef.value) {
observer.unobserve(imgRef.value)
observer.disconnect()
}
})
</script>
<style scoped>
.lazy-image {
width: 100%;
height: auto;
background: #f0f0f0; /* 占位背景 */
transition: opacity 0.3s;
}
</style>效果：我把项目里的 30 张商品图全换成这个组件后，首屏加载时间从 3.2 秒降到 1.8 秒，滚动时 CPU 占用从 70%降到 20%，QA 小姐姐直接给我发了个“666”的表情包。
兼容性：支持 Chrome 51+、Firefox 55+、Edge 15+， IE 需要 polyfill（推荐用@vueuse/core的useIntersectionObserver，已经帮你处理了兼容性）。
👉 MDN 文档：IntersectionObserver
👉 Can I Use：IntersectionObserver 支持情况
⏳ 2. requestIdleCallback：把非关键任务丢到“空闲时段”
痛点：埋点上报、预加载下一页数据、清理本地缓存——这些“不重要但必须做”的任务，放在主线程里会抢渲染的资源，导致点击按钮“延迟半秒才有反应”。
API 作用：告诉浏览器：“等你忙完渲染、用户输入这些大事，再帮我执行这个小任务”，完全不阻塞高优先级操作。
Vue3 实战：埋点上报优化
ts
// composables/useAnalytics.ts
import { onMounted } from 'vue'
export function useAnalytics() {
const sendEvent = (eventName: string, data: Record<string, any>) => {
// 用requestIdleCallback包裹埋点，避免阻塞渲染
if ('requestIdleCallback' in window) {
window.requestIdleCallback(() => {
fetch('/api/analytics', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ eventName, ...data }),
})
})
} else {
// 兼容旧浏览器：用setTimeout兜底
setTimeout(() => {
fetch('/api/analytics', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ eventName, ...data }),
})
}, 0)
}
}
return { sendEvent }
}用法：在组件里调用
vue
<!-- views/Home.vue -->
<script setup lang="ts">
import { useAnalytics } from '@/composables/useAnalytics'
const { sendEvent } = useAnalytics()
const handleButtonClick = () => {
// 先执行用户交互（比如打开弹窗），再上报埋点
openModal()
sendEvent('button_click', { buttonId: 'buy-now' })
}
</script>注意：requestIdleCallback的回调执行时间上限是 50ms（避免占用太多空闲时间），所以不要放太耗时的操作（比如循环 1000 次）——这种情况请用Web Workers（后面会讲）。
👉 MDN 文档：requestIdleCallback
🎬 3. requestAnimationFrame：动画就该“跟屏幕刷新率同步”
痛点：以前用setTimeout做动画，比如“弹窗从顶部滑入”，结果要么“卡帧”（因为setTimeout的时间不准），要么“过度绘制”（比如 120Hz 屏幕下，setTimeout(16)会触发 7 次，但屏幕只需要 6 次）。
API 作用：浏览器原生的“动画帧同步器”，自动适配屏幕刷新率（60Hz→16ms/帧，120Hz→8ms/帧），动画流畅度直接拉满！
Vue3 实战：弹窗滑入动画
vue
<!-- components/Modal.vue -->
<template>
<div
v-if="visible"
ref="modalRef"
class="modal"
>
<div class="modal-content">
<!-- 内容 -->
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
const props = defineProps<{
visible: boolean
}>()
const modalRef = ref<HTMLDivElement | null>(null)
let animationId: number | null = null
onMounted(() => {
if (props.visible && modalRef.value) {
let y = -100 // 初始位置：顶部之外
const animate = () => {
y += 5 // 每帧移动5px
modalRef.value!.style.transform = `translateY(${y}px)`
if (y < 0) {
// 没到目标位置，继续下一帧
animationId = requestAnimationFrame(animate)
}
}
// 启动动画
animationId = requestAnimationFrame(animate)
}
})
// 组件销毁时，取消动画（避免内存泄漏）
onUnmounted(() => {
if (animationId) cancelAnimationFrame(animationId)
})
</script>
<style scoped>
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: flex-start;
padding-top: 50px;
}
.modal-content {
width: 80%;
max-width: 500px;
background: white;
border-radius: 8px;
padding: 20px;
}
</style>效果：弹窗滑入时“丝滑得像德芙”，再也没有“一顿一顿”的感觉。
👉 MDN 文档：requestAnimationFrame
📏 4. ResizeObserver：监听元素尺寸变化的“精准工具”
痛点：以前监听元素尺寸变化，要么用window.resize（只能监听窗口变化，不能监听元素本身），要么用setInterval轮询（浪费性能）。比如图表组件，当容器尺寸变化时，需要重新渲染图表，但总不能让用户手动刷新吧？
API 作用：原生的“元素尺寸监听神器”，精准捕获元素宽高变化（不管是窗口 resize，还是父元素尺寸变化），完全不需要手动轮询！
Vue3 实战：自适应图表组件
vue
<!-- components/Chart.vue -->
<template>
<div
ref="containerRef"
class="chart-container"
>
<!-- 图表容器 -->
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { Chart } from 'echarts' // 假设用ECharts
const containerRef = ref<HTMLDivElement | null>(null)
let chart: Chart | null = null
let observer: ResizeObserver | null = null
onMounted(() => {
if (containerRef.value) {
// 初始化图表
chart = new Chart(containerRef.value)
renderChart()
// 监听容器尺寸变化
observer = new ResizeObserver((entries) => {
entries.forEach((entry) => {
// 容器尺寸变化，重新渲染图表
chart?.resize({
width: entry.contentRect.width,
height: entry.contentRect.height,
})
})
})
observer.observe(containerRef.value)
}
})
const renderChart = () => {
if (chart) {
chart.setOption({
// ECharts配置
xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed'] },
yAxis: { type: 'value' },
series: [{ type: 'bar', data: [10, 20, 30] }],
})
}
}
onUnmounted(() => {
// 清理资源
if (observer && containerRef.value) {
observer.unobserve(containerRef.value)
observer.disconnect()
}
chart?.dispose()
})
</script>
<style scoped>
.chart-container {
width: 100%;
height: 400px;
}
</style>效果：当父组件的宽度从1000px缩小到500px时，图表自动适配尺寸，再也不用手动调用resize()了！
👉 MDN 文档：ResizeObserver
👉 Can I Use：ResizeObserver 支持情况
⏱️ 5. performance.now()：精准测量“每一行代码的耗时”
痛点：以前用Date.now()测量函数耗时，结果要么“误差大”（因为Date.now()依赖系统时间，可能被修改），要么“精度低”（只能到毫秒级），根本测不出“某段代码是不是多花了 0.5ms”。
API 作用：高精度时间戳（精确到微秒级），专门用来测量性能，不会被系统时间干扰！
实战：测量函数耗时
ts
// 测量“处理1000条数据”的耗时
const processData = (data: any[]) => {
return data.map((item) => ({
...item,
formattedTime: new Date(item.time).toLocaleString(),
}))
}
const start = performance.now()
const result = processData(largeData) // largeData是1000条数据
const end = performance.now()
console.log(`处理1000条数据耗时：${(end - start).toFixed(2)}ms`)
// 输出：处理1000条数据耗时：1.23ms进阶：用performance.mark()和performance.measure()标记“关键流程”的耗时：
ts
// 标记开始
performance.mark('fetch-start')
// 发起请求
await fetch('/api/data')
// 标记结束
performance.mark('fetch-end')
// 测量耗时
performance.measure('fetch-duration', 'fetch-start', 'fetch-end')
// 获取结果
const measure = performance.getEntriesByName('fetch-duration')[0]
console.log(`接口请求耗时：${measure.duration.toFixed(2)}ms`)👉 MDN 文档：performance.now()
🚀 6. preload/prefetch：资源预加载的“双煞”
痛点：首屏加载慢，要么是“关键资源加载晚”（比如 CSS 没加载完，页面一片空白），要么是“下一页资源加载慢”（比如点“我的”要等 2 秒才出来）。
API 作用：
preload：强制优先加载关键资源（比如首屏 CSS、字体），避免“白屏”或“文字闪动”；prefetch：空闲时预加载未来资源（比如下一页的 JS、数据），实现“秒开”跳转。
Vue 项目中的使用场景
1. 预加载关键 CSS 和字体（index.html）
html
<!-- public/index.html -->
<head>
<!-- 预加载首屏关键CSS（必须立刻加载） -->
<link
rel="preload"
href="/css/app.css"
as="style"
/>
<!-- 预加载字体（避免文字闪动） -->
<link
rel="preload"
href="/fonts/Roboto-Regular.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<!-- 预加载首屏JS（Vue入口文件） -->
<link
rel="preload"
href="/js/chunk-vendors.js"
as="script"
/>
</head>2. 预加载下一页资源（vue-router）
ts
// router/index.ts
import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
import Profile from '@/views/Profile.vue'
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/', component: Home },
{ path: '/profile', component: Profile },
],
})
// 导航守卫：预加载下一页的JS
router.beforeEach((to, from, next) => {
if (to.path === '/profile') {
// 预加载Profile组件的JS（假设webpack分割了chunk）
const link = document.createElement('link')
link.rel = 'prefetch'
link.href = '/js/chunk-profile.js'
document.head.appendChild(link)
}
next()
})效果：首屏加载时间从 3.2 秒降到 1.8 秒，下一页跳转从 2 秒降到 0.5 秒，用户直接喊“怎么这么快？”
注意：
preload不要滥用（比如预加载非关键资源），否则会“抢占”其他资源的带宽；prefetch只预加载“高概率会访问”的资源（比如“我的”页面，用户 80%会点），否则会浪费流量。
💾 7. Cache API + Service Worker：让页面“离线也能打开”
痛点：用户在地铁里没网，打开页面一片空白；或者弱网环境下，图片加载慢得像“龟爬”。
API 作用：
Cache API：把静态资源（CSS、JS、图片）存到客户端缓存，下次访问直接从缓存读；Service Worker：拦截网络请求，优先返回缓存内容，实现“离线可用”（PWA 的核心）。
Vue PWA 实战（用@vue/cli-plugin-pwa）
1. 安装插件
bash
vue add pwaVue PWA 实战（用@vue/cli-plugin-pwa）
1. 安装插件
bash
vue add pwa插件会自动生成：
src/registerServiceWorker.ts：Service Worker 注册脚本；public/service-worker.js：默认的 Service Worker 逻辑（可自定义）；vue.config.js：PWA 配置项（比如图标、名称）。
2. 自定义缓存策略：缓存 API 数据+静态资源
默认的 Service Worker 只会缓存静态资源（CSS、JS、图片），但我们可以扩展它拦截 API 请求，把接口数据也存起来——这样用户离线时，还能看到之前加载过的内容（比如首页的商品列表）。
修改public/service-worker.js（关键部分）：
js
// public/service-worker.js
const CACHE_NAME = 'app-cache-v1' // 缓存版本号，更新时改这个
const STATIC_ASSETS = [
// 要缓存的静态资源
'/',
'/index.html',
'/css/app.css',
'/js/chunk-vendors.js',
'/js/app.js',
]
const API_ENDPOINTS = [
// 要缓存的API接口
'/api/home/products', // 首页商品列表接口
]
// 安装阶段：缓存静态资源
self.addEventListener('install', (event) => {
event.waitUntil(
caches
.open(CACHE_NAME)
.then((cache) => cache.addAll(STATIC_ASSETS)) // 缓存静态资源
.then(() => self.skipWaiting()) // 强制激活新的Service Worker
)
})
// 激活阶段：清理旧缓存
self.addEventListener('activate', (event) => {
event.waitUntil(
caches
.keys()
.then((cacheNames) => {
// 删除旧版本的缓存
return Promise.all(
cacheNames
.filter((name) => name !== CACHE_NAME)
.map((name) => caches.delete(name))
)
})
.then(() => self.clients.claim()) // 让所有客户端使用新的Service Worker
)
})
// 拦截网络请求：缓存优先 + 网络兜底
self.addEventListener('fetch', (event) => {
const url = new URL(event.request.url)
// 1. 处理静态资源（优先从缓存读）
if (STATIC_ASSETS.includes(url.pathname)) {
event.respondWith(
caches
.match(event.request)
.then((cached) => cached || fetch(event.request))
)
return
}
// 2. 处理API请求（网络优先，缓存兜底 + 更新缓存）
if (API_ENDPOINTS.some((endpoint) => url.pathname.startsWith(endpoint))) {
event.respondWith(
caches.open(CACHE_NAME).then((cache) => {
return fetch(event.request)
.then((response) => {
// 网络请求成功：更新缓存
cache.put(event.request, response.clone())
return response
})
.catch(() => {
// 网络失败：从缓存读
return cache.match(event.request)
})
})
)
return
}
// 3. 其他请求：默认走网络
event.respondWith(fetch(event.request))
})代码解释：
CACHE_NAME：缓存版本号，每次更新缓存时改这个名字（比如app-cache-v2），旧缓存会被自动清理；install阶段：缓存静态资源，skipWaiting()强制跳过“等待”阶段，直接激活新的 Service Worker；activate阶段：删除旧版本缓存，clients.claim()让所有打开的页面立刻使用新的 Service Worker；fetch阶段：- 静态资源：缓存优先（快）；
- API 接口：网络优先，缓存兜底（保证数据新鲜，同时离线可用）；
3. Vue 组件中处理离线状态：显示提示
光有 Service Worker 还不够，得让用户知道“现在是离线模式”——用navigator.onLine判断在线状态，结合 Vue3 的响应式：
vue
<!-- components/OfflineTip.vue -->
<template>
<div
v-if="isOffline"
class="offline-tip"
>
📴 离线模式，数据来自本地缓存
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
const isOffline = ref(!navigator.onLine) // 初始状态
// 监听在线/离线事件
const handleOnline = () => (isOffline.value = false)
const handleOffline = () => (isOffline.value = true)
onMounted(() => {
window.addEventListener('online', handleOnline)
window.addEventListener('offline', handleOffline)
})
onUnmounted(() => {
window.removeEventListener('online', handleOnline)
window.removeEventListener('offline', handleOffline)
})
</script>
<style scoped>
.offline-tip {
position: fixed;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
padding: 8px 16px;
background: #f56c6c;
color: white;
border-radius: 4px;
font-size: 14px;
z-index: 999;
}
</style>用法：在首页组件中引入
vue
<!-- views/Home.vue -->
<template>
<OfflineTip />
<div class="home">
<h1>首页商品列表</h1>
<ul v-if="products.length">
<li
v-for="item in products"
:key="item.id"
>
{{ item.name }}
</li>
</ul>
<div
v-else
class="loading"
>
加载中...
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import OfflineTip from '@/components/OfflineTip.vue'
const products = ref<any[]>([])
const fetchProducts = async () => {
try {
const res = await fetch('/api/home/products')
const data = await res.json()
products.value = data
} catch (err) {
console.log('请求失败（可能离线），尝试从缓存读')
// 手动从Cache API读（可选，因为Service Worker已经处理了）
const cache = await caches.open('app-cache-v1')
const cachedRes = await cache.match('/api/home/products')
if (cachedRes) {
const cachedData = await cachedRes.json()
products.value = cachedData
}
}
}
onMounted(() => {
fetchProducts()
})
</script>4. 调试与验证：看看缓存有没有生效
打开 Chrome DevTools → Application面板：
- Service Workers：查看是否激活（Status 显示“Active running”）；
- Cache Storage：查看
app-cache-v1中的缓存内容（静态资源+API 数据）； - Network：勾选“Offline”模拟离线状态，刷新页面——首页商品列表依然能显示（来自缓存）！
5. 注意事项
- HTTPS 要求：Service Worker 只能在 HTTPS 下运行（本地
localhost或127.0.0.1可以开发）； - 缓存更新：修改 Service Worker 后，要关闭所有页面再重新打开（或在 DevTools 中点击“Update”），新的 Service Worker 才会生效；
- 缓存大小限制：浏览器对 Cache Storage 的大小有限制（一般 50MB~200MB），不要缓存太大的文件（比如视频）；
💪 8. Web Workers：把重任务“丢到后台线程”
痛点：项目中有个“批量导出 Excel”的功能——要处理 1 万条数据，生成复杂的表格，一执行页面就“卡死”，用户连取消按钮都点不了。
API 作用：Web Workers让你开一个后台线程，专门处理耗时任务（比如大数据计算、文件解析），主线程完全不卡！
Vue3+TS 实战：批量导出 Excel
1. 编写 Worker 脚本（src/workers/excel.worker.ts）
ts
// src/workers/excel.worker.ts
// 注意：Worker脚本不能直接导入Vue的依赖，要保持独立！
import { utils, write } from 'xlsx' // 用xlsx库生成Excel
// 监听主线程的消息
self.addEventListener('message', (e) => {
const { data } = e // 主线程传来的1万条数据
try {
// 耗时操作：生成Excel
const worksheet = utils.json_to_sheet(data)
const workbook = utils.book_new()
utils.book_append_sheet(workbook, worksheet, 'Sheet1')
const excelBuffer = write(workbook, { bookType: 'xlsx', type: 'array' })
// 把结果发回主线程
self.postMessage({ success: true, data: excelBuffer })
} catch (err) {
self.postMessage({ success: false, error: err.message })
}
})2. Vue 组件中使用 Worker
vue
<!-- components/ExportButton.vue -->
<template>
<button
@click="handleExport"
:disabled="isExporting"
class="export-btn"
>
{{ isExporting ? '导出中...' : '批量导出Excel' }}
</button>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const isExporting = ref(false)
const handleExport = async () => {
isExporting.value = true
try {
// 1. 获取要导出的数据（比如从接口拿1万条）
const res = await fetch('/api/products?limit=10000')
const data = await res.json()
// 2. 创建Web Worker（Vite用户直接用，Vue CLI需配置worker-loader）
const worker = new Worker(
new URL('@/workers/excel.worker.ts', import.meta.url),
{
type: 'module',
}
)
// 3. 给Worker发数据
worker.postMessage(data)
// 4. 监听Worker的返回结果
worker.addEventListener('message', (e) => {
const { success, data: excelBuffer, error } = e.data
if (success) {
// 生成下载链接
const blob = new Blob([excelBuffer], {
type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
})
const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = url
a.download = 'products.xlsx'
a.click()
URL.revokeObjectURL(url) // 释放URL对象
} else {
alert(`导出失败：${error}`)
}
isExporting.value = false
worker.terminate() // 结束Worker，释放资源
})
// 5. 监听Worker错误
worker.addEventListener('error', (err) => {
alert(`Worker出错：${err.message}`)
isExporting.value = false
worker.terminate()
})
} catch (err) {
alert(`导出失败：${(err as Error).message}`)
isExporting.value = false
}
}
</script>
<style scoped>
.export-btn {
padding: 8px 16px;
background: #409eff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
.export-btn:disabled {
background: #b3d8ff;
cursor: not-allowed;
}
</style>3. 关键说明
- Worker 的限制：
- 不能访问 DOM（比如
document、window）； - 不能直接使用 Vue 的响应式数据（要通过
postMessage传递）； - 每个 Worker 都是独立的线程，创建太多会占用过多内存（建议用完就
terminate()）；
- 不能访问 DOM（比如
- Vue CLI 配置：如果用 Vue CLI，需要安装
worker-loader并修改vue.config.js，让 Webpack 识别 Worker 文件：js// vue.config.js module.exports = { chainWebpack: (config) => { config.module .rule('worker') .test(/\.worker\.ts$/) .use('worker-loader') .loader('worker-loader') .end() }, }
👀 9. document.visibilityState：页面不可见时“省点电”
痛点：用户切到别的标签页，我们的页面还在疯狂轮询接口（比如每 10 秒查一次订单状态），既浪费用户流量，又让手机发烫。
API 作用：document.visibilityState能判断页面是否可见（用户是否在当前标签页），不可见时暂停轮询、视频播放，回来再恢复。
Vue3 实战：暂停轮询
vue
<!-- components/OrderPolling.vue -->
<template>
<div class="order-polling">当前订单状态：{{ orderStatus }}</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
const orderStatus = ref('待支付')
let pollTimer: number | null = null
// 轮询接口：查订单状态
const pollOrderStatus = async () => {
const res = await fetch('/api/order/status?orderId=123')
const data = await res.json()
orderStatus.value = data.status
}
// 页面可见时，启动轮询；不可见时，暂停
const handleVisibilityChange = () => {
if (document.visibilityState === 'visible') {
// 回到当前标签页，立即查一次，再启动轮询
pollOrderStatus()
pollTimer = setInterval(pollOrderStatus, 10000)
} else {
// 切走了，暂停轮询
if (pollTimer) clearInterval(pollTimer)
}
}
onMounted(() => {
// 初始启动轮询
pollOrderStatus()
pollTimer = setInterval(pollOrderStatus, 10000)
// 监听页面可见性变化
document.addEventListener('visibilitychange', handleVisibilityChange)
})
onUnmounted(() => {
// 清理定时器和事件监听
if (pollTimer) clearInterval(pollTimer)
document.removeEventListener('visibilitychange', handleVisibilityChange)
})
</script>📊 最后：性能优化的“闭环”
用了这 9 个 API 后，我们的项目数据：
- 首屏加载时间从 3.2 秒降到 1.1 秒（下降 65%）；
- 滚动帧率从 45fps 升到 58fps（接近满帧）；
- 手机发烫问题基本解决（CPU 占用从 70%降到 25%）；
- QA 小姐姐再也没来找我“聊聊天”了～
性能优化的核心逻辑
- 减少主线程工作：用
IntersectionObserver、requestIdleCallback、Web Workers把任务“移出”主线程； - 提前加载资源：用
preload、prefetch让关键资源“早加载”； - 利用缓存：用
Cache API、Service Worker让资源“不用重新加载”； - 按需执行任务：用
document.visibilityState让非必要任务“不瞎跑”。
🚀 未来展望
现代浏览器的 API 还在进化，比如：
PerformanceObserver：实时监听性能指标（比如 FPS 下降、长任务）；UserActivation：判断用户是否“主动交互”（避免滥用自动播放）；Fenced Frame：隔离第三方内容（比如广告），避免影响主页面性能。
性能优化不是“一锤子买卖”，而是“持续迭代”——定期用 Lighthouse（Chrome DevTools 的 Lighthouse 面板）做性能审计，总能找到新的优化点！
最后送大家一句话：
性能优化的本质，是“把对的资源，在对的时间，用对的方式，送到用户面前”。
希望这 9 个 API 能帮你解决项目中的“卡慢烫”问题，咱们下次聊更进阶的性能优化技巧～ 😊
这是关于赞助的一些描述
- 本文链接：https://fridolph.top/posts/2025-07-15__jsApi
- 版权声明：本博客所有文章除特别声明外，均默认采用 CC BY-NC-SA 许可协议。
