一.同步和異步的概念。
同步：即按代碼的順序執行任務。
在下列代碼中，按照同步概念，則是先打印1后打印2。
1 console.log(1); 2 console.log(2);
異步：即執行一個任務的同時執行另一個任務。如果按照此概念執行上面代碼，則是同時打印出1和2。
二.客戶端JavaScript中代碼的執行順序
首先，不管是核心JavaScript還是客戶端JavaScript都不包含任何線程機制，只有一個單線程執行模型。單線程即指腳本和事件處理程序在同一時間只能執行一個，不能同時執行，沒有並發性。（HTML5定義了一種為后台線程的“Web Worker”，本人不甚了解，不做贅述）。
單線程的好處在於編程更加簡單，編寫代碼可以確保兩個事件處理程序不會同時運行，操作DOM文檔也不會擔心有其他線程同時修改文檔。但這也意味着JavaScript腳本和事件處理程序不能運行太久，否則會降低網頁的可讀性，甚至導致瀏覽器奔潰的假象。那么，一個JS程序是怎么具體執行的呢？
JS的執行任務分為同步任務和異步任務：
同步任務：指除了異步任務之外的其他程序。
異步任務：指各種事件（比如資源載入事件中的loaded、DOMContentLoaded中的回調函數，普通事件中的click，focus，mouseover中的回調函數，window對象的定時器setInterval、setTimeout中的回調函數等等）。
過程：一個js程序執行時，首先將同步任務放入一個執行棧中，先解析同步任務和異步任務並且按順序執行所有同步任務。當異步任務被觸發時（如用戶點擊鼠標或者按下鍵盤），異步進程處理則會檢測到並將其對應的異步任務轉移到任務隊列中。同步任務全部執行完畢后，則查看任務隊列中是否有未完成的回調函數，如果有則按順序執行。在此后期間會不斷查看任務隊列並不斷執行，形成事件循環。請看如下過程圖
三、HTML文件中script標簽的執行順序和其屬性defer、async產生的影響
1.在默認情況下，HTML解析器遇到script標簽時，是先執行腳本，進入腳本並按上面所述的順序執行完代碼。然后再繼續解析渲染HTML頁面文檔，這是對於內聯腳本來說。但同樣的，對於一個由src屬性指定外部文件的腳本來說，也是先下載並執行該腳本。也就是說，在完成改腳本的下載和執行前，其后面的文檔部分都不會顯現出來（實際上DOM樹已經被載入，但是沒被解析為DOM樹）。
以下一個1996最先進的JS代碼可以證明該概念（當時沒有那么多的異步事件API實現異步調用，所以用如下的同步程序來實現動態添加HTML元素）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <h1>Table of Factorials</h1> 9 <script> 10 function factorial(n) { //用來實現階乘的函數 11 if(n <= 1) return n; 12 else return n * factorial(n-1); 13 } 14 15 document.write("<table>"); //開始創建表格 16 document.write("<tr><th>n</th><th>n!</th></tr>"); //創建表頭 17 for(var i = 0;i <= 10;i++) { 18 document.write("<tr><td>" + i + "</td><td>" + factorial(i) + "</td></tr>"); //輸出十行表格 19 } 20 document.write("</table>"); //表格結束 21 document.write("Generated at " + new Date()); //輸出時間戳 22 </script>
<h2>Table of Factorials</h2> 23 </body> 24 </html>
以下為結果圖：
可以得知，腳本的執行在默認的情況下是同步和阻塞的，這是由其單線程模型決定的。但是，對於使用src引入外部文件的script標簽來說，其屬性defer和async可以改變這種情況，實現異步調用
2.對於外聯腳本（即由src屬性引入外部js文件的腳本），其有兩個屬性可以改變同步狀態——defer和async（只要有這兩個屬性之一即為異步腳本）
defer（延遲）：有了該屬性的外聯腳本會延遲解析執行，即等待文檔的載入和解析完成並可以操作時（不包括img，即可以理解為DOMContentLoaded事件觸發時）才解析執行。看以下代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css" media="screen"> 7 div { 8 width: 100px; 9 height:100px; 10 } 11 </style> 12 </head> 13 <body> 14 <script type="text/javascript" src="console.js" defer></script> 15 <script type="text/javascript"> 16 console.log(+new Date()); 17 </script> 18 <script type="text/javascript"> 19 document.addEventListener("DOMContentLoaded",function(){ 20 console.log(+new Date()); 21 }); 22 </script> 23 </body> 24 </html>
console.js的代碼為：
1 console.log(+new Date());
運行結果截圖：
可見，帶有defer屬性的console.js代碼是第一個內聯js執行后最后一個內聯js執行前才執行的，印證了以上說法
async（異步）：HTML解析器在遇到帶有該屬性的腳本時，不會中止頁面文檔的解析，而是一邊下載該腳本一邊繼續后面文檔的解析，一旦腳本下載解析完成則盡快停止文檔解析並回去解析執行該腳本，從而避免了下載腳本時阻塞文檔解析，可以憑此提高文檔解析加載速度。看以下代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css" media="screen"> 7 div { 8 width: 100px; 9 height:100px; 10 } 11 </style> 12 </head> 13 <body> 14 <script type="text/javascript" src="console.js" async></script> 15 <script type="text/javascript"> 16 console.log(+new Date()); 17 </script> 18 <div> 19 20 </div> 21 </body> 22 </html>
結果截圖：
可以看出，原本按照默認方式應當先打印的console.js文件反而在內聯script標簽之后執行，可以印證上面所述。
那么，如果兩個屬性都同時擁有呢？這樣的標簽會按照什么方式執行？答案是瀏覽器會遵從async屬性並忽略defer屬性。
注意點：
1.擁有這兩個屬性的script標簽的js文件即為異步腳本，異步腳本不能使用document.write（）（因為如果用該函數會覆蓋掉其對應標簽解析之前的文檔內容）；如下面代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script type="text/javascript" src="console.js" defer></script> 7 <script type="text/javascript" src="console2.js" async></script> 8 9 </head> 10 <body> 11 12 </body> 13 </html>
其中console.js和console.log2代碼都為：
1 document.write(1);
結果截圖：
2.defer和async都是布爾屬性，沒有值，只要出現即能激活該屬性
3.defer和async都只適用於外聯腳本，內聯腳本使用這兩個屬性是無效的。
4.defer能訪問完整的文檔樹，無論其腳本位置在何處；而async必定能看到其腳本所在位置之前的文檔樹，但是可能或不可能訪問其后面的文檔內容。
四、客戶端JavaScript執行順序的總結
JS程序的執行有兩個階段
第一階段：解析載入HTML文檔的內容，並執行<script>元素里的代碼（包括內聯腳本和外部腳本），通常按其出現順序執行。除非出現defer、async屬性使其成為異步腳本（詳情見上面defer、async屬性的說明）
第二階段：這個階段是異步的，而且是由事件驅動的（即有用戶事件才會發生）。在這個階段，一旦用戶產生事件，瀏覽器就會調用之前腳本中的事件處理程序函數，來響應異步發生的事件（如鼠標單擊，鍵盤輸入。此時對應的事件處理回調函數被放在了任務隊列中，詳情見第二部分）
我們對這兩個階段再進行詳細的划分，形成一條理想的時間線：
1.Web瀏覽器創建一個Document對象，並開始解析渲染HTML文檔，生成Element對象和Text節點放入文檔中。此時，document.readystate的值為“loading”。
2.當解析HTML文檔過程中遇到沒有async和defer屬性的腳本時，解析器停止解析文檔並開始按順序對腳本進行解析執行，此時腳本內可以便利和操作腳本之前的文檔樹。解析完遇到的腳本后則繼續文檔的解析，以此類推
3.如果遇到帶有async屬性的腳本，瀏覽器會一邊下載該腳本一邊繼續后面文檔內容的解析，當腳本下載解析完畢后立即返回解析執行該腳本。
4.當文檔完成解析時，此時document.readystate的值為interactive
5.然后按照其出現順序繼續解析執行帶有defer屬性的腳本
6.所有的文檔和腳本加載執行渲染完成后（不包括外部加載的圖片多媒體文件等）瀏覽器觸發了Document對象的DOMContentLoaded事件，標志着程序執行從同步腳本執行階段進入到了異步事件處理事件程序執行階段。注意此時可能還有異步任務還沒執行完成。
7.此時，文檔已經完全解析完成，但是有一些內容還在加載，如圖片。當這些內容完全加載並且異步腳本全部載入和執行后，document.readystate的值為“complete”，並且觸發window.onload事件。
8.此刻起，調用異步事件，以異步響應用戶輸入事件。
注意：這是一條理想的時間線。DOMContentLoaded事件和document.readystate屬性大部分瀏覽器都支持。defer屬性也被大部分瀏覽器支持。而async在IE9及其之前的版本是不支持的。