不要讓 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 將網頁覆寫掉的原因。

  

此文章由 will 發表於 2008/6/10 下午 06:13:42

永久連結 | 評論 (5) | 此文章的RSSRSS comment feed |

分類: JavaScript | Web

標籤: ,

收藏:

相關文章

評論

六月 11. 2008 19:50

sunnysardine

真的有加快到!謝謝!
加入後,網頁先進行 loading, 以前要等 sidebar load 許久才能看見完整頁面,想說應該是因為 sidebar 有很多 javascript widget 的關係,用了之後 sidebar loading 的時間真的縮短了!

sunnysardine tw

六月 20. 2008 17:49

月下老人

以前用MS JVM時根本沒感覺Javascrip執行慢ㄉ問題...
因為基本上開啟任何Javascrip都超快ㄉ.
但自從用ㄌSUN JVM後,開啟就慢得離譜!...
只能說SUN JVM真是爛...而且爛得離譜!!...//v__v"\\a

月下老人 tw

七月 12. 2008 00:53

TonyQ

樓上對javascirpt的知識才是爛得離譜...
jvm跟javascript完全沒關係...

TonyQ tw

七月 21. 2008 18:42

Eucaly61

可以舉例說明哪些常用的外部 JavaScript 可以加 defer="defer" 嗎?
我試過 FEEDJIT 和 Google Reader 的分享項目, 在 Firefox 3 可以, 但 IE7 不行 (網頁就當在半路)

Eucaly61 tw

七月 21. 2008 21:46

Will 保哥

Hi Eucaly61,
我在文章裡都有說明使用的時機了!
因為每個 Browser 對 defer 的實做細節不一定相同,也許 FF3 有針對 defer 多加上了些智慧型的條件判斷才會讓 FF3 可以正常顯示,但若依據 W3C 的定義來說,defer 的定義就是:「Hey, Browser! 請不要等我執行完,先繼續顯示網頁吧」。

Will 保哥 tw

新增評論


(將顯示您的Gravatar圖示)  

  Country flag

[b][/b] - [i][/i] - [u][/u]- [quote][/quote]



線上預覽

十月 14. 2008 06:15