提高網站頁面速度的14條最佳實踐（二）

本篇是對《高性能網站建設指南》一書的後7種規則進行梳理。

8、使用外部Jacascript和css

1.若是須要呈現給用戶的頁面能夠實現完整緩存，那麼使用外部Jacascript和css會提升網站性能。
2.在使用使用外部Jacascript和css時，能夠設置頁面加載完成後下載，這樣可保證頁面也首屏效果。

9、減小DNS查詢

1.Internet是經過IP地址來查找服務器的。因爲IP地址很難記憶，一般使用包含主機名的URL來取代它，可是瀏覽器發送請求時，IP地址仍然是必需的。這就是Domain Name System（DNS）所處的角色，DNS將主機名映射到IP地址上。當你輸入一個網址時，連接到服務器的DNS解析器會返回服務器的IP地址。
2.DNS開銷：一般瀏覽器查找的一個給定的主機名的IP地址要花費20-120毫秒，在完成查找以前，瀏覽器不能從主機那裏下載任何的東西。
3.使用Keep-Alive和較少的域名來減小DNS查詢

10、精簡JavaScript

精簡是從代碼中移除沒必要要的字符，好比空白符（空格、換行、製表符）等以減小文件大小，進而改善加載時間。

11、避免重定向

1.重定向用於將用戶從一個url從新路由到另外一個url。重定向有不少種：301和302是常見的兩種
2.當Web服務器向瀏覽器返回一個重定向時，響應中就會擁有一個範圍在3xx的狀態碼（注意："304 Not Modeified"並非真的重定向-他是用來響應GET請求，避免下載已經存在於瀏覽器緩存中的數據。）。
3.重定向的損傷：在重定向完畢而且HTML文檔下載完成以前，沒有任何東西顯示給用戶。

12、移除重複腳本

重複性腳本損傷性能的方式有兩種：沒必要要的HTTP請求和執行JavsScript所浪費的時間。

十3、配置或移除ETag

1.Etag是什麼？
實體標籤（Entity Tag ETag）是Web服務器和瀏覽器用於確認緩存組件的有效性的一種機制。
2.瀏覽器的緩存與確認？
步驟一：Expires頭：瀏覽器在下載組件時，會將它存儲到緩存中。再次請求改組件時，會確認改組件是否過時來決定是否從新請求改組件，而這個過時時間是由Expires頭的值來決定。當請求一個組件時，服務器會根據其選項在響應中返回一個Expires頭。
步驟二：條件GET請求：若是緩存的組件過時了（或者用戶明確地從新記載了頁面），瀏覽器在重用它以前必須首先檢查它是否仍然有效，這稱做條件GET請求。若是組件有效，原始服務器會返回一個"304 Not Modified"狀態碼。

服務器在檢測緩存的組件是否有效時有兩種方式：
1.比較最新修改日期
2.比較實體標籤

2.1 最新修改時間:

原始服務器經過Last-Modified響應頭來返回組件的最新修改時間，它要求服務器端和客戶端時間徹底統一的狀況下才有意思。

2.1 實體標籤：

ETag提供了另外一種方式，用於檢測瀏覽器緩存中的組件與原始服務器上的組件是否匹配。ETag在HTTP1.1中引用。ETag是惟一標識了一個組件的一個特定版本的字符串。惟一的格式約束是該字符串必須用引號引發來。原始服務器使用ETag來響應指定組件的Etag。
 Etag爲驗證明體提供了比修改最新日期更爲靈活的機制，例如，若是實體依據User-Agent或者Accept-Language頭而改變，實體的狀態能夠反映在ETag中。此後，若是瀏覽器必須驗證一個組件，它會使用If-None-Match頭將ETag傳回原始服務器。若是ETag是匹配的，就會返回304狀態嗎。

3.ETag帶來的問題
ETag的問題在於，一般使用的組件的某些屬性來構造它，這些屬性對於特定的，寄宿了網站的服務器來講是惟一的。當瀏覽器從一臺服務器獲取了原始組件，以後，又向另一臺不一樣的服務器發起條件GET請求時，ETag是不會匹配的——對於使用服務器集羣來處理請求的網站來講，這是很常見的一種狀況。默認狀況下，對於擁有多臺的服務器網站，APache和IIS中嵌入的數據都會大大地下降有效性驗證的成功率。

3.1 Apache1.3和2.X的ETag格式是inode-size-timestamp，即便文件系統的全部信息都是一致的，可是不一樣服務器上的inode仍然是不一樣的。

3.2 IIS5.0和6.0在ETag上有着相似的問題。IIS上ETag的格式是Fletimestamp：ChangNumber。ChangNumber適用於跟蹤IIS配置變化的計數器。對於網站背後的服務器來講，ChangNumber不大相同。
3.3 最後結果，對於徹底相同的組件，從一臺服務器到另外一臺Apache和 IIS產生的ETag是不一樣的，若是你使用了服務器集羣，使用ETag會形成組件沒必要要的重複加載並影響服務器的性能、增長寬帶的開銷。

4.ETag用仍是不用？
若是你使用的是服務器集羣，且使用默認的ETag配置，你的用戶將面對緩慢的頁面，你的服務器會有很高的負載，你會消耗大量的帶寬，並且代理也不能有效地緩存你的內容。

爲了使用ETag的靈活性的驗證能力而又要消除其所帶來的問題，有一種選擇是對ETag進行自定的配置。好比可使用一段根據瀏覽器是否爲Internet Explorer而變化的腳本。若是使用PHP來生成腳本，你能夠經過設置ETag頭來反映瀏覽器的狀態。
若是你的組件必須經過最新修改日期以外的一些東西來進行驗證，則自定義ETag是一種強大的方法。若是你不能自定義ETag，建議你移除ETag。

十4、使用Ajax可緩存

公所周知，主動的Ajax請求時異步的，用戶可能仍然須要等待響應。不過用戶沒必要忍受整個頁面的從新加載了，並且用戶在等待時，UI仍然能夠響應。 因爲Ajax畢竟是一個請求，全部爲更好的用戶體驗，咱們仍需結合上面其餘的性能優化條例來使用，好比緩存等。