如何優(yōu)化WEB站點(diǎn)性能加載速度提升2s呢？
進(jìn)行優(yōu)化前，關(guān)鍵是剖析當(dāng)前的web性能，找到性能瓶頸，從而確定最需改進(jìn)的地方；如果精力有限，首先將精力放在能明顯提升性能的改進(jìn)點(diǎn)上；
《高性能網(wǎng)站建設(shè)指南》提出了一個(gè)性能黃金法則：
只有10%-20%的最終用戶響應(yīng)時(shí)間花在了下載HTML文檔上；其余的80%-90%的時(shí)間花在了下載頁面中的所有組件上。
由于本文將實(shí)施一個(gè)完整的優(yōu)化流程，所以，我們還是從后臺(tái)開始；
案例說明：
優(yōu)化之前的網(wǎng)站規(guī)模：
2個(gè)js、一個(gè)頁頭、一個(gè)頁腳；3個(gè)css；
類型：博客類站點(diǎn)；后臺(tái)邏輯簡單；首頁不到10個(gè)sql查詢；
首頁html文檔52kb;
第一步：后臺(tái)優(yōu)化，啟用頁面緩存；
實(shí)驗(yàn)站點(diǎn)首頁后臺(tái)邏輯并不復(fù)雜，不超過10個(gè)Sql查詢，通過查看時(shí)間線，本站在獲取HTML文檔時(shí)，花費(fèi)的時(shí)間不到總響應(yīng)時(shí)間的20%，優(yōu)化之前沒有使用緩存，所有的數(shù)據(jù)都是從數(shù)據(jù)庫讀取，這里，我們使用靜態(tài)頁面緩存，將首頁整個(gè)頁面完全的存放在緩存中（關(guān)于YII靜態(tài)頁面緩存的使用，參考這里）；
通過查看html文檔的生成時(shí)間來檢測優(yōu)化效果；
首字節(jié)時(shí)間為376ms；html生成的時(shí)間大大縮短，后臺(tái)時(shí)間減少了一倍。
優(yōu)化前：
優(yōu)化后：
第二步，DNS域名解析加速：
DNS解析是用戶訪問站點(diǎn)的第一步，在此之前，你的網(wǎng)站無法做任何事情；
站點(diǎn)的DNS解析時(shí)間不應(yīng)該超過500ms，如果站點(diǎn)原始DNS解析時(shí)間過長，就該考慮考慮使用第三方解析加速服務(wù)；
實(shí)驗(yàn)站點(diǎn)的原始DNS解析較慢，平均耗時(shí)1017ms，算是非常長的；對于DNS加速，可以使用DNS域名解析加速服務(wù)，本站點(diǎn)采用的國內(nèi)的一款免費(fèi)DNS加速服務(wù)DNSPOD，效果還不錯(cuò)，使用后平均耗時(shí)降到370ms；
加速前測試：
使用DNS域名解析服務(wù)之后的測試：
第三步：使用CDN加速；
采用第三方CDN加速，時(shí)間縮短到2.1s；從下圖中看到主要的耗時(shí)在于并行下載的個(gè)數(shù)有些低，如果能夠提升并行下載量的個(gè)數(shù)，那么整體加載時(shí)間就會(huì)降低；
注：個(gè)人建議，啟用CDN最好放在最后一步，等將站點(diǎn)本身的優(yōu)化都做完了之后，再啟用CDN可以明顯的看到優(yōu)化效果。（開啟CDN后，由于有CDN緩存的原因，觀測站點(diǎn)的本身的優(yōu)化就不是很方便了）；
第四步，采用多臺(tái)服務(wù)器提高并行加載量：
原理：一個(gè)瀏覽器對與同一域名的并行下載的個(gè)數(shù)默認(rèn)是2個(gè)， HTTP.1.0中規(guī)定的是4個(gè)。這樣，我們可以使用不同的域名來提升下載的速度；
觀察上圖中的下載數(shù)量，第一次并行下載的個(gè)數(shù)是4個(gè)，初始認(rèn)為是瀏覽器對于同一個(gè)域名來源的下載所限導(dǎo)致；于是考慮將部分靜態(tài)文件分別放在不同的服務(wù)器上；通過把css和js放在不同服務(wù)器上；結(jié)果并不理想，發(fā)現(xiàn)并未提高速度。
想到在哪曾看到過，瀏覽器必須得把放在頁頭的css和js下載完成了之后才會(huì)開始下載其它的靜態(tài)組件；
關(guān)于并行下載這點(diǎn)上，后續(xù)將繼續(xù)實(shí)驗(yàn)是否還有優(yōu)化的空間。
第五步，合并腳本和樣式表；
本站首頁使用了2個(gè)js和3個(gè)css。如果采用樸素復(fù)制的方式，將js和css都分別整合到一個(gè)文件中，不但操作麻煩，而且不方便后期的管理。網(wǎng)絡(luò)上有不少合并的工具，本站采用了CSS和JS合并優(yōu)化工具-minify（下載地址：http://code.google.com/p/minify/）。如果使用的YII框架，更有YII整合版（minscript Extension），簡單幾步的配置，就自動(dòng)將頁面所有的js和css文件合并；
第六步，壓縮css/js/html/xml；
不同的web服務(wù)器設(shè)置方式有所差別，本站使用的Linux/apache,
在web根目錄下的.htaccess文件中添加以下代碼即可：
#set compress
<ifmodule mod_deflate.c>
AddOutputFilter DEFLATE html xml php js css
</ifmodule>
通過firefox工具可看到，壓縮前，html文檔的大小是25KB；合并后的js大小為138KB；
壓縮后，html文檔大小為6.2KB。js大小為39.8KB；減少2/3的傳輸時(shí)間；
第六步，最大化的減少HTTP請求；
添加Expires頭, 啟用靜態(tài)內(nèi)容緩存，將jpg、gif等文件緩存；
方法也是在.htaccess中添加：
# Image and Flash content Caching for One Month
<FilesMatch “.(flv|gif|jpg|jpeg|png|ico|swf)$”>
Header set Cache-Control “max-age=2592360″
</FilesMatch>
結(jié)論
查看最終的測試結(jié)果，整體實(shí)現(xiàn)了較大的性能提升，最終頁面展現(xiàn)時(shí)間為1.62s（測試使用的是一個(gè)第三方web測速工具，所有測試結(jié)果是在第三方本地?zé)o緩存的條件下進(jìn)行）。仔細(xì)觀察本站最后幾個(gè)加載項(xiàng)：有一個(gè)第三方網(wǎng)站的廣告（加載廣告的時(shí)刻，頁面已經(jīng)全部呈現(xiàn)，對用戶體驗(yàn)影響不大），以及cnzz的統(tǒng)計(jì)數(shù)據(jù)。這樣看來，在第12項(xiàng)加載完后，整個(gè)頁面就完整的呈現(xiàn)在用戶面前，優(yōu)化最終結(jié)果是1.1s，較優(yōu)化前加載速度提升2s；由于物理?xiàng)l件（虛擬機(jī)、國外站點(diǎn)）所限，本次優(yōu)化就到此為止（后續(xù)將在并行下載上做做文章，看是否有進(jìn)一步提升空間）。
本文由站河南北大青鳥校區(qū)整編而成，如需了解更多IT資訊類的文章、新聞、課程和學(xué)習(xí)技巧、就業(yè)案例、招生詳情等問題，可以對在線咨詢老師進(jìn)行一對一問答！
推薦資訊
- 鄭州職業(yè)學(xué)校都有哪些... 2021-01-13
- 低學(xué)歷如何成就高夢想，高中畢業(yè)... 2012-09-13
- 河南省計(jì)算機(jī)專業(yè)大學(xué)排名？... 2020-04-12
- 鄭州北大青鳥告訴你：應(yīng)屆生如何... 2013-04-11
- 不是計(jì)算機(jī)專業(yè)的轉(zhuǎn)行學(xué)IT難嗎... 2019-12-31
熱點(diǎn)資訊
- Windows Server 2008 R2如何修改... 2018-09-07
- 常見的五個(gè)Web應(yīng)用漏洞介紹與其解... 2018-09-07
- 刪除遠(yuǎn)程桌面連接IP記錄... 2018-09-07
- 自己動(dòng)手解決服務(wù)器上的安全問題... 2018-09-07
- 鄭州北大青鳥學(xué)術(shù)交流：服務(wù)器數(shù)... 2018-09-07
聯(lián)系電話：400-638-3521/
值班熱線：15225191462(手機(jī))
- 學(xué)校介紹
- 中心簡介
- 青鳥概況
- 乘車路線
- 校區(qū)環(huán)境
Copyright ? 2006-2020 All Rights Reserved. 版權(quán)所有
鄭州北大青鳥翔天信鴿軟件學(xué)院 地址：鄭州市文化路90號河南財(cái)經(jīng)政法大學(xué)文南校區(qū)1號教學(xué)樓 網(wǎng)站地圖 乘車路線 - 聯(lián)系我們 - 網(wǎng)站RSS - 河南北大青鳥招聘
豫ICP備10022989號-1 辦學(xué)許可證號：1601035000013 
豫公網(wǎng)安備 41010502002899號