script标签位置有何讲究？

Question

放在head标签里不合适？
网上没看见统一的说法，有没有权威或者官方的建议。

Answer 1

html读取是自上而下的，建议先加载css层叠样式文件再加载js文件，这样即使网慢的时候也会先显示出大体轮廓，如果先加载js则会影响页面样式。

Answer 2

如果不是马上要展示在页面上的。就放在最后，因为head里面js多了会影响页面加载。如果你有什么js是需要压面中用的，比如有些网站需要统一改变电话号码，等页面加载完后在去改回闪一下，体验不好，或者说你用了rem.js需要提前计算好font-size就这样做：

<script>
    function tel () {
        // 比如这里做了一大堆计算得到一个电话号码
        var tel = '123456';
        document.write(tel);
    }
</script>
<span><script> tel() ;</script></span>
<span><script> tel() ;</script></span>
<span><script> tel() ;</script></span>
<span><script> tel() ;</script></span>
<span><script> tel() ;</script></span>

如果没有这些需要立刻有效果的，最好都放后面区。虽然很多网站都是随便放。
至于每一个js的顺序，被依赖的js肯定得放前面（不是指放在head里）

Answer 3

以下仅为个人意见
首先考虑是否有立即执行的DOM操作，如果有就一定要放在要操作的页面元素之后，更不能放到head里；
然后考虑js内容加载占用的时间，为了使用户能尽快看到页面，应该将js放到最后，但如果js内容很少，其实也没必要太在意；
最后就是习惯和方便的问题，从前面两点可以看出，放最后肯定没错，而且集中在一起方便管理，那么为什么不放在最后呢？

Answer 4

放在</body>之前可以优化页面的加载性能. 放在头部的话, 当遇到script标签会停止对其他资源的下载. 影响用户体验. 另外一种情况就是延迟加载.