本帖最後由 dxszzcylm 於 2010-1-19 16:53 編輯 7 E( J; U: E, t
. G+ K1 e7 x. m) y' B
雅虎給出了優化網站加載速度的34條法則（包括Yslow規則22條） 詳細說明，文章轉載於網絡。
; A' V/ `$ \! d# `1 ^' H1 p% p: T3 j8 k2 \; Y
1.Minimize HTTP Requests 減少HTTP請求
t0 r- |: s, R5 K 圖片、css、script、flash等等這些都會增加http請求數，減少這些元素的數量就能減少響應時間。把多個JS、CSS在可能的情況下寫進一個文件，頁面裡直接寫入圖片也是不好的做法，應該寫進CSS裡，利用 CSS sprites 將小圖拼合後利用background來定位。- y; I; N% |& X, M
5 J- B$ ^+ d+ v, F+ L4 z. c& d2 K
2.Use a Content Delivery Network 利用CDN技術
# Y4 w! t% x; M6 f CDN 確實是好東西，8過服務器提供商的這項服務一般是要收費的，我以前買的國內空間是有這個的但是我當時根本不知道啥用，現在沒了。。。' @4 {3 R* M/ E7 B* L4 b
5 T B. V* a- i' o
3.Add an Expires or a Cache-Control Header 設置頭文件過期或者靜態緩存
& k4 C4 I9 N X d 瀏覽器會用緩存來減少http請求數來加快頁面加載的時間，如果頁面頭部加一個很長的過期時間，瀏覽器就會一直緩存頁面裡的元素。不過這樣如果頁面裡的東西變動的話就要改名字了，否則用戶端不會主動玩攏?醋約漢飭苛藒 這項可以通過修改.htaccess文件來實現。
?5 Q9 [1 M7 \- {
: H k0 }0 a6 T3 R; e. P" Y$ @ 4.Gzip Components Gzip壓縮# C4 z7 |2 ]2 ]
Gzip格式是一種很普遍的壓縮技術，幾乎所有的瀏覽器都有解壓Gzip格式的能力，而且它可以壓縮的比例非常大，一般壓縮率為85%。壓縮沒壓縮，可以到 這裡 做下測試。
2 Q$ n- P" J& O6 {+ [2 d, {1 {4 q- O% K8 t
5.Put Stylesheets at the Top 把CSS放頂部8 j7 | H* x2 V( l* I
讓瀏覽者能盡早的看到網站的完整樣式。
. A! ~7 N0 Y7 @
# c1 Z3 L# Z8 l 6.Put Scripts at the Bottom 把JS放底部
- H1 l- M4 X0 [. M" t* e4 W 網站呈現完畢後再進行功能設置，當然這些JS要在你的加載過程中不影響內容表現。
+ {, z" c3 o+ Y: J3 `) @9 M; V3 A
) @. O3 @/ @8 c. Y' X2 u6 O ~6 W 7.Avoid CSS Expressions 避免CSS Expressions$ X& u1 V: m: l$ G- g" i
CSS表達式很可怕，這個只被IE支持的東西執行時候的運算量非常大，你移動一下鼠標它都要進行重計算的，但有時候為了做瀏覽器的兼容必須要用到這個||| IE6去死去死！~
' M7 z4 `( R- h3 ~8 g: ~9 k/ m: \* F) T, x
8.Make JavaScript and CSS External 將JS和CSS外鏈1 y- I6 x; Q" s9 e3 T2 U
前面講到了緩存這個事情，一些較為公用的JS和CSS，我們可以使用外鏈的形式，譬如我就是從Google外鏈來的Jquery文件，如果我的瀏覽者在瀏覽別的使用了這個外鏈文件的網站時已經下載並緩存了這個文件，那麼他在瀏覽我的網站的時候就不需要再進行下載了！~$ c# @, L! B9 a3 I
% Q% X+ M R! G2 h; r 9.Reduce DNS Lookups 減少DNS查找; e- c; ^# w# L
貌似是要減少網站從外部調用資源，我的Google分析和picasa的外鏈圖片都算在裡面了。
7 R" e$ ]7 X1 K( q% Z- S
Q8 t3 b! @1 Y: Z1 J P% Z! t 10.Minify JavaScript and CSS 減小JS和CSS的體積/ N9 I2 ?+ ?4 D" i% ^' q% y
寫JS和CSS都是有技巧的，用最少的代碼實現同樣的功能，減少空白，增強邏輯性，用縮寫方式等等，當然也有不少工具也能夠幫你實現這一點。
# L5 q" Y) G+ I% `9 t( z1 K* {. y( }2 L1 H5 @4 b6 t! B" }
11. Avoid Redirects 避免重定向+ p6 S" c, A1 R4 V8 D
再寫入鏈接時，雖然」http://www. hostjie. com」和」http://www. hostjie. com/」 僅有一個最後的」/」只差，但是結果是不同的，服務器需要花時間把前者重定向為後者然後進行跳轉，這個要自己注意，也可以在Apache裡用Alias 或者mod_rewrite或者DirectorySlash解決。8 s6 Q0 `( X ^- |. p- ~
$ t$ {, J8 D7 P/ M. x 12. Remove Duplicate Scripts 刪除重複腳本
2 W4 E2 ], V7 N, O: h1 {2 m 重複調用的代碼瀏覽器並不會識別忽略，而是會再次運算一遍，這當然是大大的浪費。
6 R. z0 ?0 l, F. ^, [
4 C+ D; w4 u* A* q1 w( M 13. Configure ETags 配置ETags
4 ?: D- h) g P 搞不清楚咋回事，總之我是在. htaccess裡把它刪除了。& e0 _1 d+ J/ R
1 Z3 V1 y/ Z8 i# K$ J- T. w
14. Make Ajax Cacheable 緩存Ajax
$ |0 n, g2 y6 B6 }% Y5 H% T* m& b Ajax是實時響應的，在瀏覽器接收到新的數據前，舊的數據被緩存，這樣能夠更好的提高效率。
3 l n* N. E/ p0 t/ B3 ?/ S) U2 H1 z; a$ X* B8 X( l3 o0 w
15. Flush the Buffer Early 盡早的釋放緩衝
& h0 u7 r* Y% H6 ]: R8 C( c 當用戶進行頁面請求時，服務器端需要花費200到500毫秒時間來拼合HTML，將寫在head與body之間，釋放緩衝，這樣可以將文件頭先發送出去，然後再發送文件內容，提高效率。1 C9 X4 d) j1 B1 r
# O" e0 r$ E; B/ U 16. Use GET for AJAX Requests 用GET方式進行AJAX請求& h& X: b7 F `4 |7 ^, ^
Get 方法和服務器只有一次交互（發送數據），而 Post 要兩次（發送頭部再發送數據）。
; z3 p' g1 p' a4 {: _6 G. U5 j5 Z/ Y7 O$ d
17. Post-load Components 延遲加載組件3 s1 m' J, d+ f L. y5 c/ ?
最先加載必須的組件進行頁面初始化，然後再加載其他，YUI Image Loader 是很好的例子。! ^8 \) B1 T h$ M$ e9 ^
5 w* V/ m4 A2 R. _
18. Preload components 預加載組件5 r- v) L; T* Q- i1 ~. p+ Y
提前加載以後可能用到的東西，和延遲加載並不衝突，它的目的是為後續請求提供更快的響應，參見Google首頁上的CSS sprites應用。 K S2 q7 f; }* K' f% ~
8 _3 s* I6 r2 A# u" j$ m 19. Reduce the Number of DOM Elements 減少DOM元素數量8 N/ T7 F( s% S' |, V2 [
複雜的頁面結構意味著更長的下載及響應時間，更合理更高效的使用標籤來架構頁面，是好的前端的必備條件。
2 _; g" O% \# n% [' g& T9 q) J5 V& O( `
20. Split Components Across Domains 跨域分離組件
0 `4 R$ E. u; m 頁面組件多個來源可以增大你的平行下載量，但注意不要過多，超過2-4個域名會引起上面說到的DNS查找浪費。9 A& Z1 ^% g0 J- F$ y3 [
' }3 U# h6 `+ P& t 21. Minimize the Number of iframes 減少iframe數量
+ \$ n+ i' y* C2 V 需要更有效的利用 ifames。7 {0 A2 }; Z8 T( F. u
iframe 優點：有利於下載緩慢的廣告等第三方內容，安全沙箱，並行下載腳本" k: ?* B* x2 s2 l
iframe 缺點：即使為空也會有較大資源消耗，會阻止頁面的onload，非語義
9 A5 |* F2 G3 K( D. |7 [! Y5 X4 H2 `
22. No 404s 不要出現404頁面5 s$ A! ?$ \9 i. f; b# r
站點本身裡（非搜索結果）出現404頁面，無意義的404頁面會影響用戶體驗並且會消耗服務器資源。
. G" k$ P8 o' |7 p8 f$ j; T3 g& q" D. n5 Q3 B
23. Reduce Cookie Size 減小Cookie4 O7 R5 d5 v2 M- E4 z5 ?6 I
Cookie在服務器及瀏覽器之間的通過文件頭進行交換，盡可能減小Cookie體積，設置合理的過期時間，能夠很好的提高效率。
( H* R# [2 @0 B& g$ G9 s# Q( U% E7 ?
24. Use Cookie-free Domains for Components 對組件使用無Cookie的域名# _" I# B$ u5 ]; L+ C5 F; t! t9 E
對靜態組件的Cookie讀取是一種浪費，使用另一個無Cookie的域名來存放你的靜態組件式一個好方法，或者也可以在Cookie中只存放帶www的域名。* p: I; t* U% k% n Q
' z: i+ x: F) Q# @3 i; x! G 25. Minimize DOM Access 減少DOM的訪問次數1 r% H+ z4 f* A# e! ?' Q0 r
JS訪問DOM是很慢的，盡量不要用JS來設置頁面佈局。
; b* V/ `( y4 O* h3 ]
$ V* U* ~1 J) I+ }3 D. `/ F4 f/ E$ y 26. Develop Smart Event Handlers 開發靈活的事件處理句柄3 X2 ^ n" [% U7 i) _
DOM樹上過多的元素被加入事件句柄的話，反應效率肯定會低，YUI事件工具有一個 onAvailable 方法可以幫助你靈活的設置DOM事件句柄$ |. f# D1 J+ h3 l) M1 r
: n2 l- P0 W0 e5 u 27. Choose < link >over @import 使用< link >而非 @import
2 K4 K0 W8 ]+ _7 A! ^ 在IE中使用@import就和在頁面底部用< link >一樣，我們前面說要把< link >放頂部的。
% s2 \+ w [, w& N1 J
; T7 m, i+ f4 \2 C/ I5 F8 y: W 28. Avoid Filters 避免過濾器的使用* d6 E6 s4 S5 t! J
如果需要Alpha透明，不要使用AlphaImageLoader，它效率低下而且只對IE6及以下的版本適用，用PNG8圖片。如果你非要使用，加上_filter以免影響IE7+用戶。
' v1 R( J! n' k5 l! W$ B3 X' g! U6 x. j9 N0 {: W1 X8 C/ I
29. Optimize Images 優化圖片5 W- Q) ^/ }' m v: m
將你的GIF轉為PNG8會是個減小體積的好辦法，另外有很多方法處理你的JPG及PNG圖片以達到優化效果。, ?6 Y! t; s" Q
5 v( w/ \& V/ P g! W
30. Optimize CSS Sprites 優化CSS Sprites8 J L8 y5 p, Q" h) m s- V
在CSS Sprites中豎直並盡量緊湊的排列圖片，盡量將顏色相似的圖片排在一起，會減小圖片本身的大小及提高頁面圖片顯示速度。
! s6 K0 i0 B& @3 ]( a/ g5 {( z" N" k& D& e/ C V
31. Don』t Scale Images in HTML 不要在HTML中縮放圖片' _% _! @/ r& u
圖片要用多大的就用多大的，1000X1000的圖片被width=」100〞 height=」100〞以後，本身的KB數是不會減少的。
, U. t, K" O& A c% p4 k
! j; e, v8 H- H/ Y 32. Make favicon. ico Small and Cacheable 縮小favicon. ico的大小並緩存它
}2 i( B2 Q6 S! e 站點的瀏覽器ICO應該不是經常換吧，那就長時間的緩存它，並且最好控制在1K以下。: c( Z, _* B1 g& r0 H
) A3 h. G+ m8 s, ^% i 33. Keep Components under 25K 保證組件在25K以下
3 s( k1 L& _: y$ c iPhone不能緩存25K以上的組件，並且這還是要在被壓縮前。, e/ { \! f: h- U7 Y P. o5 J I
: X; j: {0 u l, G1 W( {
34. Pack Components into a Multipart Document 將組件打包進一個多部分的文檔中0 E( ~: A1 u8 t1 ^1 Z+ s" O
就好像在郵件中加入附件一樣，一個HTTP請求就夠了，但是這一技術需要確保你的代理支持，iPhone就不支持。 |
|
發表於 2010-1-19 16:51:11
提升卡
沉默卡
变色卡