JavaScript——defer和async
转载自：
目前script的使用现状：
-
把它放在head标签内
在下载script引入的外部脚本时，浏览器处于阻塞状态，网络不好或script文件过大时，页面处于空白停顿状态，体验并不够好。
-
把它放在页面底部
这是大家公认的提高前端页面性能和体验的方法，但还是存在一定的问题，放在页面底部的脚本是要等到页面文档流下载完毕才去下载、执行，页面中的交互会存在一个延迟的时间去实现。虽然页面显示时间变短了，但交互却被延后了。体验也不够好。
-
按需执行
在head标签内引入部分公共脚本，在每一个需要交互的HTML元素之后插入script立即执行，需要特定条件才执行的脚本放到页面最底部。这也不是一个完美的解决方案，一则页面内穿插过多的script标签引起维护不便，二来底部脚本还未加载完时用户便触发了某个条件该怎么办？虽有方法实现，但体验仍不够好。
引用js文件格式如下：
<script type="text/javascript" defer="defer" async="true/false" src="js文档地址"></script>
- defer="defer":该属性用来通知浏览器，这段脚本代码将不会产生任何文档内容。例如JavaScript代码中的document.write()方法将不会骑作用，浏览器遇到这样的代码将会忽略，并继续执行后面的代码。属性只能是defer，与属性名相同。在HTML语法格式下，也允许不定义属性值，仅仅使用属性名。
- async="true/false":该属性为html5中新增的属性，它的作用是能够异步地下载和执行脚本，不因为加载脚本而阻塞页面的加载。一旦下载完毕就会立刻执行。
async和defer一样，都不会阻塞其他资源下载，所以不会影响页面的加载，但在async的情况下，js文档一旦下载完毕就会立刻执行，所以很有可能不是按照原本的顺序来执行，如果js有依赖性，就要注意了。
如下图：
defer和async的比较
相同点：
- 加载文件时不阻塞页面渲染；
- 对于inline的script无效；
- 使用这两个属性的脚本中不能调用document.write方法；
- 有脚本的onload的事件回调；
- 允许不定义属性值，仅仅使用属性名；
不同点：
- html的版本html4.0中定义了defer；html5.0中定义了async；这将造成由于浏览器版本的不同而对其支持的程度不同；
- 执行时刻：每一个async属性的脚本都在它下载结束之后立刻执行，同时会在window的load事件之前执行。所以就有可能出现脚本执行顺序被打乱的情况；每一个defer属性的脚本都是在页面解析完毕之后，按照原本的顺序执行，同时会在document的DOMContentLoaded之前执行。
这两个属性会有三种可能的组合：
- 如果async为true，那么脚本在下载完成后异步执行。
- 如果async为false，defer为true，那么脚本会在页面解析完毕之后执行。
- 如果async和defer都为false，那么脚本会在页面解析中，停止页面解析，立刻下载并且执行。
浏览器兼容情况：
Firefox 3.6+, IE 10+, Chrome 2+, Safari 5+, iOS 5+, Android 3+. No Opera support yet.
========================================================
关于defer请注意两点：
1、不要在defer型的脚本程序段中调用document.write命令，因为document.write将产生直接输出效果。
2、而且，不要在defer型脚本程序段中包括任何立即执行脚本要使用的全局变量或者函数。
一个常用的优化性能的方法是：当脚本不需要立即运行时，在<SCRIPT>标签中设置“defer”属性。 (立即脚本没有被包含在一个function块中,因此会在加载过程中执行。) 设置“defer”属性后，IE就不必等待该脚本装载和执行完毕。这样页面加载会更快。一般来说，这也表明立即脚本最好放在function块中，并在 document或者body对象的onload 句柄中处理该函数。在有一些脚本需要依赖用户操作而执行时----例如点击按钮，或者移动鼠标到某个区域----使用该属性非常有用。但当有一些脚本需要在页面加载过程中或加载完成后执行，使用defer属性得到的好处就不太大。
===============================================================
测试情况参见：
http://www.cnblogs.com/AndyWithPassion/archive/2011/09/03/2165441.html
