为什么将jQuery放在页面head标签中能解决多数第三方插件运行异常问题？

1. 将jQuery移至<head>是否为合理的常规解决方案？ #

该方案属于可生效的临时解决手段，但不属于生产环境最优的常规方案。
你遇到的插件失效问题，本质原因是第三方插件的执行逻辑早于jQuery的加载完成时机：

• 你使用的第三方插件大概率没有做依赖加载判断，代码中直接调用了$或jQuery变量
• 当jQuery放在页面底部时，如果插件引入位置在jQuery之前，运行时$变量还未初始化，就会抛出未定义错误，导致插件无法运行
• 将jQuery移到<head>后，jQuery会在页面DOM渲染前完成加载初始化，后续所有依赖jQuery的代码都能正常获取到全局变量，因此插件可以正常运行

如果不想牺牲页面加载性能，完全可以不移jQuery位置，采用以下更优的方案：

• 调整引入顺序：将所有依赖jQuery的第三方插件的<script>标签，放在页面底部jQuery引入标签的后方
• 包裹执行逻辑：如果插件代码无法调整位置，将插件的执行逻辑用$(document).ready()包裹，等页面所有资源加载完成后再执行

2. 为什么主流模板默认将jQuery放在页面底部引入？ #

核心目的是优化页面首屏加载性能，降低用户等待时长：

• 浏览器解析HTML为从上到下的串行逻辑，若JS资源放在<head>中，浏览器会暂停DOM渲染，优先完成JS的下载、解析、执行流程，用户会感知到更长时间的白屏
• 将JS放在</body>闭合标签之前时，浏览器会先完成所有页面DOM的渲染，用户可以第一时间看到完整的页面内容，再加载执行JS逻辑，感知上页面加载速度更快
• 主流模板自带的JS逻辑都严格遵循引入顺序，且会将DOM操作逻辑放在DOM加载完成的回调中，因此放在底部不会出现运行异常

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