最近一段時間比較關注前段效能最佳化。昨晚閑來無事，就想把自己最近這段時間瞭解的前段效能最佳化的方法實踐一下啊。
使用Google Chrome的開發人員工具（這個工具很給力，再加上PageSpeed外掛程式，進行頁面效能最佳化很給力），觀察了一下“地瓜哥”的載入速度。驚奇地發現，在jQuery類庫的載入時間，竟然達到5秒左右。怎麼這麼高啊？
《高效能JavaScript》講：“大多數瀏覽器使用單進程處理UI更新和JavaScript運行等多個任務，而同一時間只能有一個任務被執行。JavaScript運行了多長時間，那麼在瀏覽器空閑下來響應使用者輸入之前的等待時間就有多長。從基本層面說，這意味著<script>標籤的出現使整個頁面因指令碼解析、運行而出現等待。不論實際的JavaScript代碼是內聯的還是包含在一個不相干的外部檔案中，頁面下載和解析過程必須停下，等待指令碼完成這些處理，然後才能繼續。”那麼，開啟我網站之後，中間要等待5秒中才能進行繼續。這樣的使用者體驗是極差的。
許多研究都表明，使用者最滿意的開啟網頁時間，是在2秒以下。使用者能夠忍受的最長等待時間的中位元，在6～8秒之間。這就是說，8秒是一個臨界值，如果你的網站開啟速度在8秒以上，那麼很可能，大部分訪問者最終都會離你而去。
根據一些抽樣調查，訪問者傾向於認為，開啟速度較快的網站品質更高，更可信，也更有趣。相對應地，網頁開啟速度越慢，訪問者的心理挫折感就越強，就會對網站的可信性和品質產生懷疑。（參考網頁開啟速度的心理學）
出現這麼差勁的效能問題，看來必須最佳化一下。而針對JavaScript的最佳化，無非就是使用工具將原始碼壓縮，開啟伺服器的Gzip壓縮等。這些已經做過了：Wordpress預設使用的jQuery的mini版；伺服器的Gzip壓縮已經開啟。
另外，還有一個比較有效最佳化方法就是使用CDN服務。不過……
這裡，先對CDN的相關知識簡單普及一下：
CDN的全稱是Content Delivery Network，即內容分髮網絡。其基本思路是儘可能避開互連網上有可能影響資料轉送速度和穩定性的瓶頸和環節，使內容傳輸的更快、更穩定。通過在網路各處放置節點伺服器所構成的在現有的互連網基礎之上的一層智能虛擬網路，CDN系統能夠即時地根據網路流量和各節點的串連、負載狀況以及到使用者的距離和回應時間等綜合資訊將使用者的請求重新導向離使用者最近的服務節點上。其目的是使使用者可就近取得所需內容，解決 Internet網路擁擠的狀況，提高使用者訪問網站的響應速度。（參考內容分髮網絡）
但是，自己一個小小的個人部落格網站是不可能建立一個CDN服務的。所以，只能找一些免費的CDN服務。
其實，很早就瞭解到Google很早就通過Google Ajax Library API(GALA)提供jQuery等比較流行的JavaScript庫了。但是，經過測試，這個服務就像Google的搜尋一樣，很不穩定。連首頁面都打不開。（具體原因就不說了，大家都懂得。）看來，只能“另作打算”了。接著搜尋，發現微軟竟然也提供免費的jQuery的CDN服務（詳見：Microsoft Ajax Content Delivery Network）。
然後，自己寫了一個測試，測試一下載入速度。原始碼如下：
協助| 123456789101112131415161718192021 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <title>測試微軟的CDN服務</title> <script type='text/javascript' src='http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js'></script> <script type='text/javascript'> $(document).ready(function(){ $("#isCompeleted").text("載入已經完成"); }); </script> </head> <body> <a href="http://www.diguage.com/" target="_blank" id="isCompeleted">載入尚未完成</a> </body> </html> |
發現，載入速度大概在500毫秒，比使用我自己網站中的jQuery庫快了大概十倍。怎一個爽字了得啊？！
接下來，就是找Wordpress中是在哪裡載入jQuery庫了。
在Wordpress中，一個模板或者外掛程式使用到某個類庫，會使用wp_enqueue_script函數來調用需要的類庫。Wordpress會將%WP_HOME%/wp-includes/js目錄下所有的類庫進行登記。所以，只需要在登記時，把登記的路徑修改為微軟CDN服務提供的jQuery連結即可。Wordpress中登記JavaScript庫的工作是在%WP_HOME%/wp-includes/script-loader.php中完成的。所以，在這個檔案中的120行（Wordpress 3.4.1）中做如下修改：
協助| 123 | // $scripts->add( 'jquery', '/wp-includes/js/jquery/jquery.js', false, '1.7.1' ); //注釋掉原來的，做個備份。 $scripts->add( 'jquery', 'http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js', false, null ); |
我看網站的原始碼了，載入的是jquery-1.7.2.min.js。所以，果斷選擇這個版本。另外，如果最後一個參數傳’1.7.2′ 的話，在頁面上<script>標籤中的URL就成了以“.js?ver=1.7.2”。一般使用JavaScript時，不會帶上這個參數的。並且，如果某人訪問我的網站之前正好訪問量一個也使用了微軟的這個CDN服務的網站，如果上一個網站沒有這個參賽，而我的網站有，則這個jQuery類庫會再次載入一邊，增加使用者等待時間。對提高使用者體驗不利。（這點沒有寫例子測試。是我的猜測。）所以，經過我的測試，傳null時，則不會出現“?ver=1.7.2”，則果斷傳null。
經過，這麼折騰，網頁載入速度提高大概2-3秒。（微軟的CDN服務的載入時間不是很穩定，經過我多次測試，時間一般在1秒一下。）分享很出來，希望大家都試試，把提高一下我們的網頁的載入速度。
參考資料：
用Google Ajax Library API的jquery替換WordPress的內建jquery
wordpress最佳化 使用SAE提供的jquery.js替代wordpress原生的
使用Google AJAX Libraries API替換WordPress內建的js庫
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
