JavaScript脚本加载相关知识

<script>标签的位置

HTML4规范允许<script>可以放在<head>或<body>中。

但是,放在<head>中会导致性能问题:浏览器在解释到<body>前,不会渲染页面任何内容,而把<script>放在<head>中会阻塞页面渲染,把<script>放在<head>的话,会等到<script>全部加载和执行后才会继续渲染页面,这样一来用户访问可能会先看到一段时间的空白页面。

由于脚本会阻塞页面其他资源的下载,所以推荐将所有<script>放在<body>标签的底部。

无阻塞的脚本

defer

HTML4为<script>引入defer属性,带有该属性的<script>可放在任何地方,相应的JavaScript文件在页面解释到该标签时开始下载,然后在DOM加载完成之后,window.onload事件执行之前,以及其他没有defer属性的<script>之后执行。

带有defer属性的<script>下载脚本并不会阻塞页面加载的其他进程,此类文件可以与其他资源并行下载。

当带有defer的<script>标签使用src引入外部脚本时,该script内嵌的脚本无效。

根据HTML5规范,只有在src被声明时,defer才有效。

使用示例:

<script src= "hello.js" defer="defer"></script>
或者
<script src="hello.js" defer></script>

async

async是HTML5加入的属性,类似于defer

只有在声明src时,async才生效。

标记为async的<script>立即下载脚本文件,同时并不会阻塞页面加载的其他进程,脚本将在下载完成后尽快执行。

标记为async的<script>一定会在window.onload前执行完毕。

标记为async的脚本并不保证按照指定的顺序来执行,eg:

<script async src="hello.js"></script>
<script async src="world.js"></script>

上面代码中,第二个脚本可能会在第一个前执行,所以,使用async加载的脚本文件间最好不要有依赖关系。

猜你喜欢

转载自www.cnblogs.com/dzwonline/p/9192539.html