Javascript的Defer屬性

來源:互聯網
上載者:User
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>

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.