性能优化目标与指标
资源加载优化
代码优化
渲染与交互优化
网络与缓存优化
性能监控与分析
实战案例
练习与拓展
常见性能指标
- FCP（首次内容绘制）：页面首次有内容渲染
- LCP（最大内容绘制）：主内容区域最大元素渲染
- TTI（可交互时间）：页面可响应用户操作
- CLS（累积布局偏移）：页面元素跳动情况
// 使用Performance API获取FCP
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
if (entry.name === 'first-contentful-paint') {
console.log('FCP:', entry.startTime);
}
}
}).observe({ type: 'paint', buffered: true });