非同步載入執行JavaScript的寫法

說明:
網頁 HTML 內的 JavaScript (JS) 程式碼改寫成「非同步載入並執行」(asynchronized JavaScript)後可讓原本 HTML 頁面呈現的時間變快、而不去卡住原本主頁面的渲染時間。
這一篇將簡短說明如何將(網頁內)以下這段同步載入並執行的 JavaScript 碼範例改寫成非同步載入並執行的方式運作:

<script type=”text/javascript” src=”http://www.zhupiter.com/my.js”></script>

o 無關非同步寫法,是為了提高網頁內 JavaScript 程式碼相容性
為了增加 JavaScript 程式碼於網頁內的相容性 (相容於更多瀏覽器種類), JavaScript 程式碼的 “外圍’ 建議寫成以下格式:

<script type=”text/javascript”>
<!– <![CDATA[
// 這裡擺放正式的 JavaScript 程式碼
// ]]> –>
</script>

o 改寫成非同步載入並執行的 JavaSctipt 程式碼
上述範例改寫後的「非同步載入並執行」JavaScript 程式碼會變成這樣:

<script type=”text/javascript”>
<!– <![CDATA[
(function() {
var oMyJs = document.createElement(‘script’); oMyJs.type = ‘text/javascript’; oMyJs.async = true;
oMyJs.src = ‘http://www.zhupiter.com/my.js‘;
var oS = document.getElementsByTagName(‘script’)[0]; oS.parentNode.insertBefore(oMyJs, oS);
})();

// ]]> –>
</script>

如果載入並執行 JavaScript 程式前還有一些變數需要設定,這些 JS 程式請寫在「var oMyJs =…」之前、左大括號「{」之後:

<script type=”text/javascript”>
<!– <![CDATA[
(function() {
// 還有一些變數需要設定的話,放這裡。
var oMyJs = document.createElement(‘script’); oMyJs.type = ‘text/javascript’; oMyJs.async = true;
oMyJs.src = ‘http://www.zhupiter.com/my.js’;
var oS = document.getElementsByTagName(‘script’)[0]; oS.parentNode.insertBefore(oMyJs, oS);
})();
// ]]> –>
</script>

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.