雅虎前端優化原則（Yahoo）

1. 減小HTTP請求次數

爲了縮短用戶響應的時間

• css sprites方法能夠組合頁面中的圖片到單個文件中可以，並使用css的background-image和background-position屬性來實現所需的部分圖片
• Inline images使用data：URLschema在頁面中內嵌圖片，者將增大HTML文件的大小，組合inline images到用戶的（緩存）樣式表，既能減小HTML請求，又能避免加大HTML文件大小。
• Combine files 經過組合多個腳本文件到單一文件來減小http請求，樣式表也可採用相似的方法處理，這個方法雖然簡單，但當頁面之間腳本和樣式報表變化很大時，該方式將遇到很大的挑戰。若是作到的話，將能加快響應的時間

2.使用CDN（Content Delivery Network， 內容分發網絡）

用戶離web serve的遠近對響應時間也有很大的影響，從用戶角度上看，把內容部署到多個地理位置分散的服務器上，將有效提升頁面裝載速度
CDN是地理上分佈的web serve的集合，用戶更高效的發佈內容，一般基於網絡忘記來選擇給具體用戶服務的web serve

在Yahoo ，把靜態內容分佈到CDN減小了用戶影響時間20%或更多，切換到CDN的代碼修改工做是容易的，但能達到提升網站的速度

3.增長Expires Header

首次訪問網頁時，不得不面臨着屢次的http請求，但經過使用Expires header，能夠在客戶端緩存這些元素，者在後續訪問中避免了沒必要要的http請求，Expire header最經常使用於圖像文件，但它也可用於腳本文件、樣式表等
瀏覽器（和代理）使用緩存來減小http請求的次數和大小，使得網頁加速裝載，web server經過Expires header告訴客戶端一個元素能夠緩存的時間長度

4. 壓縮頁面元素

經過壓縮HTTP響應內容可減小頁面響應時間，從HTTP/1.1開始，web客戶端在HTTP請求中經過Accept-Encoding頭來代表支持的壓縮類型，如：Accept-Encoding: gzip,deflate。   若是Web server檢查到Accept-Encoding頭，它會使用客戶端支持的方法來壓縮HTTP響應，會設置Content-Encoding頭，如：Content-Encoding: gzip。   Gzip是目前最流行及有效的壓縮方法，其餘的方式如deflate，但它效果較差，也不夠流行。經過Gzip，內容通常可減小70%；若是是Apache，在1.3版本下需使用mod_gzip模塊，而在2.x版本下，則需使用mod_deflate。 Web server根據文件類型來決定是否壓縮，大部分網站對HTML文件進行壓縮，但對腳本文件和樣式表進行壓縮也是值得的，實際上，對包括XML和JSON在內的任務文本信息進行壓縮都是值得的，圖像文件和PDF文件不該該被壓縮，由於它們原本就是壓縮格式保存的，對它們進行壓縮，不但浪費CPU，並且還可能增長文件的大小。

5. 把樣式表放在頭上

有利於用戶體驗，提升界面的加載速度

HTML規範明確要求樣式表被定義在head中，所以，爲避免空白屏幕或閃爍問題，最好的辦法是遵循HTML規範，把樣式表放在head中

6. 把腳本文件放在底部

一是能順序顯示，二是可達到最大的並行下載。 瀏覽器會阻塞顯示知道樣式表下載完畢，所以須要把樣式表放在head中，而對於腳原本說，腳本後面內容的順序顯示將被阻塞，所以把腳本儘可能放在底部意味着更多內容能被快速顯示。 腳本引發的第二個問題是它阻塞並行下載數量，HTTP/1.1規範建議瀏覽器每一個主機的並行下載數不超過2個，所以若是把圖像文件分佈到多臺機器的話，能夠達到超過2個的並行下載，可是當腳本文件下載時，瀏覽器不會啓動其餘的並行下載，甚至其餘主機的下載也不啓動。 一個備選方法是使用延遲腳本（deferred script），DEFER屬性代表腳本未包含document.write，指示瀏覽器刻繼續顯示，不幸的是，Firefox不支持DEFER屬性，在IE中，腳本可能被延遲執行，但不必定獲得須要的長時間延遲。 從另外角度來講，若是腳本能被延遲執行，那它就能夠被放在底部了。

