了解常見(jiàn)的網(wǎng)站性能優(yōu)化技巧
首先我們要學(xué)一些優(yōu)化網(wǎng)站性能和體驗(yàn)的理論和基礎(chǔ)知識(shí),雅虎已經(jīng)幫我們總結(jié)好了,詳見(jiàn)參考鏈接中的幾篇文章,有好心人已經(jīng)給翻譯成中文了。這里面提到的一些技巧可操作性都很強(qiáng),建議每一個(gè)網(wǎng)站開(kāi)發(fā)人員都仔細(xì)學(xué)習(xí)并進(jìn)行實(shí)踐,可以說(shuō)不了解這里面說(shuō)的優(yōu)化技巧,提升網(wǎng)站前端性能就無(wú)從談起。
診斷網(wǎng)站性能
要想優(yōu)化網(wǎng)站的前端性能,首先要查看最影響前端性能的瓶頸是哪些?最常用的工具就是Google的Page Sped和Yahoo的YSlow,這兩個(gè)工具都是在Firefox下使用的,并且是基于FireBug的,F(xiàn)ireBug是前端開(kāi)發(fā)人員必備的一個(gè)插件了。這兩個(gè)工具可以幫你診斷你的頁(yè)面的性能瓶頸在哪里,比如打開(kāi)你的站點(diǎn)首頁(yè)共消耗了多少網(wǎng)絡(luò)流量,進(jìn)行了多少次HTTP請(qǐng)求,每個(gè)頁(yè)面組件是否可以進(jìn)行緩存,頁(yè)面加載的各個(gè)執(zhí)行過(guò)程各占用了多少時(shí)間,加載中是否有阻塞情況,頁(yè)面組件并行加載情況如何,圖片是否還可以進(jìn)行無(wú)損壓縮,腳本和樣式放置的位置是否合理,是否刪除了不必要的空白,是否進(jìn)行了gzip的壓縮等等。知道了這些信息,你就可以有針對(duì)性的進(jìn)行網(wǎng)站性能優(yōu)化,先把最影響性能的地方優(yōu)化掉。
這兩個(gè)工具使用起來(lái)也很簡(jiǎn)單,詳見(jiàn)參考鏈接中的兩篇文章。
進(jìn)行優(yōu)化實(shí)踐
根據(jù)我對(duì)網(wǎng)站優(yōu)化的學(xué)習(xí)和實(shí)踐,總結(jié)出來(lái)一些經(jīng)驗(yàn):一般網(wǎng)站性能消耗都集中在網(wǎng)絡(luò)下載上,包括頁(yè)面本身的HTML以及圖片,腳本,樣式等組件的下載,尤其是在網(wǎng)速比較慢的時(shí)候,下載這些東西要花費(fèi)整個(gè)網(wǎng)頁(yè)呈現(xiàn)的大部分時(shí)間,這些東西下載完成后,本地的渲染和展現(xiàn)一般會(huì)很快,除非有很復(fù)雜的效果或腳本,而服務(wù)端執(zhí)行的快慢要看具體服務(wù)器的邏輯,優(yōu)化起來(lái)復(fù)雜度較高,往往站點(diǎn)本身還要訪問(wèn)后端的其它服務(wù)器,數(shù)據(jù)庫(kù)等。
解決這個(gè)首先有兩點(diǎn)可以入手,一是對(duì)頁(yè)面組件進(jìn)行壓縮,web用的圖片一般本身就是壓縮格式,所以壓縮空間不太大,還會(huì)額外占用服務(wù)器CPU,但腳本,樣式,HTML這些文本內(nèi)容用GZIP壓縮的壓縮比就非常大了,而且現(xiàn)在大多數(shù)瀏覽器都支持GZIP壓縮。另一方面是對(duì)腳本,樣式,圖片加Http Expire頭,加上這個(gè)過(guò)期頭,網(wǎng)站只需要第一次打開(kāi)時(shí)需要下載這些網(wǎng)頁(yè)組件,之后再打開(kāi)甚至連HTTP請(qǐng)求都不用發(fā)起,直接在本地加載了,當(dāng)然腳本和樣式服務(wù)端有可能以后還會(huì)變化,我們需要利用URL重寫(xiě)進(jìn)行腳本和樣式引用的自動(dòng)改名,以便在腳本和頁(yè)面更新后刷新利覽器緩存。
可喜的是要做到這兩點(diǎn),在IIS7里非常簡(jiǎn)單,首先說(shuō)壓縮,在win7里利用“打開(kāi)或關(guān)閉windows功能”里打開(kāi)IIS性能工具里的“動(dòng)態(tài)內(nèi)容壓縮”和“靜態(tài)內(nèi)容壓縮”,如圖1。
然后在IIS管理器里,選中要壓縮的網(wǎng)站,雙擊壓縮按鈕把動(dòng)態(tài)壓縮和靜態(tài)壓縮的勾加上就行了,默認(rèn)會(huì)對(duì)mimetype為text/*和application/x-javascript進(jìn)行壓縮,一般這就夠用了,但I(xiàn)IS7默認(rèn)對(duì).js文件使用application/x-javascript的mimetype,而默認(rèn)對(duì)application/x-javascript進(jìn)行的是動(dòng)態(tài)壓縮,動(dòng)態(tài)壓縮和靜態(tài)壓縮的區(qū)別就是不會(huì)被IIS的緩存機(jī)制緩存,每次訪問(wèn)都會(huì)去讀取文件或路由請(qǐng)求到后面的模塊,所以我們要把.js的mimetype改成application/javascript,如圖2
然后對(duì)application/x-javascript進(jìn)行動(dòng)態(tài)壓縮,對(duì)application/javascript進(jìn)行靜態(tài)壓縮,需要配置C:\Windows\System32\inetsrv\config\applicationHost.config,如下圖3
對(duì)頁(yè)面組件進(jìn)行了壓縮有已經(jīng)減少了不少網(wǎng)絡(luò)流量,提升了很大的性能,但是一些腳本和樣式一般情況下很少改變,每次訪問(wèn)網(wǎng)頁(yè)都要重新下載還是會(huì)消耗不少網(wǎng)絡(luò)流量,這就需要配置靜態(tài)文件的過(guò)期時(shí)間了。
IIS7的管理器里有個(gè)HTTP響應(yīng)標(biāo)頭的功能,一般網(wǎng)站的腳本、樣式和圖片分別放在scripts,styles,images目錄下,我們直接為這幾個(gè)目錄下的文件設(shè)置過(guò)期時(shí)間為100天就可以了,在IIS7的管理器里直接可以進(jìn)行操作,具體見(jiàn)參考鏈接,就不重復(fù)了,設(shè)置成功后會(huì)在這3個(gè)子目錄里分別生成一個(gè)web.config文件,并設(shè)置cacheControlMode=UseMaxAge,cacheControlMaxAge=100.00:00:00這樣設(shè)置以后優(yōu)化效果就很好了,第一次打開(kāi)網(wǎng)頁(yè)后,再次打開(kāi)網(wǎng)頁(yè)要比以前快好多倍,但是有一個(gè)問(wèn)題就是如果你的樣式或腳本修改后,如果客戶端不刷新頁(yè)面,就不會(huì)生效了。解決這個(gè)問(wèn)題利用URL Rewrite把樣式,腳本的引用路徑加一個(gè)時(shí)間戳,如果腳本改動(dòng)了后,時(shí)間戳就改動(dòng)了,引用的文件名就變了,瀏覽器就會(huì)下載新的樣式了,而新的樣式實(shí)際上經(jīng)過(guò)url rewrite后還是以前的名字,比如/scripts/base.201001111502.js實(shí)際上就是/scripts/base.js,具體操作見(jiàn)參考文章。
但文章里說(shuō)的是iis6.0用的是URLRewrite組件,在IIS7里有一個(gè)免費(fèi)的rewrite模塊,在微軟網(wǎng)站下載下來(lái)安裝上就行了,它的配置規(guī)則和URLRewrite不太一樣,最重要的區(qū)別就是對(duì)正則分組匹配不是用$1,$2引用,而是用{R:1}這種格式引用,還有就是目標(biāo)url的配置不需要正則轉(zhuǎn)義符,比如“。”就是“?!?,不需要是“\?!?,如果不注意這個(gè)就等著404吧,具體IIS7.5下的重寫(xiě)模塊使用和注意事項(xiàng)可看后面的參考鏈接,我這里的配置如下
代碼如下:
{{{
<rewrite>
<rules>
<rule name="static_file_auto_version">
<match url="^(scripts|styles|images)/(.*?)\.[0-9]+\.(css|js|gif|png|jpg)" />
<action type="Rewrite" url="{R:1}/{R:2}.{R:3}" />
</rule>
</rules>
</rewrite>
}}}
小節(jié)
進(jìn)行了這兩處優(yōu)化后,網(wǎng)站性能已經(jīng)提升了不少了,接下來(lái)再按照雅虎提供的優(yōu)化原則和page speed的提示看看還有哪些是可以比較簡(jiǎn)單而有效的進(jìn)行優(yōu)化的。(來(lái)源:蛙蛙池塘)聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com