一、使用开发者工具分析性能
1. 打开性能面板：按 `F12` 或右键点击页面选择“检查” → 切换到“Performance”标签页 → 点击“录制”按钮并操作页面，生成加载报告。
2. 查看关键指标：在报告中定位“First Contentful Paint”（首次内容绘制）和“Time to Interactive”（可交互时间），识别延迟瓶颈。
3. 捕获堆快照：在“Memory”面板点击“Heap snapshot”，分析内存占用情况，清理未释放的变量或监听器。
二、优化资源加载策略
1. 启用压缩传输：在地址栏输入 `chrome://flags/` → 搜索“Brotli” → 启用“Brotli代替gzip压缩”，减少文本资源体积。
2. 设置缓存规则：进入开发者工具的“Network”面板 → 右键点击资源文件（如`.css`）→ 选择“修改请求头” → 添加`Cache-Control: max-age=31536000`，延长静态资源缓存时间。
3. 预加载关键资源：在HTML代码的head部分插入link rel="preload" href="style.css"，提前加载核心样式表，避免渲染阻塞。
三、减少主线程任务
1. 延迟执行脚本：将script src="app.js"改为script src="app.js" defer，让脚本在DOM加载完成后执行，防止阻塞渲染。
2. 拆分任务队列：使用`setTimeout(() => { heavyTask() }, 0)`将复杂计算分割到浏览器空闲时段，避免卡顿。
3. 禁用动画帧：在开发者工具的“Rendering”面板关闭“Composite layers”，限制图层合成频率，降低GPU压力。
四、优化图片与媒体资源
1. 启用图片懒加载：在img标签添加`loading="lazy"`属性，仅在用户滚动到视图时加载图片，节省带宽。
2. 压缩媒体文件：使用Chrome自带的“WebM”格式替代传统视频，右键点击视频元素 → 选择“检查” → 修改video标签为video src="video.webm"，减小文件体积。
3. 设置图片分辨率：在CSS中定义`image-resolution: 1x`，限制高分辨率屏幕加载过大图片，通过开发者工具的“Styles”面板实时调整效果。
五、利用网络请求优化
1. 合并HTTP请求：在“Network”面板按资源类型排序 → 右键点击多个`.js`文件 → 选择“合并请求”，减少TCP连接次数。
2. 启用HTTP/2：在地址栏输入 `chrome://net-internals/http2` → 检查协议版本，确保服务器支持多路复用，提升并发能力。
3. 设置资源优先级：在HTML头部添加link rel="preconnect" href="//cdn.example.com"，提前建立与外部资源的连接，缩短等待时间。
六、自动化测试与持续优化
1. 使用Lighthouse工具：在开发者工具中点击“Lighthouse” → 生成性能、可访问性等评分报告 → 根据建议修复问题（如移除未使用的CSS）。
2. 模拟低网速环境：在“Network”面板勾选“Throttling” → 选择“Regular 3G”或自定义带宽（如500Kbps），测试弱网下的加载表现。
3. 监控线上性能：安装PageSpeed Insights插件 → 输入网页URL → 获取实时优化建议（如减少服务器响应时间），持续迭代改进。