網頁加速開啟之JavaScript拖延術。

前一陣子，覺得右邊那個廣告的載入速度似乎拖慢了整個網頁開啟的速度，每次開啟都是主要內容先跑，側邊攔卻等了許久才動起來…

其實，之前就有把那個廣告的部分弄上了延遲的語法，但似乎都沒有明顯的效果，直到前幾天的靈光一現，發覺我好像放錯地方了，經過一些調整後，開啟速度果真快了很多，至少文字部分都出現了！

JavaScript的運作其實是靠瀏覽器下去運算的，也就是說，他的開啟速度一定比純文字來的慢上許多，不過，利用程式碼先讀取先執行的特性，其實這是有辦法克服的。而我的方法其實跟網路上的方法是差不多的，沒有太大或太新奇的變化，因為我只是將一些位置調整到別的地方而已。

那接下來就開始進行改作作業吧！(以下修改例子以WordPress版型為例，BTW，此方法能應用於任何網頁架構)

請先以眼睛將以下程式碼關注一遍後，以滑鼠左鍵與右鍵將它複製起來並確認沒有問題後放到你想呈現內容的地方(例如：sidebar)。

<span id="BloggerAd"></span>

其中，bloggerAd這個是可以改變成任何和你想要的數值，但請記得修改之後程式碼一樣的地方。

然後請開啟WordPress版型中的footer.php找到一個你看起來最順眼的地方放上以下的程式碼。不過！貼的地點請放於</div>標籤之前，然後也別超過<?php s9p_footer(); ?>這個程式碼。

<span id="show_BloggerAd" style="display: none">
 請將廣告代碼或外部連結語法或...你想得到的會拖慢網站的語法貼於此，並刪除此段文字
</span>
<script type="text/javascript">
 document.getElementById("BloggerAd").innerHTML=document.getElementById("show_BloggerAd").innerHTML;
 document.getElementById("show_BloggerAd").innerHTML="";
</script>

修改完成後，請存檔，上傳並覆蓋原來的檔案，接下來就是見證奇蹟的時刻。若你網站有安裝快取，請先將快取檔案清除，之後開啟你的網站，應該能感覺到開啟速度似乎變快了！

這裡使用的方法即是所謂的替代法，也是利用JavaScript完成的，不過因為執行的位置在網站的尾巴，所以當前面執行完畢時，真正要顯示的東西是還沒執行的，但也因此讓主要內容先顯示出來，不會浪費過多的時間在執行語法上，所以在開啟上會有變快的感覺，但理論上時間是差不多的。

或許有人會有疑問，「難道這語法只能用一次?」當然不是，只能用一次的話這東西就是個爛東西了，以下分享我的寫法，雖不是最佳，不過大家可以參考參考，順便理解一下程式的運作啦~

下面這段是我們一開始的程式碼，我也說裡面的id值是可以更改的，所以…

<span id="BloggerAd"></span>

可以改成

<span id="Ads"></span>

或

<span id="abc"></span>

或

<span id="fuxk"></span>

但個人強烈建議用一個能辨認的文字作為id會比較好，但只能用英數。至於內容為啥是空的這問題，其實你也可以放進載入中…這樣的文字啦！只是我討厭而已 XD

<span id="show_BloggerAd" style="display: none">
 請將廣告代碼或外部連結語法或...你想得到的會拖慢網站的語法貼於此，並刪除此段文字
</span>

請將廣告代碼或外部連結語法或…你想得到的會拖慢網站的語法貼於此，並刪除此段文字

另外是這一段，它的id也是可以更改的，不過這裡我的作法是在原來的id前面加個show是要表明說這裡面的東西是要顯示的。

再來底下的這一段程式碼就是重點啦！它是一段用來執行替代的程式碼。

<script type="text/javascript">
 document.getElementById("BloggerAd").innerHTML=document.getElementById("show_BloggerAd").innerHTML;
 document.getElementById("show_BloggerAd").innerHTML="";
</script>

我這邊直接用範例說明會比較快一點。現在假設我有一個id是GoogleAd，那我這段程式碼就要改成…

<script type="text/javascript">
 document.getElementById("GoogleAd").innerHTML=document.getElementById("show_GoogleAd").innerHTML;
 document.getElementById("show_GoogleAd").innerHTML="";
</script>

這樣，不知道大家能不能夠明白呢?

duye.chen