Script中的Defer屬性
如果你是一個對系統效能比較關心和在意的人,我想你應該會對Script指令碼中的defer屬性感興趣的。
script中的defer屬性預設情況下是false的。按照DHTML編程寶典中的描述,對於Defer屬性是這樣寫的:
Using the attribute at design time can improve the download performance of a page because the browser does not need to parse and execute the script and can continue downloading and parsing the page instead.
也就是說:如果是編寫指令碼的時候加入defer屬性,那麼瀏覽器在下載指令碼的時候就不必立即對其進行處理,而是繼續對頁面進行下載和解析,這樣會提高下載的效能。
這樣的情況有很多種。比如你定義了很多javascript變數,或者在引用檔案(.inc)中寫了很多的指令碼需要處理,那不妨在這些指令碼中加入defer屬性,對效能的提高肯定有所協助。
舉例如下:
<script language="javascript" defer>
var object = new Object();
....
</script>
因為defer屬性預設是為false的,那麼在這裡<script language="javascript" defer>
顯式聲明defer屬性後等同於<script language="javascript" defer=true>
聲明了defer屬性之後,需要判斷是否有別的變數引用了defer指令碼塊中的變數,否則的話會導致指令碼錯誤的產生。 引用DEFER是指令碼程式強大功能中的一個“無名英雄”。你可能從沒有使用過它,但是看完這裡的介紹後,相信你就離不開它。它告訴瀏覽器Script段包含了無需立即執行的代碼,並且,與SRC屬性聯合使用,它還可以使這些指令碼在後台被下載,前台的內容則正常顯示給使用者。
最後請注意兩點:
1、不要在defer型的指令碼程式段中調用document.write命令,因為document.write將產生直接輸出效果。
2、而且,不要在defer型指令碼程式段中包括任何立即執行指令碼要使用的全域變數或者函數。
加上 defer 等於在頁面完全在入後再執行,相當於 window.onload ,但應用上比 window.onload 更靈活!
比較下面的3個例子:
<button id="myButton" onclick="alert('ok')">test</button>
<script>
myButton.click();
</script>
<script defer>
myButton.click();
</script>
<button id="myButton" onclick="alert('ok')">test</button>
<script>
myButton.click();
</script>
<button id="myButton" onclick="alert('ok')">test</button>