专业编程基础技术教程

网站首页 > 基础教程 正文

script标签到底应该放在哪里?script属性defer 和 async

ccvgpt 2024-10-12 13:39:35 基础教程 11 ℃

JS具有阻塞特性，当浏览器在执行js代码时，不能同时做其它事情，即<script>每次出现都会让页面等待脚本的解析和执行（不论JS是内嵌的还是外链的），JS代码执行完成后，才继续渲染页面。

script标签到底应该放在哪里?script属性defer 和 async

所有浏览器在下载JS的时候，会阻止一切其他活动，比如其他资源的下载，内容的呈现等等。至到JS下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。

一般script标签会被放在头部或尾部。头部就是<head>里面，尾部一般指<body>里。

将script放在<head>里，浏览器解析HTML，发现script标签时，会先下载完所有这些script，再往下解析其他的HTML。讨厌的是浏览器在下载JS时，是不能多个JS并发一起下载的。不管JS是不来来自同一个host，浏览器最多只能同时下载两个JS，且浏览器下载JS时，就block掉解析其他HTML的工作。将script放在头部，会让网页内容呈现滞后，导致用户感觉到卡。所以建议将script放在尾部，这样能加速网页加载。

将script放在尾部的缺点，是浏览器只能先解析完整个HTML页面，再下载JS。而对于一些高度依赖于JS的网页，就会显得慢了。所以将script放在尾部也不是最优解，最优解是一边解析页面，一边下载JS。

所以提出了一种更modern的方式：使用async和defer。80%的现代浏览器都认识async和defer属性，这两个属性能让浏览器做到一边下载JS(还是只能同时下载两个JS)，一边解析HTML。他的优点不是增加JS的并发下载数量，而是做到下载时不block解析HTML。

<script type="text/javascript" src="script1.js" async></script>

<script type="text/javascript" src="script2.js" async></script>

defer 和 async 在网络读取（下载）这块儿是一样的，都是异步的（相较于 HTML 解析）它俩的差别在于脚本下载完之后何时执行，显然 defer 是最接近我们对于应用脚本加载和执行的要求的async 则是一个乱序执行的主，对它来说脚本的加载和执行是紧紧挨着的，所以不管你声明的顺序如何，只要它加载完了就会立刻执行，async 对于应用脚本的用处不大，因为它完全不考虑依赖（哪怕是最低级的顺序执行），不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的。

结论：

  1. 放在底部，虽然放在底部照样会阻塞所有呈现，但不会阻塞资源下载。

  2. 如果嵌入JS放在head中，请把嵌入JS放在CSS头部。

  3. 使用defer与 async。

  4. 不要在嵌入的JS中调用运行时间较长的函数，如果一定要用，可以用setTimeout来调用。

  5. 本文只讨论script的位置，至于link和style，还是放在head里的做法比较常见。link也是要下载CSS的啊，为毛不考虑下载CSS阻塞HTML解析的问题呢？其实，一般情况下，JS和CSS，放在head和放在body区别不大。CSS的link放在body也是可以的，只是可能导致页面暂时没有样式。

Tags：

猜你喜欢

最近发表
标签列表