何时及为何在HTML的head区段使用JavaScript？对应输出位置在哪？

1. 在head区段使用JavaScript的时机和原因 #

• 加载无DOM依赖的全局前置依赖：比如全局工具函数、站点统计脚本、兼容性特征检测脚本，这类脚本不需要操作页面DOM元素，提前加载可以保证后续业务逻辑执行时依赖已经准备完成。
• 执行需要在页面渲染前生效的逻辑：比如用户登录态校验重定向、全局cookie设置、自适应布局的根字体计算，这类逻辑提前执行可以避免页面渲染完成后再调整导致的页面闪烁问题。
• 特殊资源预加载逻辑：比如需要提前动态生成link标签预加载后续要用的静态资源的相关脚本，放在head执行可以提前触发资源下载，提升页面加载性能。

注意：如果你的JavaScript需要操作body内的DOM元素，不要直接放在head中执行，此时body还未被浏览器解析，访问DOM会报错，需要监听DOMContentLoaded事件或者给script标签加defer/async属性才能正常执行。

2. 示例代码的输出位置 #

你这段代码打印的akshat会出现在body元素的内容之前，也就是在<h2>Demo JavaScript in Head</h2>的上方显示。

原因是浏览器会从上到下顺序解析HTML文档，解析到head中的script标签时会暂停HTML解析，优先执行script内的代码：此时调用document.write()会把内容直接写入到当前文档流的解析位置，等JS执行完成后浏览器才会继续解析后续的body内容，因此你写入的文本会排在所有body内元素的前面。

补充：实际开发中不推荐使用document.write，它会阻塞HTML解析，严重时会导致页面加载失败，插入内容优先使用appendChild、textContent等标准DOM操作API。

内容的提问来源于stack exchange，提问作者Akshat Jaiswal