web前端性能調優

web前端性能調優

 

　　最近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頭，給代理服務器用的，有的瀏覽器支持壓縮，有的不支持，因此避免浪費不支持的也壓縮，因此根據客戶端的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語句，可是如今發現前端也不可忽視。以上就是個人優化之路，確定有不足之處，歡迎批評指出。謝謝