JavaScript应置于body底部或使用defer/async属性以避免阻塞渲染；内联长脚本和document.write()须禁用，优先外链并压缩。
JavaScript在HTML中的放置位置确实会影响页面渲染速度，核心在于它会阻塞HTML解析和页面渲染流程。
脚本放在中会显著延迟首屏显示
浏览器在解析HTML时，遇到<script>标签会暂停DOM构建，立即下载并执行JavaScript。如果脚本位于<head>中，且体积较大或网络较慢，用户将长时间看到空白页面，直到脚本加载执行完毕。</script>
- 即使脚本只是简单逻辑，也会中断DOM树生成，推迟CSSOM合并与渲染树构建
- 外部脚本（如
<script src="app.js"></script>）还会触发额外HTTP请求，进一步拖慢首屏时间 - 若脚本依赖尚未解析的DOM节点（例如
document.getElementById("main")），可能直接报错
推荐将脚本放在底部
把<script>标签移至闭合标签前，能让浏览器先完成HTML解析、构建DOM、加载CSS并渲染出首屏内容，再执行JS。</script>
- 用户能更快看到页面结构，提升感知性能
- 无需手动加
DOMContentLoaded监听，因为此时DOM已就绪 - 适合不依赖动态加载、无异步初始化要求的传统脚本
现代方案：用async或defer属性优化加载时机
对于必须放在
中的脚本（如监控SDK、字体加载器），可通过属性控制执行时机：
立即学习“Java免费学习笔记（深入）”；
- async：下载不阻塞HTML解析，但下载完立即执行（可能早于DOM就绪），适合完全独立的脚本（如广告、统计）
- defer：下载不阻塞解析，执行推迟到DOM解析完成之后、DOMContentLoaded事件之前，且按书写顺序执行，适合需要操作DOM的模块化脚本
- 注意：
async和defer仅对外部脚本有效，内联脚本不支持这两个属性
避免内联长脚本和document.write()
大段内联JavaScript不仅增加HTML体积，还会强制同步执行；而document.write()在DOM解析期间调用会清空当前文档，彻底阻断渲染，已被现代浏览器标记为不推荐。
- 将逻辑抽离为外部文件，利于缓存与压缩
- 用
innerHTML、appendChild等标准API替代document.write() - 对关键渲染路径上的JS做代码分割或懒加载（如用
import()动态导入非首屏逻辑）
不复杂但容易忽略：一个<script>的位置选择，往往比压缩几KB代码更能改善用户首次可见时间。</script>
