一、前端優(yōu)化
網(wǎng)站性能優(yōu)化是一個很綜合的話題,涉及到服務(wù)器的配置和網(wǎng)站前后端程序等各個方面,我只是從實際經(jīng)歷出發(fā),分享一下自己所嘗試過的網(wǎng)站性能優(yōu)化方法。之所以在標(biāo)題上掛一個web2.0,是因為本文更偏重于中小網(wǎng)站的性能優(yōu)化,我所使用的系統(tǒng)也是典型web2.0的LAMP架構(gòu)。
首先講講前端的優(yōu)化,用戶訪問網(wǎng)頁的等待時間,有80%是發(fā)生在瀏覽器前端,特別是頁面和頁面中各種元素(圖片、CSS、Javascript、 flash…)的下載之上。因此在很多情況下,相對于把大量的時間花在艱苦而繁雜的程序改進上,前端的優(yōu)化往往能起到事半功倍的作用。雅虎最近將內(nèi)部使用的性能測試工具yslow向第三方公開,并發(fā)布了著名的網(wǎng)站性能優(yōu)化的十三條規(guī)則,建議你下載并安裝yslow,并作為測評網(wǎng)站優(yōu)化效果的工具。下面我挑其中特別有價值的具體說明一下優(yōu)化的方法:
對于第一次訪問您網(wǎng)站,尚未在瀏覽器cache中緩存您網(wǎng)站內(nèi)容的用戶,我們可以做的事情包括:
1)減少一個頁面訪問所產(chǎn)生的http連接次數(shù)
對于第一次訪問你網(wǎng)站的用戶,頁面所產(chǎn)生的http連接次數(shù)是影響性能的一個關(guān)鍵瓶頸。
對策:
- 盡量簡潔的頁面設(shè)計,大程度減少圖片的使用,通過放棄一些不必要的頁面特效來減少javascript的使用。
- 使用一些優(yōu)化技巧,比如利用圖片的背景位移減少圖片的個數(shù);image map技術(shù);使用Inline images將css圖片捆綁到網(wǎng)頁中。
- 盡量合并js和css文件,減少獨立文件個數(shù)。
2) 使用gzip壓縮網(wǎng)頁內(nèi)容
使用gzip來壓縮網(wǎng)頁中的靜態(tài)內(nèi)容,能夠顯著減少用戶訪問網(wǎng)頁時的等待時間(據(jù)說可達到60%)。主流的web服務(wù)器都支持或提供gzip壓縮,如果使用apache服務(wù)器,只需要在配置文件中開啟 mod_gzip(apache1.x)或mod_deflate(apache2.x)即可。凡是靜態(tài)的頁面,使用gzip壓縮都能夠顯著提高服務(wù)器效率并減少帶寬支出,注意圖片內(nèi)容本身已經(jīng)是壓縮格式了,務(wù)必不要再進行壓縮。
3)將CSS放在頁面頂端,JS文件放在頁面底端
CSS的引用要放在html的頭部header中,JS文件引用盡量放在頁面底端標(biāo)簽的后面,主要的思路是讓核心的頁面內(nèi)容盡早顯示出來。不過要注意,一些大量使用js的頁面,可能有一些js文件放在底端會引起一些難以預(yù)料的問題,根據(jù)實際情況適當(dāng)運用即可。
4)使JS文件內(nèi)容最小化
具體來說就是使用一些javascript壓縮工具對js腳本進行壓縮,去除其中的空白字符、注釋,最小化變量名等。在使用gzip壓縮的基礎(chǔ)上,對js內(nèi)容的壓縮能夠?qū)⑿阅茉偬岣?%。
5)盡量減少外部腳本的使用,減少DNS查詢時間
不要在網(wǎng)頁中引用太多的外部腳本,首先,一次dns的解析過程會消耗20-120毫秒的時間;其次,如果在頁面中引用太多的外部文件(如各種廣告、聯(lián)盟等代碼),可能會因為外部文件的響應(yīng)速度而將你的網(wǎng)站拖得很慢。如果不得不用,那么就盡量將這些腳本放在頁腳吧。不過有一點需要提及,就是瀏覽器一般只能并行處理同一域名下的兩個請求,而對于不同子的域名則不受此限制,因此適當(dāng)將本站靜態(tài)內(nèi)容(css,js)放在其他的子域名下(如 static.xxx.com)會有利于提高瀏覽器并行下載網(wǎng)頁內(nèi)容的能力。
對于您網(wǎng)站的經(jīng)常性訪問用戶,主要的優(yōu)化思路就是大限度利用用戶瀏覽器的cache來減少服務(wù)器的開銷。
1)在header中添加過期時間(Expires Header)
在header中給靜態(tài)內(nèi)容添加一個較長的過期時間,這樣可以使用戶今后訪問只讀取緩存中的文件,而不會與服務(wù)器產(chǎn)生任何的交互。不過這樣做也存在一些問題,當(dāng)圖片、CSS和js文件更新時,用戶如果不刷新瀏覽器,就無法獲得此更新。這樣,我們在對圖片、css和js文件修改時,必須要進行重命名,才能保證用戶訪問到最新的內(nèi)容。這可能會給開發(fā)造成不小的麻煩,因為這些文件可能被站點中的許多文件所引用。flickr提出的解決辦法是通過url rewrite使不同版本號的URL事實上指向同一個文件,這是一個聰明的辦法,因為url級別的操作效率是很高的,可以給開發(fā)過程提供不少便利。
要理解為什么這樣做,必須要了解瀏覽器訪問url時的工作機制:
a. 第一次訪問url時,用戶從服務(wù)器段獲取頁面內(nèi)容,并把相關(guān)的文件(images,css,js…)放在高速緩存中,也會把文件頭中的expired time,last modified, ETags等相關(guān)信息也一同保留下來。
b. 用戶重復(fù)訪問url時,瀏覽器首先看高速緩存中是否有本站同名的文件,如果有,則檢查文件的過期時間;如果尚未過期,則直接從緩存中讀取文件,不再訪問服務(wù)器。
c. 如果緩存中文件的過期時間不存在或已超出,則瀏覽器會訪問服務(wù)器獲取文件的頭信息,檢查last modifed和ETags等信息,如果發(fā)現(xiàn)本地緩存中的文件在上次訪問后沒被修改,則使用本地緩存中的文件;如果修改過,則從服務(wù)器上獲取最新版本。
我的經(jīng)驗,如果可能,盡量遵循此原則給靜態(tài)文件添加過期時間,這樣可以大幅度減少用戶對服務(wù)器資源的重復(fù)訪問。
2)將css和js文件放在獨立外部文件中引用
將css和js文件放在獨立文件中,這樣它們會被單獨緩存起來,在訪問其他頁面時可以從瀏覽器的高速緩存中直接讀取。一些網(wǎng)站的首頁可能是例外的,這些首頁的自身瀏覽可能并不大,但卻是用戶訪問網(wǎng)站的第一印象以及導(dǎo)向到其他頁面的起點,也可能這些頁面本身使用了大量的ajax局部刷新及技術(shù),這時可以將 css和js文件直接寫在頁面中。
3)去掉重復(fù)的腳本
在IE中,包含重復(fù)的js腳本會導(dǎo)致瀏覽器的緩存不被使用,仔細檢查一下你的程序,去掉重復(fù)引用的腳本應(yīng)該不是一件很難的事情。
4)避免重定向的發(fā)生
除了在header中人為的重定向之外,網(wǎng)頁重定向常在不經(jīng)意間發(fā)生,被重定向的內(nèi)容將不會使用瀏覽器的緩存。比如用戶在訪問,服務(wù)器會通過301轉(zhuǎn)向到/,在后面加了一個“/”。如果服務(wù)器的配置不好,這也會給服務(wù)器帶來額外的負擔(dān)。通過配置apache的 alias或使用mod_rewrite模塊等方法,可以避免不必要的重定向。
本文名稱:網(wǎng)站性能怎么優(yōu)化?
網(wǎng)站URL:http://www.rwnh.cn/news/108987.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供微信小程序、網(wǎng)站維護、網(wǎng)站收錄、外貿(mào)建站、網(wǎng)站建設(shè)、自適應(yīng)網(wǎng)站
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源:
創(chuàng)新互聯(lián)