1. 使用Performance面板：按 `F12` 打开开发者工具 → 切换到“Performance”标签 → 点击“录制”并操作页面 → 查看报告中的“Scripting”和“Rendering”阶段，定位阻塞点（如长时间运行的JavaScript）。
2. 检查网络请求：在“Network”面板筛选“Doc”类型资源 → 确认HTML文档是否因未压缩或过大导致加载缓慢，右键点击文件选择“显示阻塞资源”。
二、优化关键资源加载顺序
1. 延迟非必要脚本：将script src="main.js"改为script src="main.js" defer，让脚本在DOM解析完成后执行，避免阻塞页面渲染。
2. 优先加载核心CSS：在head部分插入link rel="preload" href="style.css"，提前获取样式表，防止无样式内容闪烁（FOUC）。
3. 禁用Flash插件：进入设置 → 隐私与安全 → 取消勾选“允许Adobe Flash运行”，避免老旧插件干扰页面加载。
三、压缩与合并资源文件
1. 启用Brotli压缩：在地址栏输入 `chrome://flags/` → 搜索“Brotli” → 启用“Brotli代替gzip压缩”，减少文本资源体积。
2. 合并小文件请求：在“Network”面板按类型排序资源 → 右键点击多个CSS/JS文件 → 选择“合并请求”，降低TCP连接次数。
3. 清理冗余代码：使用Chrome自带的“Minify”功能，删除空格、注释和重复代码，直接在“Console”面板输入`document.querySelector('style').textContent = document.querySelector('style').textContent.replace(/\s+/g, '')`实时精简样式表。
四、利用缓存与预加载技术
1. 设置Cache-Control头：在“Network”面板右键点击资源文件 → 选择“修改请求头” → 添加`Cache-Control: max-age=31536000`，延长静态资源缓存时间。
2. 预加载关键资源：在HTML头部添加link rel="preconnect" href="//cdn.example.com"，提前建立与外部资源的连接，缩短等待时间。
3. 使用Service Workers：在“Application”面板注册离线缓存脚本 → 编写`install`事件处理程序，缓存核心资源（如字体、图片），减少重复网络请求。
五、优化图片与多媒体资源
1. 启用图片懒加载：在img标签添加`loading="lazy"`属性，仅在用户滚动到视图时加载图片，节省带宽。
2. 压缩图片体积：使用Chrome内置的“WebP”格式替代传统图片，右键点击图片元素 → 修改img标签为img src="image.webp"，减小文件大小。
3. 设置图片分辨率：在CSS中定义`image-resolution: 1x`，限制高分辨率屏幕加载过大图片，通过开发者工具的“Styles”面板实时调整效果。
六、修复JavaScript执行问题
1. 拆分长任务：将复杂计算分割为小段代码，例如使用`setTimeout(() => { heavyTask() }, 0)`，让浏览器有机会穿插渲染。
2. 避免同步API调用：在“Console”面板输入`if (!window.fetch) { alert('Fetch API未支持') }`，检测关键API是否可用，提供降级方案（如回退到XMLHttpRequest）。
3. 移除未使用的监听器：在“memory”面板多次点击“Heap snapshot”，对比内存占用情况，清理未释放的事件监听器（如`addEventListener`）。
