未加 async 或 defer 的脚本会阻塞 HTML 解析，导致白屏和交互卡死；内联脚本立即执行并挂起 GUI 线程；DOM 频繁读写触发回流加剧卡顿；HTML 结构错误会使脚本被忽略；假死常由同步脚本、长任务与 DOM 操作叠加造成。
脚本没加 async 或 defer 就一定阻塞解析
只要 <script src="xxx.js"></script> 出现在 <head> 里，且没带 async 或 defer，浏览器就会暂停 HTML 解析、等待脚本下载并执行完，再继续建 DOM 树。白屏时间直接拉长，用户点不动、输不了——这不是“慢”，是“卡死”。
- 哪怕脚本内容只有一行
console.log(1)，HTTP 请求本身也会触发阻塞 -
<script>alert(1)</script>这种内联脚本更狠：不走网络，但立刻执行、立刻挂起 GUI 线程 - 移动端尤其敏感，50ms 以上的单次 JS 执行就可能丢帧，连续执行等于锁死触摸响应
DOM 操作密集导致渲染线程被挤占
JS 引擎和 GUI 渲染线程互斥。你在循环里反复读写 offsetHeight、style.left 或调用 document.getElementById()，每读一次都可能触发回流（reflow），每次回流都要等 JS 执行完才能画，结果就是“点了按钮没反应”“滚动卡成幻灯片”。
- 避免在 for 循环中查 DOM：
for (let i = 0; i → 提前缓存 <code>const list = document.querySelectorAll('[id^="item-"]'); - 批量修改样式优先用 class 切换，而不是逐个设
el.style.xxx - 禁用
document.write()—— 它会清空当前文档并重建 parser，强制重排，现代浏览器已标记为废弃
长任务未拆分引发主线程持续占用
一个函数执行超过 50ms，浏览器就判定为“长任务”，用户交互事件（点击、输入）会被压在队列尾部，直到它跑完。常见于数据处理、字符串匹配、深度遍历等场景，不是报错，但页面彻底失联。
- 用
setTimeout(fn, 0)或queueMicrotask()把大循环切成小块，每轮让出控制权 - 对数组操作优先用
Array.prototype.map/filter/reduce，它们内部优化更好；手写 for 时加if (i % 100 === 0) await new Promise(r => setTimeout(r)); - 第三方 SDK（如统计、客服浮窗）若含同步初始化逻辑，用
Web Worker包裹或延迟加载，别让它和首屏脚本抢主线程
HTML 结构错误让脚本根本没机会执行
脚本不报错、也不运行？先看结构是否合法。浏览器纠错能力有限，<html> 没闭合、<body> 缺开头、<script> 写在 <head> 外但又没 <body> 包裹——这些都会让脚本被忽略或延迟到极晚时机。
立即学习“前端免费学习笔记（深入）”；
- 必须有
<!DOCTYPE html>，否则进 Quirks 模式，defer行为异常 - 检查开发者工具的 Elements 面板：如果
<script>标签没出现在 DOM 树里，说明 HTML 解析阶段就被跳过了 - 用
console.log内联验证基础执行环境：<script>console.log('base ok');</script>放在</body>前，没输出=结构崩了
