有關web前端網站的優化,其實雅虎已經給出了34條建議,我這里有轉載雅虎再談WEB前端網站優化,但是在實際的開發中我們有多少項目中用到這些開發經驗了。昨天無意間看一網站感覺很多web開發人員不重視它,所以這里也就這個網站的首頁來說說吧。我們還是先來看看幾個運行結果圖吧:
圖1:
圖2:
圖3:
圖4:
圖5:
不知道大家看了以上5張圖有什么感想,
(1)頁面默認加載了太多東西,很多資源都可以放到頁面load后在加載啊
(2)靜態資源css、js、圖片文件未作合並,應該合並並且壓縮這些資源,以減少http請求數目和http返回字節數
(3)js應盡量放到頁面底部,如果可以的話可以采用延遲加載或者異步加載,因為js的解析和執行是阻塞式
(4)頁面中盡量不要有內嵌js腳本,建議外移
(5)客戶端應盡可能的多做點304,如此出的首頁
(6)頁面中<a href="###" .../><a href="javascript:void(0);".../>像這樣的代碼盡量不要出現我們的html頁面中
以上的所說都是我們開發人員可以做到的,至於什么cdn那些東東就不關我們編碼人員的事了。這里我也不說什么雅虎的那34條建議了, 實際上我們一般只要盡量減少Http請求數和返回字節數就可以,我覺得把什么js外移並且放到底部這是最基本的要求啊,減少http請求數典型的就是資源 合並+絕對緩存(一般不怎么采用)+資源延遲加載(盡可能的放到load后加載或則滾動條滾到相應位置在加載),減少http返回字節數一般我們采用 gzip壓縮+條件緩存(推薦用法);資源合並一般主要的是js、css、image,有關這方面大家可以參考,這里只是提供一個思想:
web優化之-js動態合並 動態壓縮 去掉js重復引用 js緩存 js延遲加載
web優化之-js、css動態合並 動態壓縮
Web優化之雪碧圖—動態生成雪碧圖
web性能優化之- js自定義函數延遲執行 jquery插件
這個項目據我的了解是外包給XXX公司的,難道外包公司就真的不要求技術了,聯想到昨天一北京同事回復我博客如下:
真的很想感慨一句,技術人員路在何方?