有时候会接触到一些前端工作，插入js文件的时候 会遇到这样的问题
好像有的js放到head里面就失效了
想请教一下这是什么原理
伊谢尔伦2017-04-10 14:37:36
简单的说，放在 </body> 前面可以保证 HTML 标签先加载和解析，之后才是脚本。
一些脚本涉及到 DOM 操作的，能够有效的前提当然是要有对应的 DOM 对象。当你放在 <head> 标签里，这些脚本在 HTML 标签得以解析之前就执行了，此时没有对应的 DOM 对象可以操作，当然就失效了。
当然，这个问题可以通过监听 DOMContentLoaded 事件，然后把脚本放在事件回调函数里来解决。但是另外一个问题则是 HTTP 请求的优先级问题。脚本（特别是非本地脚本）放在 <head> 标签里，它会优先进行请求，这会阻塞一些 HTML 标签的请求，比如图片等外部资源的下载。这就是为什么我们通常会把脚本放在 load 事件的回调函数里执行的原因。
DOMContentLoaded 和 load 的区别？
前者在文档载入并解析之后触发，但是不包括样式、图片等外部资源；后者则是等待所有的外部资源全部载入之后才触发。因此，你选择监听哪一个事件取决于你的脚本到底要操作什么。
然而不是所有的浏览器都支持 DOMContentLoaded 事件，这就是为什么最佳实践推荐把所有的脚本加载都放在 </body> 标签之前的缘故——保证向后兼容。
从确保内容加载并解析的角度考虑，优先级应该是：HTML > CSS > Javascript，CSS 要生效，前提是 HTML 已经提供了可供操作的选择符；Javascript 要生效，前提是浏览器解析了 HTML 并提供了 DOM 对象以及 CSS 声明已经存在（如果脚本的目的就是处理 HTML & CSS的话）。
参考我对另外一个问题的答案：
http://segmentfault.com/q/1010000000640869
巴扎黑2017-04-10 14:37:36
将CSS文件放在<head></head>标签中，是为了防止在低网速的情况下，用户的IE浏览器只能看到空白页。
将<script>标签放在最下面。他会先将内容呈现出来，不会让用户等得太久。因为防止script脚本的执行阻塞页面的下载。在页面loading的过程中，当浏览器读到js执行语句的时候一定会把它全部解释完毕后在会接下来读下 面的内容。不信你可以写一个js死循环看看页面下面的东西还会不会出来。所以放在页面最后，可以有效减少页面可 视元素的加载时间
参考我的文章：http://blog.segmentfault.com/trigkit4/1190000000656717
