一、基础调试工具使用
1. 打开开发者工具：按F12或右键点击页面选择“检查”→切换到Network面板查看资源加载情况。
2. 录制加载过程：在Network面板点击“录制”按钮后刷新页面→生成详细请求时间线。
3. 分析瀑布图数据：查看各资源加载顺序与时长→识别阻塞渲染的关键文件。
二、关键指标优化
1. 减少主线程任务：在Console面板输入`performance.now()`→测量函数执行时间→将超过50ms的任务拆分。
2. 压缩图片资源：在Audits面板查看“图像优化”建议→使用TinyPNG等工具压缩后替换。
3. 启用文本压缩：检查服务器是否支持GZIP→在响应头添加`Content-Encoding: gzip`→减小HTML/CSS/JS体积。
三、缓存策略调整
1. 设置强缓存：在扩展商店安装“Cache Control”→配置CSS/JS缓存时间为365天→避免重复请求。
2. 预加载关键资源：在HTML头部添加link rel="preload" href="main.css"→提前获取样式表。
3. 清理过期缓存：按Ctrl+Shift+Del组合键→选择“缓存图像和文件”→删除无效存储内容。
四、网络请求优化
1. 合并小文件：将碎图/小CSS合并为单一文件→减少HTTP请求次数。
2. 启用HTTP/2：在地址栏输入`chrome://flags/enable-http2`→强制使用多路复用协议→提升传输效率。
3. 延迟非必要请求：在代码中添加`setTimeout(loadImage, 2000)`→延后加载非首屏资源。
五、渲染性能提升
1. 移除渲染阻塞：将``标签移至body前→防止阻塞页面初始化。
2. 启用GPU加速：在设置的“外观”板块开启“硬件加速”→利用显卡渲染复杂动画。
3. 减少DOM操作：在开发者工具的Elements面板批量修改属性→避免频繁触发布局计算。