# 不要讓 JavaScript 拉長你網站的反應時間

如果你在網站使用過多的 JavaScript 就很有可能會讓你的網頁反應時間拖的很長，因為瀏覽器在頁面顯示的過程中只要遇到任何 JavaScript 都會等他下載完畢或執行完畢才會繼續顯示下面的資料，即便你網頁已經下載完了也有可能因為 JavaScript 的關係而讓頁面遲遲不出現，所以在進行網站設計的時候需要特別注意這部分，尤其是較大型的網站。

在我之前的一篇文章[加速前端網頁效能的14條規則](/post/2007/11/24/14-rules-for-faster-front-end-performance-notes)中的第 6 點的 Move JS to the bottom 就是說這點，將所有 JavaScript Include 都移至網頁最下方，如果你不將 JavaScript 檔放到最下方其實還有另一個小技巧，就是在 JavaScript 的宣告標籤裡加上 defer 屬性：

```
<script type="text/javascript" src="common.js" defer="defer"></script>
```

加上這個屬性就等於跟瀏覽器宣告說「不要等我，請先繼續顯示網頁」的意思。

不過這可不能亂用喔，如果你載入的 JavaScript 中有使用到 document.write 或是會影響到網頁 DOM 物件的地方，就很有可能會造成網頁大亂！因為加上了 defer 屬性後，瀏覽器會在 JavaScript 下載完的時候執行，你會變得無法掌控這個 JavaScript 到底何時才會執行。

例如我之前就有試著將 [funP](http://funp.com/) 與 [HEMiDEMi](http://www.hemidemi.com/) 的部落格外掛改成 defer，結果就導致全網站變成只有 funP 的 Icon 而已，而有時又變成 hemidemi 的 Icon，反正就是後面執行的直接蓋掉前面輸出的網頁內容，這都是 document.write 將網頁覆寫掉的原因。