JavaScript之defer、async

在我之前用<script>标签的时候我一直习惯将其放在body的底部，以防止阻塞页面的渲染。js语言精髓就是这样建议我们的。但是在百度随便打开控制台的时候看到的并非如此！

由图上可以看出，大多数网页的头部都放了好几个js，这时是不是很好奇！没关系如果你是认真看了红宝书的那我想你应该知道这时为什么。
好吧我们直入主题，直接聊一下<script>这个标签吧！

 

<script>元素

html5中<script>标签一共支持5个属性:
async：表示应该立即下载脚本，但不阻碍页面中其他操作，既异步执行脚本。（仅适用外部脚本）
defer：表示甲苯可以延迟到文档完全被解析和显示之后再执行。（仅适用外部脚本）
src：表示包含要执行代码的外部文件的url
charset：规定在脚本中使用的字符编码，大多浏览器会忽略它的值（仅适用于外部脚本）。
type：规定脚本的 MIME （编写代码使用的脚本语言类型）类型。
language(废弃)：规定编写代码所使用的脚本语言。

我们一个一个说吧。先说这个async和defer吧。

defer

该属性用于表示脚本在执行的时候并不会影响页面的构造。也就是说，当解析页面的代码的时候，遇到有defer属性的外部js文件如下。

<script type="text/javascript" src="demo1.js" defer></script>
<div>上面的</div>
<script type="text/javascript" src="demo2.js" defer></script>
 <div>下面的</div>

它会先忽略script的解析，直到把整个页面都解析完毕之后才回来运行。HTML5规范其是按顺序执行，既第一个js执行完才到第二个js。并且其仅适用于外部脚本文件。可以用其来提高性能，因为使用了defer页面就知道其并不会影响页面的构造，会安心直接运行下面的解析。

async

async也叫异步脚本，其和defer类似，其区别在于，async会立即下载文件，但并不会阻塞页面的解析，且标为async的脚本不能保证它们的执行顺序。异步脚本一定在页面load事件之前执行，建议不要在加载期修改DOM。

所以我们可以看到刚才的例子中，其把js文件放在head里面，其实就是加了async这个属性，并不会阻塞浏览器对页面的渲染。但是还是会有一些script标签并没有async这是因为，这些脚本很大原因是因为需要在浏览器渲染之前你就要执行的。

说完这里大概知道有些script标签放在前面的原因了吧！如果script标签没有defer和async属性，浏览器就会按照script标签在页面的先后顺序依次执行。

src

src属性包含了外部域的javascript文件，其不受同源策略限制，这也是使用jsonp跨越的原理。带有src属性的script标签会忽略标签之间的代码。

type

其是js可以省略的属性，其默认值是text/javascript。虽然我们一以来都是用text/javascript。实际上，服务器在传送javascript文件时使用的MIME类型通常是application/x-javascript。

charset

大部分浏览器会忽略掉这个值，所以一般很少使用，其用于规定脚本使用的字符编码。