7. 避免css表達式

css表達式的問題是其執行次數超過大部分人的指望，不只頁面顯示和resize時計算表達式，並且當頁面滾屏，甚至當鼠標在頁面上移動時，都會從新計算表達式。 一種減小css表達式執行次數的方法是一次性表達式，即當第一次執行時就以明確的數值代替表達式，若是必須動態設置的話，可以使用時間處理函數代替，若是必須使用css表達式的話，請記住他們可能被執行上千次，從而影響頁面性能

8. 把JavaScript和css放到外部文件中

另一方面，使用外部文件，會被瀏覽器緩存，則頁面大小會減少，同時又不增長HTTP請求次數。   所以，通常來講，外部文件是更可行的方式，惟一的例外是內嵌方式對主頁更有效，如Yahoo!和My Yahoo!都使用內嵌方式，通常來講，在一個session中，主頁訪問此時較少，所以內嵌方式能夠取得更快的用戶響應時間

9. 減小DNS查詢次數

DNS用於映射主機名和IP地址，通常一次解析須要20～120毫秒，爲達到更高的性能，DNS解析一般被多級別地緩存，如由ISP或局域網維護的caching server，本地機器操做系統的緩存（如windows上的DNS Client Service），瀏覽器，IE的缺省DNS緩存時間爲30分鐘，Firefox的缺省緩衝時間是1分鐘。   減小主機名可減小DNS查詢的次數，但可能形成並行下載數的減小，避免DNS查詢可減小響應時間，而減小並行下載數可能增長響應時間，一個可行的折中是把內容分佈到至少2個，最多4個不一樣的主機名上。

10. 最小化JavaScript代碼

最小化JavaScript代碼指在JS代碼中刪除沒必要要的字符，從而下降下載時間，兩個流行的工具是#JSMin和YUI Compressor。   混淆是最小化於源碼的備選方式，象最小化同樣，它經過刪除註釋和空格來減小源碼大小，同時它還能夠對代碼進行混淆處理，做爲混淆的一部分，函數名和變量名被替換成短的字符串，這使得代碼更緊湊，同時也更難讀，使得難於被反向工程，Dojo Compressor (ShrinkSafe)是最多見的混淆工具。

11. 避免重定向

瀏覽器自動重定向請求到Location指定的URL上，重定向的主要問題是下降了用戶體驗。   一種最耗費資源、常常發生而很容易被忽視的重定向是URL的最後缺乏/，如訪問http://www.csxiaoyao.com/blog將被重定向到http://www.csxiaoyao.com/blog/，在Apache下，能夠經過Alias，mod_rewrite或DirectorySlash等方式來解決該問題。

12. 刪除重複的腳本文件

在一個頁面中包含重複的JS腳本文件會影響性能，即它會創建沒必要要的HTTP請求和額外的JS執行。   沒必要要的HTTP請求發生在IE下，而Firefox不會產生多餘的HTTP請求，額外的JS執行，無論在IE下，仍是在Firefox下，都會發生。   一個避免重複的腳本文件的方式是使用模板系統來創建腳本管理模塊，除了防止重複的腳本文件外，該模塊還能夠實現依賴性檢查和增長版本號到腳本文件名中，從而實現超長的過時時間。

13. 配置ETags

Etag（Entity tags）實體標籤，這個tag和你在網上常常看到的標籤雲那種tag有點區別，這個Etag不是給用戶用的，而是給瀏覽器緩存用的。   Etag是服務器告訴瀏覽器緩存，緩存中的內容是否已經發生變化的一種機制，經過Etag，瀏覽器就能夠知道如今的緩存中的內容是否是最新的，需不須要從新從服務器上從新下載，這和「Last-Modified」的概念有點相似，很遺憾做爲網頁開發人員對此無能爲力，他依然是網站服務器人員的工做範疇。   ETags是用於肯定瀏覽器緩存中元素是否與Web server中的元素相匹配的機制，它是比last-modified date更靈活的元素驗證機制。

14. 緩存Ajax

提升Ajax的性能最重要的方式是是的其response可緩存