传统上,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属性的目的是不让页面等待两个脚本下载执行,从而异步加载页面其他内容。