script元素的位置及defer、async属性

传统上，script元素应该放在页面的head元素中，但这意味着head元素中的js文件全部下载、解析和执行完成之后，才会开始呈现页面的内容，导致浏览器在呈现页面的时候出现延迟，所以，一般都把JavaScript文件放在body元素中页面内容的后面，即

........

<script src="xx.js"></script>

</body>

备注：css文件加载不会阻塞DOM树解析，但是会阻塞DOM树渲染。

关于css文件和JavaScript文件的引入是否堵塞参考https://www.cnblogs.com/heshan1992/p/7029431.html

defer属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。在script元素中设置defer属性，相当于告诉浏览器立即下载，但延迟执行。defer属性只适用于外部脚本文件。

与defer类似，async只适用于外部脚本文件，并告诉浏览器立即下载文件。但与defer不同的是，标记为async的脚本并不保证按照指定它们的先后顺序执行。指定async属性的目的是不让页面等待两个脚本下载执行，从而异步加载页面其他内容。