The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

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

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

在我之前的一篇文章加速前端網頁效能的14條規則中的第 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 到底何時才會執行。

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