【一】<script></script>存放的位置
- <head></head>之间
- <body></body>之间
- </body>之后
【二】<script></script>存放的地方会产生什么影响
1.在<head></head>标签内部时:
将script放在<head>里,浏览器解析HTML,发现script标签时,会先下载完所有这些script,再往下解析其他的HTML。浏览器在下载JS时,是不能多个JS并发一起下载的。不管JS是不是来自同一个host,浏览器最多只能同时下载两个JS,且浏览器下载JS时,就block掉解析其他HTML的工作。将script放在头部,会让网页内容呈现滞后,导致用户感觉到卡。
2.在<body></body>标签内部时:
浏览器只能先解析完整个HTML页面,再下载JS。而对于一些高度依赖于JS的网页,就会显得慢了。所以在<body></body>标签内部时也不是最优解,最优解是一边解析页面,一边下载JS。
3.在</body>标签之后时:
这在</body>之后插入其他元素,从HTML 2.0起就是不合标准的。按照HTML5标准中的HTML语法规则,如果在</body>后再出现<script>或任何元素的开始标签,都是parse error,浏览器会忽略之前的</body>,即视作仍旧在body内。所以实际效果和写在</body>之前是没有区别的。
那最优解的一边解析页面一边下载JS应该怎样实现呢?
我们<script>标签这里面有两个属性(async和defer),
async属性能保证script会异步执行,只要下载完就执行,这会导致script2.js可能先于script1.js执行(如果script2.js比较大,下载慢)。defer属性就能保证script有序执行,script1.js先执行,script2.js后执行,这两个属性能让浏览器做到一边下载JS(还是只能同时下载两个JS),一边解析HTML。他的优点不是增加JS的并发下载数量,而是做到下载时不block解析HTML。
源文档见:https://www.cnblogs.com/wj12-14/articles/6389473.html
【三】补充
浏览器的渲染过程:https://blog.csdn.net/yy19911203/article/details/78551809