網頁開啟速度被一堆Javascript拖垮了？教你修改網頁的好撇步，讓網頁載入速度更快！

當你的網頁或BLOG中嵌入了一些廣告、統計的外掛Javascript程式，常因為這些Javascript載入過慢，造成網頁開啟速度緩慢，網頁內容東缺一塊、西缺一塊的。阿正老師這邊教大家一個小技巧，能讓比較慢的元件放在最後才載入，讓別人開你的網頁能更順暢喔！

前言

許多有網站或部落格的玩家都會遇到一個問題，就是在網頁中插入了外連的Javascript程式，因為這些程式因為伺服器負載較重、或主機放在國外，載入會花較多的時間，造成網頁被該程式拖累，無法很順暢的直接載入完成。

之前在「不要讓 JavaScript 拉長你網站的反應時間 」這篇文章中，學到了Javascript(簡稱JS)的延後載入語法，可以在將整個網頁載入完畢後，才載入特定的JS程式碼。使用方式就是在JS的標籤中，加入defer或defer=”defer”語法，如

<script type="text/javascript" src="test.js" defer="defer"></script>

但是該語法在IE中常會出狀況，會導致整個網頁出錯，網頁中只剩下某個加入defer的Javascript程式執行結果。

另一種延遲載入法

阿正老師在這邊介紹另外一種延後載入JS的方法，就在先在畫面中要出現JS的地方（如廣告區塊），先放一個空白的<div>區塊，然後在網頁的最下方，放入含實際內容的<div>區塊（使用JS來顯示內容)，並且執行一段JS程式，把下面的div內容複製到原來的div區塊中即可。以下就詳細介紹操作步驟：

步驟一、插入空白的DIV區塊

在你要顯示Javascript的地方，先插入一段空白DIV區塊，如：

<div id="ad_space">
</div>

步驟二、將要顯示的內容轉換成Javascript程式碼

首先利用下面的HTML轉Javascript轉換工具，將你本來要顯示的內容轉換成Javascript程式碼：

如果延後載入Bloggerads的程式碼，先複製原本的HTML語法，如下：

<script type="text/javascript" 
src="http://ad2.bloggerads.net/showads.aspx?
blogid=xxxxxxxxxxxxx&amp;charset=utf-8" ></script>

接著用上面的轉換工具(以上方的Chinaz工具為例），將上面的HTML語法貼到上面的格子裡，就可轉成JS代碼了。（Document.wirteln開頭的程式碼）

將轉換出來的JS代碼複製起來，用記事本等文書軟體儲存成.js檔(如ad.js)，然後上傳到你的網頁根目錄中。

步驟三、插入實際內容DIV區塊

完成上述步驟後，接著開啟你的網頁編輯畫面，在最下方加入一段div的區塊，區塊的內容就是執行前面的JS程式，並且設定為隱藏（怕會影響網頁格式）。因為這支Javascript放在網頁最下方，所以會最後才執行。

<div id="ad_content" style="visibility:hidden;">
<script language=JavaScript src='/ad.js'></script>
</div>

步驟四、完成置換程序

在步驟三的div區塊下方，加入一段能置換DIV區塊內容的程式碼，如下：

<SCRIPT type='text/javascript'>
document.getElementById("ad_space").innerHTML=document.getElementById("ad_content").innerHTML;
document.getElementById("ad_content").innerHTML="";
</SCRIPT>

這段程式碼會最後執行，將下方隱藏的DIV區塊內容，直接複製到上方預留的DIV區塊中，並將隱藏的DIV區塊清除。

如此一來在整個網頁都載入後，才會顯示該DIV區塊，讓你的網頁載入變得更順暢，而不會卡住喔！

Q：如何知道網頁中哪支Javascript程式載入最慢？

A：通常你開啟網頁時，會發現會卡在某個地方出不來，那個大概就是載入的癥結所在，如Google Adsense、部落格觀察、部落格廣告…等。如果你要明確一點的數據，可以用Firefox搭配Firebug套件，來查出哪支Javascript跑得最久。（每個長條圖都會顯示檔名及載入花費的時間）

你也可以利用Pindom Tools這個免費的測速網站服務，輸入自己的網址來觀察。

上方的長條圖，黃色是開始時間，到了綠色是開始連接的時間，到了藍色是開始傳送檔案的時間，藍色的結束表示傳輸完成。

只要能利用上面兩個小工具，就很容易地找出網頁開啟速度的癥結點，除了可以將最慢的Javascript丟到最後載入之外，還可以將某些最常出現圖片丟到速度更快的圖庫中，用以改善載入速度喔！

Q:如果我有很多段Javascript要最後載入，難道一段JS就要儲存成一個檔案？

A:如果你對JS稍有認識，可以直接使用switch來做選擇。上方空白的div可自行改名，如ad_space1、ad_space2…，實際存放的內容，可改成ad_content1、ad_content2，然後在ad_content的標籤中，加入一段：

<script type="text/javascript">
id=2;
</script>

裡面的id=多少可自行修改，然後修改你的ad.js檔案，改成：

switch (id)
{

case 1:
 document.write("第1段JS程式代碼")
 break
case 2:
 document.write("第2段JS程式代碼")
 break


}

如此一來，就可以利用id這個參數，來控制你要顯示的內容了，很方便吧！