? ? ? ?最近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;//開啟Gzipgzip_min_length? 1k;//大于1K才壓縮gzip_buffers4 16k;//設置系統獲取幾個單位的緩存用于 存儲gzip的壓縮結果數據流。4 16k代表以16k為單位，安裝原始數據大小以16k為單位的4倍申請內存。 ? ? ? ? ? ? ? ? ? ? ?gzip_http_version1.0;//http版本gzip_comp_level9;//壓縮級別 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頭，給代理服務器用的，有的瀏覽器支持壓縮，有的不支持，所以避免浪費不支持的也壓縮，所以根據客戶端的HTTP頭來判斷，是否需要壓縮。

Gzip

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語句，但是現在發現前端也不可忽視。以上就是我的優化之路，肯定有不足之處，歡迎批評指出。謝謝