砥砺前行

浏览器加载

在html网页中，一般通过<script>标签来加载JS脚本。

<!-- 页面内嵌的脚本 -->
<script type="application/javascript">
  // module code
</script>

<!-- 外部脚本 -->
<script type="application/javascript" src="path/to/myModule.js">
</script>
1
2
3
4
5
6
7
8

上面代码中，由于浏览器脚本的默认语言是JS，因此type="application/javascript"可以省略。

默认情况下，浏览器是同步加载JS脚本的，即渲染引擎遇到<script>标签就会停下来，等到执行完脚本，再继续向下渲染。如果是外部脚本，还必须等待脚本下载的时间。

如果脚本体积很大，下载和执行的时间就会很长，因此造成浏览器堵塞，用户会感觉到浏览器卡死了，没有任何响应。这显然是很不好的体验，所以浏览器允许脚本异步加载，下面就是两种异步加载的语法。

<script src="a.js" defer></script>
<script src="b.js" async></script>
1
2

上面代码中，<script>标签设置了defer或async属性，a.js和b.js就会异步加载。渲染引擎遇到这一行命令，就会开始下载外部脚本，但不会等它下载和执行，而是直接执行后面的命令。

defer和async的区别：

  • defer要等到整个页面在内存中正常渲染结束(DOM结构完全生成，以及其他脚本执行完成)，才会执行；
  • async一旦下载完，渲染引擎就会中断渲染，执行这个脚本以后，再继续渲染。

简而言之，defer是渲染完再执行，async是下载完就执行。另外，如果有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的。

←