一、基础优化方法
1. 加载模式调整
- 在``标签添加`async`属性实现并行加载（如script async src="app.js"）
- 使用`defer`属性确保脚本按顺序执行但不影响解析（script defer src="vendor.js"）
- 通过动态创建``标签实现条件加载（如`document.createElement('script')`）
- 在HTML头部插入link rel="preload" href="main.js" as="script"提前获取资源
2. 资源分割策略
- 将核心功能代码与非关键代码分离（如script src="critical.js"优先加载）
- 使用代码分割工具（如Webpack）生成按需加载的chunk文件
- 通过`import()`动态导入模块（如`buttons.js`仅在需要时加载）
- 在扩展商店安装LazyloadJS延迟执行第三方脚本
3. 性能监控手段
- 在开发者工具中启用Long Task检测脚本卡顿（阈值设为50ms）
- 使用Performance面板分析脚本执行时间轴（查看Self Time指标）
- 通过Lighthouse报告检查`Total Blocking Time`评分
- 在地址栏输入`chrome://system/`开启JIT编译器优化选项