详情介绍
- 打开开发者工具（F12）→点击“Lighthouse”→选择“性能”→点击“生成报告”→查看性能评分及优化建议（如减少主线程任务）。
- 在报告中→展开“诊断”部分→直接跳转到影响加载速度的具体代码位置（如未压缩的图片或冗余JS）。
2. 分析Network面板数据
- 刷新页面后→按资源类型筛选（如Doc、Script、Image）→识别加载时间过长的请求（红色标记为关键路径）。
- 右键点击资源→选择“Block Request”→模拟禁用某些文件→测试对页面渲染的影响（如禁用第三方广告脚本）。
3. 优化JavaScript执行
- 在“Sources”面板→找到主JS文件→点击“Coverage”→查看未使用的代码（删除可减少文件大小）。
- 使用“Performance”面板→录制页面操作→查看“火焰图”中长任务（如超过50ms的函数）→优化或懒加载此类代码。
4. 压缩与缓存资源
- 在Network面板→检查资源是否启用Gzip压缩（状态码206表示成功）。
- 右键点击CSS/JS文件→选择“清除缓存”→强制浏览器重新加载最新版本（避免旧缓存导致性能问题）。
5. 模拟移动网络测试
- 在开发者工具→点击“Toggle device toolbar”→选择移动设备（如iPhone X）→设置网络速度为“Slow 3G”。
- 刷新页面→观察资源加载顺序→优先加载首屏内容（如将关键CSS内联到HTML）。
6. 禁用不必要的样式与脚本
- 在“Styles”面板→勾选“Disable Style Edits”→临时禁用所有自定义CSS→排查样式冲突导致的重绘。
- 使用“Workbook”扩展→阻止非核心脚本执行→提升页面交互响应速度（如禁用分享按钮的JS）。
