提升網站訪問速度的方法彙總

如下方法都有在公司實際項目中應用，的確可以提高客戶端體驗和訪問速度。

一、建議客戶端使用Chrome或高版本IE瀏覽器；

二、可以實現靜態化的頁面儘可能在服務器端保存靜態頁面，訪問動態頁面確定會比靜態頁面慢。

三、減小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(圓角、陰影、漸變、透明等)替換沒必要要圖片。

四、使用內容發佈系統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>

 

五、靜態資源客戶端緩存

     將靜態資源（例如：圖片、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>

 

六、Link樣式標籤應放在Head標籤中，不然IE瀏覽器可能加載時會白屏

七、js文件引用放在頁面底部</body>標籤內

八、將js和css放到外部文件中，這樣經過靜態文件緩存，能夠有效減小html頁面的大小

九、資源懶加載

     經過將圖片或其餘資源按需加載，能夠有效提升用戶體驗，如各大電商網站（淘寶、天貓、京東等）目前都有對圖片進行按需加載，當圖片即將進入可視區域則進行加載。

     如下是天貓首頁部分html截圖

十、JavaScript 優化

     以上幾點大部分都是優化網絡資源，若是當頁面中須要執行大量js代碼時咱們也有必要對js進行優化。

     咱們可使用 Chrome Profiles來檢查js代碼，從而找出比較消耗資源的代碼再具體進行優化。

     Chrome開發者工具之JavaScript內存分析：http://www.open-open.com/lib/view/open1421734578984.html