JS代码引用位置问题-转

 

看到不少JS代码所有放在head中的状况，其实这是个细节问题。转载一个知乎用户于江水的答案：

做者：于江水
连接：https://www.zhihu.com/question/34147508/answer/63469443
来源：知乎

浏览器加载页面是按从上到下顺序加载的。加载 JS 并执行的时候，会阻塞其余资源的加载。这是由于 JS 可能会有 DOM 、样式等等操做，因此浏览器要先加载这段 JS 并执行，再加载放在它后面的 HTML、CSS。

所以，加入一段巨大的 JS 放在最上面，浏览器首先要下载并执行，这段时间里面，页面是空白的。相比于加载了部分 HTML 和 样式 可是没有 JS 交互功能，显然是后者对于浏览者体验要好。

然而，是否全部 JS 都要放在最下面呢？并非。

举实际的例子：

html5shiv是一段 JS 脚本，用来是早期 IE 兼容 HTML5 新增标签的支持。

这个 JS 脚本，必需要放在上面 head 部分，为何呢？由于在老 IE 浏览器下面，不支持 <section> 这样的标签，因此用 JS 来兼容。若是放在底部，等 IE 浏览器先报错了，才会执行这块 JS 没多大用。

jQuery 这类的库，也是建议放在最上面的。首先最大的疑问多是 jQuery 这么大，放在上面岂不是阻塞的很厉害？

不过 jQuery 一般引用的是 CDN 地址，并且通过 gzip 压缩以后并非很大，并且引用公共 CDN 上面的 jQuery 话，很大概率早已被用户缓存下来了。因此能够不须要考虑阻塞产生的性能问题。

而咱们都知道，JS 是按顺序执行下来的。也就是你没运行 jQuery 以前，先运行了调用 jQuery 函数的代码，就会报错。你能够控制你本身写的 JS 放在页面最下面，放在 jQuery 下面，可是你没法保证页面上其余地方会不会有人图省事直接在 HTML 代码里面输出 JS。若是有，那么就会报错。

因此我建议， 类库放在上面加载，其他代码尽量放在最底下加载。