一、加载性能指标与核心目标
- 1、首次内容绘制（FCP）：首次呈现DOM内容的时间
- 2、最大内容绘制（LCP） ：最大可视元素渲染完成时间
- 3、首次输入延迟（FID）：用户首次交互到浏览器响应的延迟
- 4、累计布局偏移（CLS）：视觉稳定性指标
二、页面加载缓慢的原因
1、网络请求
资源文件如（图片、JS、CSS）过大、过多；服务器响应慢或距离用户远；未充分利用缓存。
2、渲染性能
CSS或JS文件阻塞渲染；DOM结构复杂、操作频繁；大量或未优化的图片/动画。
3、容器初始化
WebView首次创建开销大，页面加载流程串行。
4、前端代码与资源
首屏JS执行/数据依赖过重；资源未压缩。
可以根据以下表格判断加载慢的瓶颈点
| 页面表现 | 优先检查 |
|---|---|
| 首次打开特别慢，二次打开快 | 网络请求、webview加载 |
| 一直很慢，图片加载尤其久 | 图片等资源体积与加载策略 |
| 内容逐渐显示，但白屏时间长 | JS/CSS阻塞 & 首屏数据依赖 |
三、优化方向
1、网络层优化策略
- 预连接关键资源域名
<link rel="preconnect" href="***" crossorigin />
<link rel="dns-prefetch" href="***" />
- CDN预热
- 加载离线包
2、图片加载优化
- 图片添加 loading="lazy" 属性，实现懒加载
<img src="https://img.com" loading="lazy" alt="展开" />
- 图片压缩（TinyPNG、Squoosh）
3、组件懒加载
- 使用Suspense 懒加载非首屏元素
<Suspense fallback={null}>
<RedPacketModal
***
/>
</Suspense>
- 将弹窗动态导入实现代码分割
const InviteModal = React.lazy(() => import('./invite-modal/inviteModal'));
- 图片懒加载
import LazyLoad from 'react-lazyload';
<LazyLoad height={200} offset={100}>
<img src="image.jpg" />
</LazyLoad>
4、使用浏览器的API
使用 requestAnimationFrame 延迟执行，避免阻塞渲染
useEffect(() => {
requestAnimationFrame(() => {
// 上报埋点
});
}, [])
首屏渲染的时候，用requestIdleCallback延迟执行非关键操作
// 非关键操作
const initNonCritical = () => {
**
}
if ('requestIdleCallback' in window) {
requestIdleCallback(initNonCritical, { timeout: 1000 });
} else {
setTimeout(initNonCritical, 100);
}
三、结束语
H5性能优化是一个系统工程，需要从网络传输、资源加载、渲染机制到缓存策略等多个维度综合考虑。未来可以考虑用AI优化加载。
