優化網站加載速度的34條法則研究

1.MinimizeHTTPRequests減少HTTP請求圖片、css、script、flash等等這些都會增加http請求數，減少這些元素的數量就能減少響應時間。把多個JS、CSS在可能的情況下寫進一個文件，頁面里直接寫入圖片也是不好的做法，應該寫進CSS里，利用CSSsprites將小圖拼合后利用background來定位。2.UseaContentDeliveryNetwork利用CDN技術CDN確實是好東西，8過服務器提供商的這項服務一般是要收費的，我以前買的國內空間是有這個的但是我當時根本不知道啥用，現在沒了。。。3.AddanExpiresoraCache-ControlHeader設置頭文件過期或者靜態緩存瀏覽器會用緩存來減少http請求數來加快頁面加載的時間，如果頁面頭部加一個很長的過期時間，瀏覽器就會一直緩存頁面里的元素。不過這樣如果頁面里的東西變動的話就要改名字了，否則用戶端不會主動刷新，看自己衡量了~這項可以通過修改.htaccess文件來實現。4.GzipComponentsGzip壓縮Gzip格式是一種很普遍的壓縮技術，幾乎所有的瀏覽器都有解壓Gzip格式的能力，而且它可以壓縮的比例非常大，一般壓縮率為85%。壓縮沒壓縮，可以到這里做下測試。5.PutStylesheetsattheTop把CSS放頂部讓瀏覽者能盡早的看到網站的完整樣式。6.PutScriptsattheBottom把JS放底部網站呈現完畢后再進行功能設置，當然這些JS要在你的加載過程中不影響內容表現。7.AvoidCSSExpressions避免CSSExpressionsCSS表達式很可怕，這個只被IE支持的東西執行時候的運算量非常大，你移動一下鼠標它都要進行重計算的，但有時候為了做瀏覽器的兼容必須要用到這個|||IE6去死去死！~8.MakeJavaScriptandCSSExternal將JS和CSS外鏈前面講到了緩存這個事情，一些較為公用的JS和CSS，我們可以使用外鏈的形式，譬如我就是從Google外鏈來的Jquery文件，如果我的瀏覽者在瀏覽別的使用了這個外鏈文件的網站時已經下載并緩存了這個文件，那么他在瀏覽我的網站的時候就不需要再進行下載了！~9.ReduceDNSLookups減少DNS查找貌似是要減少網站從外部調用資源，我的Google分析和picasa的外鏈圖片都算在里面了。10.MinifyJavaScriptandCSS減小JS和CSS的體積寫JS和CSS都是有技巧的，用最少的代碼實現同樣的功能，減少空白，增強邏輯性，用縮寫方式等等，當然也有不少工具也能夠幫你實現這一點。11.AvoidRedirects避免重定向再寫入鏈接時，雖然””和”/”僅有一個最后的”/”只差，但是結果是不同的，服務器需要花時間把前者重定向為后者然后進行跳轉，這個要自己注意，也可以在Apache里用Alias或者mod_rewrite或者DirectorySlash解決。12.RemoveDuplicateScripts刪除重復腳本重復調用的代碼瀏覽器并不會識別忽略，而是會再次運算一遍，這當然是大大的浪費。13.ConfigureETags配置ETags搞不清楚咋回事，總之我是在.htaccess里把它刪除了。14.MakeAjaxCacheable緩存AjaxAjax是實時響應的，在瀏覽器接收到新的數據前，舊的數據被緩存，這樣能夠更好的提高效率。15.FlushtheBufferEarly盡早的釋放緩沖當用戶進行頁面請求時，服務器端需要花費200到500毫秒時間來拼合HTML，將寫在head與body之間，釋放緩沖，這樣可以將文件頭先發送出去，然后再發送文件內容，提高效率。16.UseGETforAJAXRequests用GET方式進行AJAX請求Get方法和服務器只有一次交互(發送數據)，而Post要兩次(發送頭部再發送數據)。17.Post-loadComponents延遲加載組件最先加載必須的組件進行頁面初始化，然后再加載其他，YUIImageLoader是很好的例子。18.Preloadcomponents預加載組件提前加載以后可能用到的東西，和延遲加載并不沖突，它的目的是為后續請求提供更快的響應，參見Google首頁上的CSSsprites應用。19.ReducetheNumberofDOMElements減少DOM元素數量復雜的頁面結構意味著更長的下載及響應時間，更合理更高效的使用標簽來架構頁面，是好的前端的必備條件。20.SplitComponentsAcrossDomains跨域分離組件頁面組件多個來源可以增大你的平行下載量，但注意不要過多，超過2-4個域名會引起上面說到的DNS查找浪費。21.MinimizetheNumberofiframes減少iframe數量需要更有效的利用ifames。iframe優點：有利于下載緩慢的廣告等第三方內容，安全沙箱，并行下載腳本iframe缺點：即使為空也會有較大資源消耗，會阻止頁面的onload，非語義22.No404s不要出現404頁面站點本身里(非搜索結果)出現404頁面，無意義的404頁面會影響用戶體驗并且會消耗服務器資源。23.ReduceCookieSize減小CookieCookie在服務器及瀏覽器之間的通過文件頭進行交換，盡可能減小Cookie體積，設置合理的過期時間，能夠很好的提高效率。24.UseCookie-freeDomainsforComponents對組件使用無Cookie的域名對靜態組件的Cookie讀取是一種浪費，使用另一個無Cookie的域名來存放你的靜態組件式一個好方法，或者也可以在Cookie中只存放帶www的域名。25.MinimizeDOMAccess減少DOM的訪問次數JS訪問DOM是很慢的，盡量不要用JS來設置頁面布局。26.DevelopSmartEventHandlers開發靈活的事件處理句柄DOM樹上過多的元素被加入事件句柄的話，反應效率肯定會低，YUI事件工具有一個onAvailable方法可以幫助你靈活的設置DOM事件句柄27.Choose<link>over@import使用<link>而非@import在IE中使用@import就和在頁面底部用<link>一樣，我們前面說要把<link>放頂部的。28.AvoidFilters避免過濾器的使用如果需要Alpha透明，不要使用AlphaImageLoader，它效率低下而且只對IE6及以下的版本適用，用PNG8圖片。如果你非要使用，加上_filter以免影響IE7+用戶。29.OptimizeImages優化圖片將你的GIF轉為PNG8會是個減小體積的好辦法，另外有很多方法處理你的JPG及PNG圖片以達到優化效果。30.OptimizeCSSSprites優化CSSSprites在CSSSprites中豎直并盡量緊湊的排列圖片，盡量將顏色相似的圖片排在一起，會減小圖片本身的大小及提高頁面圖片顯示速度。31.Don’tScaleImagesinHTML不要在HTML中縮放圖片圖片要用多大的就用多大的，1000X1000的圖片被width=”100″height=”100″以后，本身的KB數是不會減少的。32.Makefavicon.icoSmallandCacheable縮小favicon.ico的大小并緩存