上一篇提到越快取得 CSS ，頁面的 Rendering 可以進行得越快，

我們繼續拿上一篇文章的例子說明，不過今天多新增了一行 external js：

  <link href="layout.css" rel="stylesheet" type="text/css" />
  <script src="script.js" />


  <p>Hello this is a test page.</p>

瀏覽器取得此 HTML Document 後便立刻開始進行 parsing ：

1. 遇到 CSS 那一段時，便立刻發送請求取得 CSS file。
2. 接著往下解析，遇到外連 JS ，一樣立刻發送請求取得 JS file。

接著會發生什麼事呢？整個世界就此停止！！在抓完 JS 並且執行它之前都不會繼續執行 DOM 的建構。

瀏覽器這樣設計並非完全無道理，JS 可以操作 DOM ，假設不停止 DOM 的建構、執行完 JS 後再繼續往下解析的話會產生許多問題。（如寫了一段 document.write 插入 HTML Element）假如 clinet 取得 JS file 至少要花費 200ms 的話，這 200ms 瀏覽器只能傻傻等著、什麼事都不能做，200ms 可不短啊！該如何解決這麼嚴重的 performance issue 呢？

解決方式不難，只要在 script tag 加上 async 這個 keyword ，瀏覽器看到就會在背景下載這個 JS 並且繼續執行後面的 DOM Construction ，等到 JS 抵達才會暫停建構 DOM 的工作、執行此 Javascript。

舉例說明，上面那一段 external JS 只要改成這樣，問題就解決了：

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

不過使用 async 有一點要注意，如果你有多個 JS file 且彼此間有相依關係存在的話，使用 async 很可能會發生問題。（假設這些檔案的抵達順序跟相依順序不一的話，就會出錯）

看完這篇文章，你應該就能理解為什麼會有「將 JS file 放在 bottom 」這種優化 Tip 了吧？JS 放在最底部，DOM 幾乎都已經建構完畢了，自然就不會有什麼阻礙建構 DOM 的問題了。