异步与时间线的理解

Javascript语言的执行环境是"单线程"（single thread，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推）。

这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段Javascript代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任务无法执行。

为了解决这个问题，Javascript语言将任务的执行模式分成两种：同步（Synchronous）和异步（Asynchronous）。

“同步模式" 就是上一段的模式，后一个任务等待前一个任务结束，然后再执行，程序的执行顺序与任务的排列顺序是一致的、同步的；"异步模式"则完全不同，每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。

“异步模式" 非常重要。在浏览器端，耗时很长的操作都应该异步执行，避免浏览器失去响应，最好的例子就是Ajax操作。在服务器端，"异步模式"甚至是唯一的模式，因为执行环境是单线程的，如果允许同步执行所有http请求，服务器性能会急剧下降，很快就会失去响应。

1.defer，只支持IE
defer属性的定义和用法（我摘自w3school网站）
defer 属性规定是否对脚本执行进行延迟，直到页面加载为止。
2. async：
async的定义和用法(是HTML5的属性)
async 属性规定一旦脚本可用，则会异步执行。
3.创建script，插入到DOM中，加载完毕后callBack，

```javascript
function loadScript(url, callback){ 
var script = document.createElement_x("script") 
script.type = "text/javascript"; 
if (script.readyState){ //IE 
script.onreadystatechange = function(){ 
if (script.readyState == "loaded" || 
script.readyState == "complete"){ 
script.onreadystatechange = null; 
callback(); 
} 
}; 
} else { //Others: Firefox, Safari, Chrome, and Opera 
script.onload = function(){ 
callback(); 
}; 
} 
script.src = url; 
document.body.appendChild(script); 
} 

时间线的理解
1、创建Document对象，开始解析web界面。document.readyState='loading'。表示正在解析中
2、遇到link外部css，创建线程加载，并继续原线程的解析。
3、遇到外部js文件，并没设有async/defer的属性，浏览器正常加载js（阻塞），等js加载完成再执行下面的内容。
4、遇到外部js文件，但是设有async/defer的属性，浏览器创建新的线程进行加载，原线程继续自己的行为。（async是当加载js完毕直接就执行，defer是页面解析完毕后再执行，异步加载不允许用document.write()）;
5、遇到Img，先正常解析出dom结构，异步加载src，并继续进行解析。
6、当文档解析完毕（document.readyState="interative"）。
7、解析完毕之后，所有设置defer的脚本会按照顺序执行。
8、document对象触发DOMContentLoaded事件，标志程序执行从同步脚本执行阶段转换为事件驱动。
9、当async的脚本加载并执行后，Img加载完成后，document.readyState="compete"。
10、以异步响应处理网络，用户操作实行交互。
window.onload是在页面解析加载完毕再执行---没意义，用户体验极差（等待时间长）
document.addEventListener('DOMContentLoaded',function(){},false)---DOM解析(document.readyState='interactive'）完，就执行。
先进行解析结构，再加载资源内容。