<script>
:默认情况下,浏览器会立即下载并执行<script>
标签中的代码,也就是说,在代码执行完毕之前,页面的渲染会停止,因此可能会导致页面出现延迟。
<script async>
:浏览器发现带有async
属性的<script>
标签时,会异步下载脚本文件,下载过程与页面渲染过程不会互相影响,也就是说,即使脚本还未下载完毕,页面也能继续渲染。一旦脚本下载完成,立即执行脚本。
<script defer>
:这个属性也是用于异步加载脚本,与async
不同的是,浏览器在遇到带有defer
属性的<script>
标签时,会将脚本文件下载到文档结束之前,也就是说,下载完成后不会立即执行脚本,而是等到文档全部加载解析完成之后,按照页面中元素的顺序依次执行各个脚本。
总的来说,在页面比较复杂的情况下,建议使用<script async>
或<script defer>
,能够较好的优化页面性能,但需要注意的是,使用异步加载脚本时要注意代码执行顺序,不同脚本之间的依赖关系不能错乱。