1、放在head里边。浏览器接续HTML发现script的时候,会优先下载完script文件,再继续解析HTML。而且讨厌的是浏览器在下载js时候,不能多个文件一起下载,最多只能同事下载两个js文件,所以把js文件放在页面头部的话如果网不好的时候浏览器在下载js,HTML迟迟下载不下来所以会导致页面加载慢的情况导致用户体验不太好。
2、将js放在页面最底部(<body>里)。浏览器解析万HTML文件之后再下载js。对于一些高度依赖js的网页就会显得比较慢。
3、所以最好的选择是一般解析HTML一般下载js文件,使用async和defer。80%的现在浏览器都识别这两个属性。这两个属性能让浏览器一边下载js一边解析HTML页面。当然还是同时只能下载两个js文件。他的优点是下载js的时候不耽误HTML文件的解析
<script type="text/javascript" src="path/to/script1.js" async></script>
<script type="text/javascript" src="path/to/script2.js" async></script>
但是带async属性的script会异步执行,只要下载完就执行,这会导致script2.js可能先于script1.js执行(如果script2.js比较大,下载慢)。defer就能保证script有序执行,script1.js先执行,script2.js后执行。
如果可以不考虑支持<IE9的IE,最好的做法是将script标签放在head中,并使用async/defer属性。这样浏览器就能一边下载JS,一边解析其他的HTML
总体来说,放在<body>里其实是最常见的做法
对于link和style,还是放在head里的做法比较多。CSS的link放在body里也是可以的,只是可能导致页面暂时没有样式而已