一、基础优化与调试方法
1. 减少主线程阻塞
- 在开发者工具Sources面板中查找未使用`async`或`defer`属性的脚本标签（如script src="app.js"）
- 使用扩展商店安装Script Injector将关键JS代码移至`DOMContentLoaded`事件后执行（避免阻塞渲染）
- 通过地址栏输入`chrome://flags/enable-javascript-execution`启用实验性JIT编译器（需重启浏览器）
- 在Console面板输入`performance.measureFirstPaint()`检测首次绘制时间，超过3秒需优化脚本加载顺序
2. 优化代码结构
- 在代码编辑器中使用Webpack或Rollup打包工具移除未使用的函数（如控制台日志代码）
- 使用扩展商店安装Minify All自动压缩JS代码（删除空格和注释字符）
- 通过开发者工具Coverage面板查看代码执行覆盖率，红色标记部分为无效代码（可直接删除）
- 在Console面板输入`window.addEventListener('load', () => { console.log('页面完全加载') })`确保事件监听在DOM就绪后执行
3. 异步处理与缓存
- 在Chrome设置的“隐私与安全”板块启用“预读取资源”功能（提前加载JS文件）
- 使用扩展商店安装Service Worker Editor编写缓存策略（如将第三方库缓存至IndexedDB）
- 通过开发者工具Application面板查看Cache Storage，手动删除过期脚本缓存（右键清理）
- 在Console面板输入`navigator.storage.estimate().then(console.log)`检测存储空间占用情况（建议保留至少20%空闲区）