JavaScript优化核心是让主线程更早空出响应用户，需合理安排脚本加载（defer/async/requestIdleCallback）、拆分长任务（≤50ms）、减小解析开销、避免强制同步布局。
JavaScript 脚本解析与执行时间直接影响交互响应度（INP），因为浏览器主线程被长期占用时，用户点击、滚动等操作无法及时处理，导致延迟感知明显。优化核心不是“让代码跑得更快”，而是“让主线程更早空出来响应用户”。
把脚本加载时机调对，避免阻塞关键路径
页面首次渲染前，任何同步脚本都会暂停 HTML 解析和 DOM 构建，拖慢首屏内容呈现，间接拉高后续交互的等待起点。
-
<script>放在</body>前，比放在<head>中更安全，能确保 DOM 已基本就绪 - 关键逻辑用
defer：按顺序下载、DOM 解析完再执行，适合依赖 DOM 的初始化代码 - 独立功能（如统计、广告）用
async：异步下载+就绪即执行，不保证顺序，也不阻塞解析 - 完全非关键的脚本（如离线缓存、日志上报），可延迟到
requestIdleCallback中执行
拆分长任务，不让单次执行超过 50ms
INP 关注最差交互延迟，而单个 >50ms 的 JS 执行块极易成为瓶颈（比如一次循环渲染 1000 条数据）。
- 把大循环或复杂计算切片：用
setTimeout(fn, 0)或queueMicrotask()分批处理，每批控制在 20–30ms 内 - 对纯计算类逻辑（如 JSON 解析、坐标转换、加密），移出主线程，改用 Web Worker
- 使用
requestIdleCallback处理低优先级任务（如预加载、埋点聚合），确保空闲时段才运行
减少解析开销，让引擎更快进入执行阶段
JS 文件体积大、语法复杂，会延长解析时间，尤其影响冷启动体验。
- 启用现代构建工具（如 Vite、esbuild）做语法降级和代码分割，避免为兼容老浏览器打包冗余的 polyfill
- 移除未使用的代码（tree-shaking）和开发专用逻辑（如 console、debugger）
- 合理使用
type="module"：现代模块默认 defer，且支持静态导入分析，利于浏览器预加载和并行解析
避免隐式强制同步布局，防止执行被意外打断
看似普通的读写组合，可能触发浏览器回溯重排，使一次简单操作变成“解析→读布局→重排→执行→重绘”的长链。
- 不要在修改样式后立刻读取
offsetHeight、getBoundingClientRect()等布局信息 - 把所有读操作集中到前面，所有写操作集中到后面（读-写分离）
- 对需频繁更新的动画元素，优先用
transform和opacity，它们走合成层，不触发布局计算
基本上就这些。
