教程详情
安装“Cache Control”扩展 → 设置规则（如 `*.js` → “缓存7天”）。此操作会强制浏览器保存JS文件到本地，后续访问时直接读取缓存（如从网络延迟200ms降至5ms），减少重复下载时间。
2. 异步加载非关键JS
通过“Asyncify”扩展自动修改页面代码（如将 script src="app.js" 替换为 script src="app.js" async）。此操作允许主线程继续渲染页面，后台并行加载脚本（如广告代码、社交分享组件），避免阻塞DOM解析。
3. 压缩与合并JS文件
安装“Minify Scripts”扩展 → 启用“压缩HTML内嵌脚本”。此插件会移除JS中的注释和空格（如将10KB文件压缩至6KB），并通过HTTP/2多路复用合并多个请求（如将5个JS合并为1个），减少TCP握手次数。
4. 优先执行关键JS逻辑
在 `manifest.json` 中声明内容脚本（如 `"content_scripts": [{"js": ["main.js"], "run_at": "document_start"}]`）。此配置会让插件脚本在页面加载初期执行（如用户登录检测），确保核心功能（如表单验证）优先于第三方脚本运行。
5. 利用Service Worker离线缓存资源
编写 `service-worker.js` → 注册消息监听（如 `self.addEventListener('message', (e) => { ... })`）。此方法可拦截网络请求（如CDN故障时），从本地存储提供JS文件（如缓存 `app.js`），保证执行连续性，避免因加载失败导致页面崩溃。
6. 动态加载按需模块
通过“Dynamic Module Loader”扩展注入代码（如 `import('./module.js')`）。此操作会按需加载功能模块（如地图组件仅在用户点击时加载），减少初始包大小（如从1MB降至300KB），提升首屏交互速度。
