script标签的位置及影响

妖狐艹你老母 2021-09-16 14:14 512阅读 0赞

### 【一】<script></script>存放的位置 ###

1.  <head></head>之间
2.  <body></body>之间
3.  </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_www.cnblogs.com_wj12-14_articles_6389473.html]

### 【三】补充 ###

浏览器的渲染过程：[https://blog.csdn.net/yy19911203/article/details/78551809][https_blog.csdn.net_yy19911203_article_details_78551809]

[https_www.cnblogs.com_wj12-14_articles_6389473.html]: https://www.cnblogs.com/wj12-14/articles/6389473.html
[https_blog.csdn.net_yy19911203_article_details_78551809]: https://blog.csdn.net/yy19911203/article/details/78551809