網頁優化相關筆記一

Yahoo WEB優化14條法則

減小HTTP請求次數是性能優化的起點。這最提升首次訪問的效率起到很重要的做用。

減小HTTP請求次數

Image maps組合多個圖片到一張圖片中。總文件大小變化不大，但減小了HTTP請求次數從而加快了頁面顯示速度。該方式只適合圖片連續的狀況；同時座標的定義是煩人又容易出錯的工做。

CSS Sprites是更好的方法。它能夠組合頁面中的圖片到單個文件中，並使用CSS的background-image和background-position屬性來現實所需的部分圖片。

Inline images使用data: URL scheme來在頁面中內嵌圖片。這將增大HTML文件的大小。組合inline images到你的（緩存）樣式表是既能較少HTTP請求，又能避免加大HTML文件大小的方法。

優勢： 　　①. 減小資源請求連接數。 　
缺點： 　　①. 不會被瀏覽器緩存起來； 　　②. 移動端性能比http URI scheme低。

　　　　　　　　　　　　　　　　　　　　　　　　　
　可經過在css文件的background-image樣式規則使用Data URI Scheme，使其隨css文件一同被瀏覽器緩存起來。

Combined files經過組合多個腳本文件到單一文件來減小HTTP請求次數。樣式表也可採用相似方法處理。這個方法雖然簡單，但沒有獲得大規模的使用。10大美國網站每頁平均有7個腳本文件和2個樣式表。當頁面之間腳本和樣式表變化很大時，該方式將遇到很大的挑戰，但若是作到的話，將能加快響應時間。

使用CDN(Content Delivery Network, 內容分發網絡)

能夠經過 CDN服務提供商增長Expires Header緩存相關

壓縮頁面元素

經過壓縮HTTP響應內容可減小頁面響應時間。從HTTP/1.1開始，web客戶端在HTTP請求中經過Accept-Encoding頭來代表支持的壓縮類型

把樣式表放在頭上

咱們發現把樣式表移到HEAD部分能夠提升界面加載速度，所以這使得頁面元素能夠順序顯示。

把腳本文件放在底部

與樣式文件同樣，咱們須要注意腳本文件的位置。咱們需儘可能把它們放在頁面的底部，這樣一方面能順序顯示，另方面可達到最大的並行下載。
在某些狀況下，不是很容易就能把腳本移到底部的。如，腳本使用document.write方法來插入頁面內容。同時可能還存在域的問題。不過在不少狀況下，仍是有一些方法的。
一個備選方法是使用延遲腳本（deferred script）。DEFER屬性代表腳本未包含document.write，指示瀏覽器刻繼續顯示。不幸的是，Firefox不支持DEFER屬性。在IE中，腳本可能被延遲執行，但不必定獲得須要的長時間延遲。不過從另外角度來講，若是腳本能被延遲執行，那它就能夠被放在底部了。

避免CSS表達式

一種減小CSS表達式執行次數的方法是一次性表達式，即當第一次執行時就以明確的數值代替表達式。若是必須動態設置的話，可以使用事件處理函數代替。若是您必須使用CSS表達式的話，請記住它們可能被執行上千次，從而影響頁面性能。

把JavaScript和CSS放到外部文件中

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

減小DNS查詢次數

減小主機名可減小DNS查詢的次數，但可能形成並行下載數的減小。避免DNS查詢可減小響應時間，而減小並行下載數可能增長響應時間。一個可行的折中是把內容分佈到至少2個，最多4個不一樣的主機名上。

最小化JavaScript代碼

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

避免重定向

重定向功能是經過301和302這兩個HTTP狀態碼完成的，如：

HTTP/1.1 301 Moved Permanently
  Location: http://example.com/newuri
  Content-Type: text/html

瀏覽器自動重定向請求到Location指定的URL上，重定向的主要問題是下降了用戶體驗。

刪除重複的腳本文件

在一個頁面中包含重複的JS腳本文件會影響性能，即它會創建沒必要要的HTTP請求和額外的JS執行。

配置ETags

不是很懂，留個坑

緩存Ajax

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