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

發表: 2008-09-15 11:08 分類: Javascript, 小技巧 | 8 則迴響 » | 瀏覽:24,656 人次

標籤 : , , ,

image

當你的網頁或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開頭的程式碼)

image

將轉換出來的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跑得最久。(每個長條圖都會顯示檔名及載入花費的時間)

image

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

image

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

image

只要能利用上面兩個小工具,就很容易地找出網頁開啟速度的癥結點,除了可以將最慢的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這個參數,來控制你要顯示的內容了,很方便吧!
Related Posts with Thumbnails


喜歡㊣軟體玩家的文章嗎?歡迎加入《軟體玩家FB粉絲團》吧!
或是按下<這邊>來訂閱RSS!


相似文章

隨機文章

找不到想看的文章?試試看㊣軟體玩家文章搜尋引擎吧:
自訂搜尋

迴響:

歡迎留下您的意見!


※PS: 因為阿正老師時間有限,且本站所介紹的軟體種類太多(所產生的狀況也很多),可能無法回答一一回答讀者們的問題(尤其像是出現某某錯誤訊息,或者操作過程中哪邊卡住),您可以先上Google搜尋相關的關鍵字,或是到軟體的官方網站/論壇來爬文,不便之處還請見諒。
※PS:本站不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取該類檔案。
※PS:本站因採用反向代理(Reverse Proxy)技術,留言後必須等到20分鐘後快取網頁過期才會顯示。