著第3屆bt論壇的順利結(jié)束的秋風,我也來分享一下自己在前端優(yōu)化方面的一些些小經(jīng)驗,其實這些經(jīng)驗本身都是來自yahoo的優(yōu)化原則,不過經(jīng)過ahuaxuan自身的實踐和再次的思考,把原來的原則都進行了分組和分析.不過由于ahuaxuan bt涉及到的東西有限,并沒有經(jīng)歷過全部的優(yōu)化點,所以只把自己做過的拿出來和大家討論討論,其中不免加入自己一些觀點,希望大家指正.
先說說目標,前端優(yōu)化的目標是什么,一個字:快.兩個字:更快.那么下面我們來看看慢的網(wǎng)頁將會給我們帶來什么:
1. 慢的頁面可能會網(wǎng)站失去更多的用戶.
2. 慢500ms意味著20%的用戶將放棄訪問(google)
3. 慢100ms意味著1%的用戶將放棄交易(amazon)
4. 慢 ???ms意味著??%的用戶將放棄xx(your site)
所以我們的目標很明確,就是要網(wǎng)頁展現(xiàn)的速度更快.
經(jīng)過ahuaxuan的實踐和總結(jié),其實要讓網(wǎng)頁展現(xiàn)更快只需要注意幾個大的方面,下面會一一描述這幾個大的方面.
[size=medium]1減少http請求,我把它排在了第一點,為啥要在第一點呢,很簡單,因為它最重要.
如何做呢.讓ahuaxuan帶著大家分析一下這個問題.從何處著手呢.ahuaxuan大聲疾呼,我們要從數(shù)據(jù)開始.ok,一般來說,我們從變化性上把數(shù)據(jù)分成兩種類型,變和不變.那么不變的數(shù)據(jù)可以緩存,變化的數(shù)據(jù)不能緩存,這是一個常識,也就是說要減少我們的http請求次數(shù)這個目標可以轉(zhuǎn)換成把數(shù)據(jù)分為變化和不變化兩個部分.不變化的數(shù)據(jù)不需要再次請求,這樣http請求的次數(shù)就減少了,下面我們分點來描述將數(shù)據(jù)分類的途徑.
1. 合并腳本文件
包括腳本,樣式和圖片,可以有選擇的把一些Js和css可以合并成一個文件,一些圖片可以使用css sprites技術(shù).這樣做的原因是什么?做過web開發(fā)的人都知道,js和css基本是不變的,是靜態(tài)文件,圖片亦然.那么不變的文件如果適當?shù)暮喜⒃谝黄?會有什么效果呢?請求的次數(shù)從多次變成了一次.這樣http請求的次數(shù)就減少了.當時合并之后,文件體積變大了,會影響速度嗎?答:肯定會啊,不過這里是需要權(quán)衡的,比如我100份靜態(tài)文件,合并成10份還是合并成1份這就得看你得具體情況了.
2. 指定Expires或者Cache-Control,
對于靜態(tài)內(nèi)容：設(shè)置文件頭過期時間Expires的值為“Never expire”（永不過期）
動態(tài)頁面,在代碼中添加cache-control,表示多少時間之后過期,如:
response.setHeader("Cache-Control", "max-age=3600");
如果使用了Expires文件頭，當頁面內(nèi)容改變時就必須改變內(nèi)容的文件名。通常是在文件內(nèi)容后加版本號
這一點是大多數(shù)人都忽略得,之前很多人在壇子上發(fā)布自己得小系統(tǒng),還有demo,ahuaxuan跑過去一看,my god,一堆又一堆得js,css,既沒有恰當?shù)煤喜?也沒有設(shè)置過期時間.每次刷新頁面都要重新下載這一堆又一堆的js,css.http請求那叫一個多啊.無謂了流量就這樣產(chǎn)生了.
這一點在企業(yè)應用的系統(tǒng)中也時有發(fā)生.比如我們使用extjs作為前端的技術(shù),400多k啊,每打開一個頁面都導入,下載這個js,夠無聊的.那么童子們可能就要問了,靜態(tài)文件為啥不用apache,lighttpd等呢,答,用了又怎么樣,不設(shè)expire或者max-age不是一樣要下載,最好的方法是寫一個filter,再filter中判斷,如果url滿足一定的條件(比如符合配置文件中的正則表達式),那么就設(shè)置一個max-age,這樣就ok,太簡單了,幾行代碼就可以搞定.快哉.
3. 緩存Ajax請求
緩存的方法同動態(tài)頁面,ajax請求需要使用get方式,url長度為2k(ie)限制(post請求有兩個過程,1發(fā)送請求headers,2發(fā)送請求數(shù)據(jù),根據(jù)http規(guī)范,get請求只會發(fā)送一個tcp包).--------這一段話來自yahoo,先不管其真假,我們從另外一個方面來考慮一下為什么最好使用get方式,講一個ahuaxuan經(jīng)歷過的事情,之前有一個項目的ajax請求使用了post方式,后來發(fā)現(xiàn)經(jīng)常出錯,而且拋出了squid的錯誤,因為我們的網(wǎng)站使用了squid,問題就出在這里了,從http協(xié)議上可以了解到,method=post是指把數(shù)據(jù)提交到服務(wù)器上去,那么squid的一個特性是不會緩存post請求(事實上它確實不應該緩存,因為這樣會違反http協(xié)議中的語義),把ajax請求改成get方式之后,一切恢復如常.
4. 移除重復的js
重復的js導入也有可能導致ie重新加載該腳本.沒啥好說的,照做.
5. 避免重定向
有一種經(jīng)常被網(wǎng)頁開發(fā)者忽略卻往往十分浪費響應時間的跳轉(zhuǎn)現(xiàn)象。這種現(xiàn)象發(fā)生在當URL本該有斜杠（/）卻被忽略掉時。這時候會返回一個301的狀態(tài)碼,然后瀏覽器重新發(fā)起一次請求.在企業(yè)應用里,重定向是我們在企業(yè)應用中常用的技術(shù),不過用在網(wǎng)站項目上,您可要小心了,因為普通的重定向其實是server在response header中設(shè)置http status=302,瀏覽器收到之后,判斷出是302,會重新發(fā)送一個請求,目標地址是前一次返回中指定的地址.在網(wǎng)站項目中如果可以不用重定向就別用吧.如果您做企業(yè)應用項目,ok,關(guān)系不大,您就放心的”定”吧.
小節(jié),ahuaxuan把減少http請求次數(shù)分為了以上5個小點,每個小點之后附加一些實例,大家可以根據(jù)這些點來判斷自己的項目是否可以有優(yōu)化的地方.
使用cdn
讓內(nèi)容更靠近用戶,這有啥好說呢,原理很簡單,就是根據(jù)用戶瀏覽器所在機器的ip來判斷哪些服務(wù)器離用戶最近,瀏覽器會再次去請求這些最近的機器.一般的cdn服務(wù)商是通過開發(fā)自己的dns server來達到這個目的的.不過這個是通常情況哦,技術(shù)實力比較高,或者場景比較特殊的公司會開發(fā)自己的cdn.當然不管怎么說,使用cdn肯定可以使頁面響應更快(也包括音頻,視頻,圖片,文本文件,等等等等)
減小返回數(shù)據(jù)的體積
1. 使用gzip壓縮返回數(shù)據(jù)
Gzip壓縮所有可能的文件類型是減少文件體積增加用戶體驗的簡單方法。比如本來400k的文件,壓縮一下之后只有50k-100k,那么網(wǎng)絡(luò)的流量就立刻下來了,壓縮的代價是服務(wù)器端要壓縮文件,需要消耗cpu,瀏覽器需要解壓文件,也需要消耗cpu,不過對于現(xiàn)代這么nb的pc,來說,瀏覽器解壓一下數(shù)據(jù)帶來的cpu消耗簡直不值一提.所以您就壓吧.不過壓的時候要小心哦,有的瀏覽器在特定場景下會出去一些小bug,導致頁面不正常.比如ie6在跨域的時候可能會有些小麻煩,把這部分數(shù)據(jù)的gzip去掉就可以了.
2. 最小化js文件和css文件
壓縮js可以使用JSMin或者YUI Compressor,后者同時可以壓縮css,這個也沒啥好說的,照做吧.
3. 將css和js獨立成外部文件
其實這一點也可以看成是區(qū)分不變數(shù)據(jù)和變化數(shù)據(jù).很多人喜歡在頁面商寫很多很多的js和css,這些數(shù)據(jù)其實都是不會變化的數(shù)據(jù),也就是說這些數(shù)據(jù)也是可以緩存在瀏覽器上的,通過把它們獨立成外部文件,可以把這些數(shù)據(jù)緩存起來.這樣做看上去是增加的請求的次數(shù),但是由于第一次請求之后該部分數(shù)據(jù)已經(jīng)被緩存,所以第二次就無需再請求后端,減少了網(wǎng)絡(luò)帶寬的開銷.
優(yōu)化Cookie
1. 減小cookie體積
能不放就別放吧,為啥呀,cookie就象鑰匙串,只有出門和回家得時候才用,但是一整天你都要帶在身上,麻煩不.
2. 合理設(shè)置Cookie域
由于二級域名可以拿到一級域名得cookie,那么如果,而二級域名之間確不能相互共享cookie,所以合理得設(shè)置cookie得域名也可以避免無必要得帶寬浪費和響應速度得增加.
3. 設(shè)置合理的cookie過期時間
該過期就過期,不要讓不必要的數(shù)據(jù)一直帶在身上走來走去.
4. 使用域分離
為圖片或者其他靜態(tài)資源文件使用子域或者建立新的獨立域名(申請新的域名),避免無必要的cookie傳輸,當然也是要在有必要得情況下,圖片類網(wǎng)站肯定有必要,javaeye上得圖片并沒有使用域分離,所以我們得cookie其實會帶到壇子得圖片服務(wù)器上去,每次請求圖片都是如此(不過還好,壇子里沒有什么圖片,所以這方面的浪費不大).
小結(jié),其實cookie上得問題,單詞請求看上去也不是什么大問題,好像是無所謂得事情,就那么幾十個byte,至于嗎,不過大家都聽說過水滴石穿,繩鋸木斷的故事.所以該做的,我們還是要做,正所謂,勿以善小而不為,勿以惡小而為之.
優(yōu)化瀏覽器加載
1. 將css放在頁面頂部加載
把樣式表放在文檔底部的問題是在包括Internet Explorer在內(nèi)的很多瀏覽器中這會中止內(nèi)容的有序呈現(xiàn)。瀏覽器中止呈現(xiàn)是為了避免樣式改變引起的頁面元素重繪。用戶不得不面對一個空白頁面。
HTML規(guī)范清 楚指出樣式表要放包含在頁面的<head />區(qū)域內(nèi)：“和<a />不同，<link />只能出現(xiàn)在文檔的<head />區(qū)域內(nèi)，盡管它可以多次使用它”。無論是引起白屏還是出現(xiàn)沒有樣式化的內(nèi)容都不值得去嘗試。最好的方案就是按照HTML規(guī)范在文 檔<head />內(nèi)加載你的樣式表。
2. 將js放在頁面底部加載
腳本帶來的問題就是它阻止了頁面的平行下載。HTTP/1.1 規(guī)范建議，瀏覽器每個主機名的并行下載內(nèi)容不超過兩個。如果你的圖片放在多個主機名上，你可以在每個并行下載中同時下載2個以上的文件。但是當下載腳本時，瀏覽器就不會同時下載其它文件了，即便是主機名不相同。
Js放在底部加載其實并不影響瀏覽器展示頁面,除非用戶會在js加載完成之前就調(diào)用某個js方法,比如說頁面剛展現(xiàn)到一半,但是恰好這一半里有一部分是調(diào)用了還未下載的js,這個時候就會出問題了,如果童子們遇到這種情況,可以把這部分js先加載.
總結(jié)一下下:以上這些優(yōu)化點其實只是前端優(yōu)化的部分內(nèi)容,不過根據(jù)80/20原則,這些優(yōu)化點已經(jīng)覆蓋了80%的情況了,同時前端優(yōu)化其實也不是什么復雜的東西,原理上是很簡單的,更多的是需要我們的實踐,因為我們可能會碰到各種各樣的問題,而很多的這些問題其實一般是預測不到的.只有遇到過才知道.
說的不對的地方請大家拍磚,或者童子們也可以把自己的經(jīng)驗在這里和大家分享一下.代表其他童子表示十分的感謝.
當然,由于ahuaxuan水平有限,文章中難免有不到之處,還望不吝指正,謝謝.