以下方法都有在公司實際項目中應用,的確能夠提升客戶端體驗和訪問速度。
1、建議客戶端使用Chrome或高版本IE瀏覽器;
2、能夠實現靜態化的頁面盡量在服務器端保存靜態頁面,訪問動態頁面肯定會比靜態頁面慢。
3、減少HTTP請求
1)合並壓縮js、css,可以使用前端自動化構建工具。
例如:grunt(使用說明:http://www.cnblogs.com/wangfupeng1988/p/4561993.html)、gulp 、
很不錯的google在線js壓縮工具:http://closure-compiler.appspot.com/home

2) 使用精靈圖,將一些小圖標做成一張圖片,再使用CSS進行定位。
3) 使用Iconfont,優點占用資源小,可以和字體一樣設置大小和顏色。
推薦兩個免費的iconfont下載地址:http://www.flaticon.com http://www.iconfont.cn
4) 移動端頁面利用CSS3(圓角、陰影、漸變、透明等)替換不必要圖片。
4、使用內容發布系統CDN
將一些訪問量較大的靜態資源放在CDN服務上,另外國內各大互聯網公司都有免費提供常用JS框架。
例如:http://cdn.code.baidu.com/
http://www.bootcdn.cn/
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>')</script>
5、靜態資源客戶端緩存
將靜態資源(例如:圖片、js、css)在客戶端進行緩存,該效果非常明顯,性能可以提升50%以上。

IIS中設置方法:
1)打開“HTTP響應標頭”

2)設置常用標頭

3)設置靜態內容緩存時間

Apache 設置方法:
具體設置方法可以參照:http://www.maixj.net/wangzhan/shezhiwangyejingtaineironghuancunshijian-1187
開啟LoadModule expires_module modules/mod_expires.so模塊
然后,在httpd.conf中添加如下內容:
<IfModule mod_expires.c> # enable expirations ExpiresActive On ExpiresDefault A2592000 # expire images after a month in the client's cache ExpiresByType image/gif A2592000 ExpiresByType image/jpg A2592000 ExpiresByType image/jpeg A2592000 ExpiresByType image/png A2592000 # css/js ExpiresByType text/css "access plus 4 weeks" ExpiresByType text/javascript "access plus 4 weeks" # html ExpiresByType text/html "access plus 2 days" </IfModule>
6、Link樣式標簽應放在Head標簽中,否則IE瀏覽器可能加載時會白屏
7、js文件引用放在頁面底部</body>標簽內
8、將js和css放到外部文件中,這樣通過靜態文件緩存,可以有效減少html頁面的大小
9、資源懶加載
通過將圖片或其他資源按需加載,可以有效提高用戶體驗,如各大電商網站(淘寶、天貓、京東等)目前都有對圖片進行按需加載,當圖片即將進入可視區域則進行加載。
以下是天貓首頁部分html截圖
10、JavaScript 優化
以上幾點大部分都是優化網絡資源,如果當頁面中需要執行大量js代碼時我們也有必要對js進行優化。
我們可以使用 Chrome Profiles來檢查js代碼,從而找出比較消耗資源的代碼再具體進行優化。
Chrome開發者工具之JavaScript內存分析:http://www.open-open.com/lib/view/open1421734578984.html
