脚本执行延迟直接影响首屏交互就绪时间；应避免中无属性同步脚本，依赖dom的用defer，独立脚本用async，推荐type="module"，拆分长任务，禁用document.write()和同步api。
页面脚本执行延迟直接影响用户可感知的交互就绪时间，尤其在首屏渲染完成后仍卡顿，往往不是网络慢，而是脚本在主线程上耗时过长或调度不合理。
脚本位置与加载方式不当
默认同步脚本会中断 HTML 解析，导致 DOM 构建停滞；若放在 中且体积较大，用户可能长时间面对白屏。即使移到 前，若未加 defer 或 type="module"，仍可能拖慢 DOMContentLoaded 触发时机。
- 避免在 内直接写 <script src="..."></script>（无属性）
- 依赖 DOM 的初始化脚本优先用 defer，确保按序执行且不阻塞解析
- 纯功能型脚本（如统计、广告）可用 async，但注意其执行时机不可控
- 现代项目推荐 type="module"，自带 defer 行为，支持顶层 await 和静态分析
长任务阻塞主线程
单个 JS 任务执行超 50ms 就会引发明显卡顿，移动端更敏感。常见诱因包括：未分片的大循环、同步 AJAX、频繁读写 DOM 属性（如连续访问 offsetHeight 后立即修改 style）、滥用 document.write()（强制重排）。
- 用 setTimeout 或 requestIdleCallback 拆分耗时逻辑
- 避免在循环中反复查询 DOM 元素，应提前缓存引用
- 禁用 alert()、confirm() 等同步阻塞 API
- 检查第三方 SDK 是否含长任务，必要时沙箱隔离或异步包裹
资源依赖与执行顺序混乱
脚本间隐式依赖（如 A 脚本需 B 提供全局变量）却未控制加载顺序，会导致运行时报错或逻辑跳过；而过度使用 async 可能让依赖脚本尚未就绪，主逻辑已执行。
- 明确依赖关系后，用 defer 保证顺序，或改用 ES 模块静态导入
- 动态引入场景（如点击后加载图表库）必须用 import()，配合 try/catch 处理失败
- 同域嵌入页若共用基础库，可由主页面提供并暴露给 window.parent，避免重复解析执行
环境与兼容性干扰
开发环境插件（如 React DevTools、Vue Devtools）、浏览器扩展、旧版 polyfill 注入的补丁代码，都可能增加脚本解析和执行开销；部分安卓 WebView 对 async/defer 支持不一致，也会造成行为偏差。
- 用 Chrome DevTools 的 Performance 面板录制，重点关注 Script Evaluation 阶段耗时
- 对比无痕模式与普通模式表现，排除扩展干扰
- 对低版本 WebView，降级使用 IntersectionObserver + 动态设置 src 替代 loading="lazy"
- 避免在生产环境保留未压缩的源码映射（.map 文件）或调试语句
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
