提高網站訪問速度的方法匯總


以下方法都有在公司實際項目中應用,的確能夠提升客戶端體驗和訪問速度。

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

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM