網站減肥及代碼優化實錄分享

仲介交易 HTTP://www.aliyun.com/zixun/aggregation/6858.html">SEO診斷 淘寶客 雲主機 技術大廳

本人上個星期剛上線了一個淘寶客類型的小站，雖然一個多星期了，到現在還沒有起色，但我還是有信心能夠把它做好，而且我覺得做為一個站長，耐心這個東西，確實是必須的。 否則永遠做不好一個站。 這個站是用PHP的一個國際知名的框架YII FrameWork開發的，YII的好處就是方便快捷，並且事實確實如此。 它自帶JQUERY及其UI類庫，使用非常方便。

現在先說第一個問題：

作為一個購物類型的網站，最大的缺點就是圖片過多導致網頁載入慢。 相信做過這類站的站長都有這種感覺。 其實這個問題還是有很多的解決辦法的，我採用的是延遲圖片載入的方法。 用了一個JQUERY的外掛程式 jQuery.lazyLoad ，這個外掛程式確實不錯，它實現了優先顯示瀏覽器可視區域的圖片，延遲載入不可見區域的圖片。

這種思路非常實用：首先，由於不需要同時載入所有的圖片，於是加速了可視區域內的圖片載入速度;再就是能有效的減小流量，當然，如果是淘寶客類網站調用淘寶官網的圖片，這個是不需要自己的流量的，但就第一條優點， 就足夠讓我們好好的利用它。 或許你會說，這個不算是給網站減肥。 其實我覺得像這樣給網站減少不必要的流量，就是減肥，因為減肥的最終目的莫過於兩點：加速網站運行;減少不必要的流量。

再來說說第二個問題：

我的站內有一個商品類目，第一層顯示的是大類目，然後通過大類目連結到這個大類目下的子類目。 一開始，我直接用A連結中轉到下一個頁面來顯示子類目，但後來我使用了JQUERY UI的Dialog方法來顯示子類目，因為我覺得這樣的效果更炫，而且使用者體驗更好。 當然，我依然保留了A連結，這樣可以保證當使用者禁用了JS之後，仍然可以正常的訪問到子類目清單。

那麼現在問題來了，jQuery UI的效果確實很炫，但同時，眾所周知，jQuery UI是非常龐大的!所以，每次我訪問我這個類目的頁面時，都感覺不是很流暢，這也是我這次給網站減肥的主要目的。 其實jQuery UI是可以定制下載的，你可以只勾選你用得到的功能，其他的不勾選，這樣下載下來的檔就會小很多。 我現在用到的功能其實就是一個 Dialog，然後加上必須的core和兩個effect。 於是我重新定制了一份，下載完成後覆蓋了原來的檔。 原來的檔是190K左右，定制後的是35K。 一下子減掉了140多K。 別小看了這140K，如果訪問這個頁面10萬次的話，就等於我節省了1G多的流量。 難道這個資料還不夠令人興奮嗎?而且，還不光是節省流量的好處，少載入140K的檔，可以令頁面的存取速度提升不少。

做完了這些，我還是感覺不夠快，還沒有達到我預期的效果。 看來，問題不止是出現在JS檔上，於是繼續排查代碼。 後來發現，我dialog裡面的內容其實都已經在當前頁面裡獲取出來了，只是將它 display:none 了，暫時不顯示，等觸發了 Dialog.open 事件時，才將它顯示出來。 那麼很顯然，問題就出在這裡。 可以想像一下，如果我有50個大類目，現在我在當前的頁面只顯示這50個大類目的話，MySQL查詢只需要1次就可以獲取出來;如果我在當前的頁面將這50個大類下的子類目也全部獲取出來的話，那麼將需要 1+50 次的查詢。 這就大大降低了程式的執行效率，並且這種display:none狀態下的連結，對SEO只有壞處沒有好處。 最後，我打算用AJAX來調用子類目的資料，有訪問需要的時候才給出資料，不需要一次性執行那麼多次的資料庫查詢，大大提升了性能，而且也減少了不必要的代碼。 合理的使用AJAX，確實會給我們帶來意想不到的收穫!

改完收工，測試了一下，這個類目的頁面載入速度已經和其他的頁面一樣快捷了!激動之余，不免想來A5跟大家一起分享一下，希望對大家有用。 最後把我的網址附上：HTTP://www.wg580.net 可以去測試一下。 希望大家多多支援，謝謝!