1. 打开开发者工具
- 按`Ctrl+Shift+I`或`F12`打开开发者工具，切换到“Network（网络）”面板。
- 刷新页面（按`F5`或点击工具栏的刷新按钮），开始记录资源加载过程。
2. 分析资源加载情况
- 在“Network”面板中查看所有请求的资源类型（如HTML、CSS、JS、图片）。
- 按加载时间排序，找出耗时较长的资源（如大图、未压缩的脚本文件）。
3. 压缩和合并资源文件
- 检查请求头中的“Content-Encoding”，确保服务器返回了GZIP压缩的文件（状态码为`200`且大小明显减小）。
- 在“Network”面板中右键点击某个CSS或JS文件，选择“Block Request”临时禁用，观察页面功能是否受影响，必要时合并小文件。
4. 启用缓存机制
- 在“Network”面板中勾选“Disable Cache（禁用缓存）”后刷新页面，查看首次加载与二次加载的资源差异。
- 确保静态资源（如图片、CSS、JS）设置了正确的缓存头（如`max-age=31536000`），避免重复加载。
5. 优化图片加载
- 在“Elements（元素）”面板中找到img标签，检查图片是否使用了懒加载（`loading="lazy"`）或响应式设计（`srcset`属性）。
- 使用“Lighthouse（灯塔）”工具（在开发者工具中点击“Lighthouse”标签）生成报告，查看“Images”部分是否有压缩建议。
6. 减少DOM元素和重绘
- 在“Elements”面板中展开DOM树，检查是否存在冗余的嵌套标签（如多层div）。
- 在“Styles”面板中修改CSS属性时，避免触发“Recalculate Style（重新计算样式）”（如慎用`!important`）。
7. 异步加载JavaScript
- 在“Sources（资源）”面板中找到主JS文件，检查是否使用了`async`或`defer`属性（如script src="app.js" defer）。
- 将非关键JS（如统计代码）移到页面底部或动态插入，减少渲染阻塞。
8. 使用CDN加速资源分发
- 在“Network”面板中查看资源URL，确认是否来自CDN节点（如`https://cdn.example.com`）。
- 若资源仍来自原服务器，联系运维人员配置CDN服务（如阿里云、七牛云）。
9. 优化字体加载
- 在“Network”面板中筛选`.woff`或`.ttf`文件，检查字体文件大小是否过大。
- 使用“Font Display: swap”策略（在HTML头部添加link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous"）。
10. 模拟移动网络测试
- 在开发者工具右上角点击“Toggle Device Toolbar（切换设备模式）”，选择移动设备（如iPhone X）。
- 在“Network”面板中启用“Throttling（节流）”，设置为“Slow 3G”或自定义低带宽（如50Kbps），观察页面加载表现。