JavaScript脚本的加载方式有什么区别:内嵌script、异步async、延迟defer?

4 min read

<script>:默认情况下,浏览器会立即下载并执行<script>标签中的代码,也就是说,在代码执行完毕之前,页面的渲染会停止,因此可能会导致页面出现延迟。

<script async>:浏览器发现带有async属性的<script>标签时,会异步下载脚本文件,下载过程与页面渲染过程不会互相影响,也就是说,即使脚本还未下载完毕,页面也能继续渲染。一旦脚本下载完成,立即执行脚本。

<script defer>:这个属性也是用于异步加载脚本,与async不同的是,浏览器在遇到带有defer属性的<script>标签时,会将脚本文件下载到文档结束之前,也就是说,下载完成后不会立即执行脚本,而是等到文档全部加载解析完成之后,按照页面中元素的顺序依次执行各个脚本。

总的来说,在页面比较复杂的情况下,建议使用<script async><script defer>,能够较好的优化页面性能,但需要注意的是,使用异步加载脚本时要注意代码执行顺序,不同脚本之间的依赖关系不能错乱。