在日常的 Web 应用开发中，流畅的用户体验离不开高性能的渲染与响应策略。本文将为你梳理 7 种前端性能优化的利器，涵盖浏览器原生 API 与 React 18+ 提供的 Hook，帮助你在动画、空闲任务、输入交互、懒加载和网络优化等场景下游刃有余。
一、requestAnimationFrame
作用：在浏览器下一次重绘前执行回调，用于实现高性能动画，避免丢帧。
function animate() {
// 执行动画逻辑
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
注意事项：
- 后台标签页不执行，浏览器会挂起回调以节省资源。
- 回调执行时机随帧率和系统负载浮动，误差在几毫秒内。
- 持续动画必须在回调内部再次调用。
兼容性：
-
支持：Chrome 10+、Firefox 4+、Safari 6+、Edge 12+、IE10+
-
不支持：IE9 及以下，可用以下 polyfill：
window.requestAnimationFrame = window.requestAnimationFrame || function(cb){ return setTimeout(cb, 1000/60); };
二、requestIdleCallback
作用：在浏览器空闲时执行低优先级任务，不阻塞主渲染，适合预加载、日志上报等场景。
requestIdleCallback(deadline => {
while (deadline.timeRemaining() > 0) {
// 执行低优先级任务
}
});
注意事项：
- 任务有可能被延迟或取消，应基于
deadline.timeRemaining()划分子任务。 - 不适合动画、用户输入等高优先级需求。
兼容性：
-
支持：Chrome 47+、Edge 79+
-
不支持：Firefox、Safari、IE，建议使用
setTimeout回退：window.requestIdleCallback = window.requestIdleCallback || function(cb){ return setTimeout(() => cb({ timeRemaining: () => 50 }), 1); };
三、useTransition（React Hook）
作用：将状态更新标记为“非紧急”，保持界面流畅，避免大规模渲染阻塞用户操作。
import { useTransition, useState } from 'react';
function App() {
const [isPending, startTransition] = useTransition();
const [filter, setFilter] = useState('');
function onChange(e) {
setFilter(e.target.value);
startTransition(() => {
// 在此执行列表渲染或过滤
});
}
return (
<>
<input value={filter} onChange={onChange} placeholder="搜索..." />
{isPending ? <p>加载中...</p> : <List data={items} filter={filter} />}
</>
);
}
注意事项：
- 仅 React 18+ 可用；低版本需自行优化。
- 标记为非紧急的更新异步执行，注意结合加载态提醒用户。
- 数据量小的场景中，效果不明显。
四、useDeferredValue（React Hook）
作用：延迟高耗时状态的更新，提升用户输入的流畅度。
import { useState, useDeferredValue } from 'react';
function Search() {
const [q, setQ] = useState('');
const deferredQ = useDeferredValue(q);
return (
<>
<input
value={q}
onChange={e => setQ(e.target.value)}
placeholder="搜索关键词"
/>
<ResultList filter={deferredQ} />
</>
);
}
注意事项：
- 仅 React 18+ 支持。
- 只是延迟更新，不减少总计算量，复杂计算仍需
useMemo/useCallback。 - 不可代替
useTransition，仅针对单一值。
五、IntersectionObserver
作用：监听目标元素与视口的交叉状况，实现图片懒加载、无限滚动、滚动触发动画等。
const io = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// 元素可见，执行加载或动画
io.unobserve(entry.target);
}
});
});
io.observe(document.querySelector('#lazyImg'));
注意事项：
- 回调可能延迟，不适用于高精度滚动监听。
- 默认
threshold: 0，可配置触发比例。 - 大量元素观察需及时
unobserve，避免性能下降。
兼容性：
-
支持：Chrome 51+、Firefox 55+、Safari 12.1+、Edge 15+
-
不支持：IE，需引入 Polyfill：
npm install intersection-observer
六、Performance.now()
作用：微秒级高精度时间戳，用于精准性能测量。
const t0 = performance.now();
doHeavyTask();
console.log(`任务耗时：${performance.now() - t0} ms`);
兼容性：
支持：所有现代浏览器（IE10+）。
七、navigator.connection.effectiveType
作用：检测当前网络类型（4g / 3g / 2g / slow-2g），动态调整资源加载策略。
if (navigator.connection.effectiveType === '2g') {
// 网络慢时，减少图片分辨率或请求频率
}
注意事项：
- Safari 不支持，可做功能降级。
- 不同设备返回值可能不一致。
兼容性：
支持：Chrome 61+、Edge 79+、部分移动端。
不支持：Safari。
✨ 总结
通过本文介绍的 7 大 API 与 Hook，你可以在动画渲染、空闲计算、列表过滤、懒加载和网络适配等多个核心场景下显著提升前端性能，打造更加流畅的用户体验。赶快在项目中试用起来吧！
欢迎在评论区分享你的优化技巧或疑问~
