结合JavaScript defer属性与放置在body末尾是否有感知性能提升？

在3G这类慢网络环境下，把非必要脚本放到<body>末尾并设置defer属性，确实能让用户明显感知到页面加载更快，核心原因如下：

• 带宽资源优先分配：慢网络下浏览器的同域名并发下载数有限（通常为6个左右），如果非必要脚本在<head>里用defer加载，它会和首屏核心资源（HTML、关键CSS、首屏图片、核心交互JS）抢占带宽。而放到<body>末尾后，非必要脚本的下载启动时间被延后，核心资源能优先完成下载，首屏内容会更快渲染出来——这是用户感知加载速度的核心指标。

• 避免抢占首屏资源的下载窗口期：<head>里的defer脚本会在HTML解析初期就触发下载，而<body>末尾的defer脚本要等HTML解析到该位置才开始下载。在慢网络下，这个时间差能让核心资源在非必要脚本开始下载前就完成加载，不会因为带宽竞争导致首屏渲染延迟。

• 提前实现首屏交互可用性：只要核心脚本加载完成，首屏渲染后页面就能具备基础交互能力。非必要脚本的延迟下载不会影响用户对页面的核心操作，用户不会因为等待非必要资源而觉得页面“卡顿”或“未加载完成”。

额外注意事项 #

• 严格区分必要/非必要脚本：必要脚本是支撑首屏渲染、核心交互的（比如导航逻辑、首屏数据渲染JS），非必要脚本包括统计工具、非首屏组件JS、广告脚本等，延迟加载不影响首屏体验。
• defer的执行顺序：不管放在<head>还是<body>末尾，defer脚本都会按加载顺序在DOM解析完成后执行，所以如果非必要脚本之间有依赖关系，要注意加载顺序。
• 极端慢网络下的进阶方案：可以在页面load事件触发后，通过JS动态创建<script>标签加载非必要脚本，完全避开首屏资源的带宽竞争。

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