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