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

shengguo 發布于2019-08-30 10:57 / 1303人閱讀

摘要：唯一的格式約束是該字符串必須用引號引起來。對于網站背后的服務器來說，不大相同。不過用戶不必忍受整個頁面的重新加載了，而且用戶在等待時，仍然可以響應。

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

八、使用外部Jacascript和css

1.如果需要呈現給用戶的頁面可以實現完整緩存，那么使用外部Jacascript和css會提高網站性能。
2.在使用使用外部Jacascript和css時，可以設置頁面加載完成后下載，這樣可保證頁面也首屏效果。

九、減少DNS查詢

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

十、精簡JavaScript

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

十一、避免重定向

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

十二、移除重復腳本

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

十三、配置或移除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。

十四、使用Ajax可緩存

公所周知，主動的Ajax請求時異步的，用戶可能仍然需要等待響應。不過用戶不必忍受整個頁面的重新加載了，而且用戶在等待時，UI仍然可以響應。
由于Ajax畢竟是一個請求，所有為更好的用戶體驗，我們仍需結合上面其他的性能優化條例來使用，比如緩存等。

云服務器 GPU云服務器 api設計的最佳實踐最佳實踐最佳頁面置換算法的歷史 webrtc最佳實踐

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/114671.html

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

摘要：一直忙于工作，最近這段時間終于可以靜下心來細讀一些與工作相關的書籍。第二部分見提升網站頁面速度的條最佳實踐二。高性能網站建設指南一書共列舉了條提升網站速度的方法，本篇就前種進行總結。一直忙于工作，最近這段時間終于可以靜下心來細讀一些與工作相關的書籍。本篇文章是《高性能網站建設指南》一書的梳理。希望自己收獲的同時，也能給對這塊知識感興趣的童鞋給與入門指導。關于《高性能網站建設指南》的梳...

ivyzhang 2019-08-26 13:48 評論0 收藏0
提升網站頁面速度的14條最佳實踐（一）

摘要：一直忙于工作，最近這段時間終于可以靜下心來細讀一些與工作相關的書籍。第二部分見提升網站頁面速度的條最佳實踐二。高性能網站建設指南一書共列舉了條提升網站速度的方法，本篇就前種進行總結。一直忙于工作，最近這段時間終于可以靜下心來細讀一些與工作相關的書籍。本篇文章是《高性能網站建設指南》一書的梳理。希望自己收獲的同時，也能給對這塊知識感興趣的童鞋給與入門指導。關于《高性能網站建設指南》的梳...

PAMPANG 2019-08-30 10:53 評論0 收藏0
提升網站頁面速度的14條最佳實踐（二）

摘要：唯一的格式約束是該字符串必須用引號引起來。對于網站背后的服務器來說，不大相同。不過用戶不必忍受整個頁面的重新加載了，而且用戶在等待時，仍然可以響應。本篇是對《高性能網站建設指南》一書的后7種規則進行梳理。八、使用外部Jacascript和css 1.如果需要呈現給用戶的頁面可以實現完整緩存，那么使用外部Jacascript和css會提高網站性能。 2.在使用使用外部Jacascr...

rainyang 2019-08-26 13:51 評論0 收藏0