web前端效能調優

標籤：串連   web前端   module   上線   com   載入速度   ram   simple   添加   

　　最近2個月一直在做手機端和電視端開發，開發的過程遇到過各種坑。弄到快元旦了，終於把上線了。2個月幹下來滿滿的的辛苦，沒有那麼忙了自己準備把前端的效能調優總結以下，以方便以後自己再次使用到的時候得於得心應手。參照了《高效能網站建設指南-前端工程師技能精髓》，本文主要主要概述前端的效能調優的方法。

第一條最佳化：減少http請求

　　一想到調優好多人都會想到減少http請求，但是可能好多人都會不知道具體操作，我一開始也不知道。項目剛好使用fis發現fis可以打包指令碼和樣式表。perfect！fis的打包非常簡單，只要在fis-conf.js中設定:

fis.config.merge({    pack : {        ‘pkg/requirepkg.js‘:[‘/develop_workspace/appframe/kernel/jquery-1.8.3.js‘,             "/develop_workspace/appframe/kernel/require.js",             "/develop_workspace/appframe/kernel/require-conf.js" ],       ‘/pkg/aio.css‘: ‘**.css‘    }});fis.config.set(‘modules.postpackager‘, ‘sfis-postpackager-simple‘);//外掛程式是提供給純前端應用的打包合并外掛程式

 js合并前

js合并後

css合并前

css合并後

從Time可以看出合并效果還是非常明顯的。還有一些合并圖片什麼的方法，項目中使用小表徵圖比較少，就沒有具體去操作了。還有一方面是閱讀代碼查看自己的商務邏輯是否存在多調介面等等多餘的http請求，這樣也可以減少http請求。

第二條最佳化：添加expires頭

在nginx的nginx.conf設定檔配置expires

location~ \.(gif|jpg|jpeg|png|bmp|ico)$ {           expires 30d; }

添加expires頭

第三條最佳化:壓縮組件

fis內建壓縮命令，非常好用，在要在fis release加上-o就可以了，壓縮比達到50%-70%。你想象不到壓縮就是這麼簡單。

壓縮前

壓縮後

Gzip

　　瀏覽器和伺服器支援的話，可以使用Gzip壓縮來減小響應的大小，瀏覽器可以使用accept-Enncoding頭來聲明它支援壓縮，伺服器使用content-Encoding頭確認響應已經被壓縮。我使用的是nginx伺服器，其設定如下：  

　　gzip on;//開啟Gzip    gzip_min_length  1k;//大於1K才壓縮    gzip_buffers  4 16k;//設定系統擷取幾個單位的緩衝用於儲存gzip的壓縮結果資料流。4 16k代表以16k為單位，安裝未經處理資料大小以16k為單位的4倍申請記憶體。    gzip_http_version 1.0;//http版本    gzip_comp_level 9;//壓縮層級 1-10，數字越大壓縮的越好    gzip_types    application/javascript   text/plain application/x-javascript 
　　text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;//壓縮的類型    gzip_vary on;//和http頭有關係，加個vary頭，給Proxy 伺服器用的，有的瀏覽器支援壓縮，有的不支援，所以避免浪費不支援的也壓縮，所以根據用戶端的HTTP頭來判斷，是否需要壓縮

Gzip

keep-alive

　　http構建在tcp之上，早期的http實現中，每個http請求都要開啟一個socket串連，效率低下。保持持久串連的引入到解決了這一低效率的問題，使得瀏覽器可以在一個單獨的串連上進行多個請求，瀏覽器和伺服器使用connection頭來指出對keep-alive的支援，在伺服器的響應connection頭看起來是一樣的。

keepalive_timeout  65;

 

keep-alive

第四條最佳化：把css放頂部，把js放底部

　　把css放頂部也許有一些人會覺的影響DOM樹載入，會導致頁面載入慢。實際上把css樣式表放在文檔頂部-head中能夠使頁面載入更快。樣式表放在頭部會使頁面逐漸呈現，樣式表和DOM一起載入，可以避免頁面重繪。把指令碼放到底部，頁面也會逐漸呈現，提高下載的並行度。

其他

　　使用內容發布網路，其實就是CDN。

　　避免CSS運算式。

　　把js和css放到外部。

　　..............

　　以上的三個都沒有測試，也沒有實踐。都是在書本上看到的，經過前面4項最佳化，頁面載入速度已經達到我的預期了，後面就準備代碼審查整改代碼了。前面效能調優一直都覺的最佳化java代碼、最佳化sql語句，但是現在發現前端也不可忽視。以上就是我的最佳化之路，肯定有不足之處，歡迎批評指出。謝謝

web前端效能調優