規則1－減少HTTP請求

請求網頁時只有10％－20％的最終用戶響應時間花在接收請求的HTMl文檔上，剩下的80％－90％時間花在為HTML文檔所引用的所有組建（圖片，腳本，樣式表，Flash等）進行的HTTP請求上，因此改善響應時間的最簡單途徑就是減少組件的數量，并由此減少HTTP請求數量。

圖片地圖：我們可以將多個圖片完成的功能，使用一個圖片，根據的不同區域來響應不應的請求。

合并腳本和樣式表：每個文件都會導致一個HTP請求，盡量將css和js合并到一個文件中。?

規則2－使用內容發布網絡

在多個地理位置不同的服務器上部署內容，如果web服務器離擁護更近，則一個http請求的響應時間將縮短，如果組件web服務器離擁護更近，則多個http請求的響應時間將縮短。有很多公司提供CDN（內容發布網絡）服務。CDN用于發布靜態內容，如圖片，腳本，樣式表和Flash。?

規則3－添加Expires頭

使用Expires來設置瀏覽器緩存，指到指定的時間為止一直訪問緩存中的內容。另外在http1.1中引入了cache－control頭來克服Expires頭的限制，因為Expires頭使用一個特定時間，它要求服務器和客戶端的時鐘嚴格同步，過期時間需要經常檢查，并且一旦未來這一天到來了，還需要在服務器配置中提供一個新的日期。

Cache－control使用max－age指定指定組件被緩存多久，它以秒為單位定義了一個更新窗。如果從組件被請求開始過去的秒數少于max－age，瀏覽器就使用緩存版本。

如果你同時指定了Expires和cache－control頭，max－age指令將重寫Expires頭。

使用瀏覽器緩存減少了響應時間，但是當我們的組件更新的時候，已經訪問過用戶不太可能獲取最新的組件，因為前一個版本已經在緩存中了，解決這個問題的方案就是修改文件名，比如我們組件使用變量.?

規則4－壓縮組件

壓縮已經在Email應用和FTP站點中使用了10年，http1.1開始，web客戶端可以使用htpp頭Accept－Encoding（Accept－Encoding：gzip;deflate）來標識壓縮。deflate 也是一種壓縮方式但不流行，Gizp是最理想的壓縮方法。我們一般壓縮的對象是html，樣式表，腳本，圖片和pdf不應該壓縮，因為它們本來已經備壓縮了，在去壓縮只會白白的浪費cpu資源。壓縮通常能將響應的數量減少將近70％。

正常情況下，當瀏覽器直接與服務器通信時我只要按常規的配置即可。但是當瀏覽器通過代理來發送請求的時候就變得非常復雜。需要考慮壓縮和緩存之間的平衡。?

規則5－將樣式表放在頂部

在早先的IE中比如將樣式表放在底部，會導致白屏或者是無樣式內容的閃爍。白屏是由于瀏覽器要等待css下載完再顯示頁面的組件，所以在等待css下載的時候頁面就是白屏。無樣式的閃爍是由于先下載頁面的組件比如文字圖片，并逐步顯示，等css下載完則需要應用新的css樣式渲染，就產生了這種無樣式的閃爍現象。

正確使用方式是使用link標簽將樣式表放在文檔的head中。

規則6-將腳本放在底部
并行下載：頁面中的每個組件都會產生一個http請求，http請求會影響相應時間，瀏覽器對其下載的規則要依照http規范。在http1.1規范里建議瀏覽器從每個主機名并行下載兩個組件，也就是說如果我們的組件在兩個主機名下就會并行下載4個組件。但并非是主機名越多越好，Yahoo的研究表明使用兩個主機名是最佳的。而且不同的瀏覽器會有不同的默認設置。
下載腳本時是禁止并行下載的，因為腳本可能使用document.write來修改內容，或者有多個腳本時他們之間可能存在依賴關系。所以腳本放在最下面就會先下載腳本而阻止頁面其他組件的下載。所以最佳的情況就是將腳本放在底部。?

規則7-避免css表達式
CSS表達式是動態設置CSS屬性的一種強大但很危險的方式，它收到IE5之后版本的支持。類似background-color:expression();格式的。任何css表達式實現的功能我們都可以找到它的替代方式，我們盡量避免使用Css表達式。

規則8-使用外部JavaScript和CSS
使用內聯比外部文件確實有更快的響應速度，但是使用外部文件被瀏覽器緩存，哪種方式好還要考慮頁面的瀏覽次數，緩存設置等。也有兩全其美的方法，比如加載后下載，我們首先使用內聯的方式，在主頁加載完畢后動態下載外部組件來實現，這樣能將外部文件放到瀏覽器的緩存中以便用戶接下來訪問其他頁面。還可以使用動態內聯的方式。

規則9：減少DNS查找
Domain Name System(DNS)將主機名映射到IP上，比如你輸入www.a.com，連接到瀏覽器的DNS解析器會返回服務器的ip地址。
DNS解析也是開銷，在DNS查找之前瀏覽器不能從主機名那里下載到任何東西，相應時間依賴于DNS解析器，他所能承擔的請求壓力，
你與它之間的距離和你的帶寬速度。
實際中操作系統和瀏覽器做為緩存DNS查找記錄，但是瀏覽器的Keep-Alive屬性會覆蓋操作系統的緩存過期時間。

規則10-精簡JavaScript
Javascript我們精簡和混淆，精簡只是去掉代碼中空白等。而混淆會對一些變量函數名進行修改。一般混淆是為了增加反向工程的
難度，但是也容易帶來錯誤，一般我們不建議去混淆JavaScript代碼。精簡和混淆我們都可以借助一些工具來實現。?

規則11-避免重定向
重定向就是從一個URL到另一個URL，它會使你的頁面變慢。下面是一些使用重定向的典型解決方案：
1.缺少結尾的斜線：我們在請求www.a.com時會引起重定向url變為www.a.com/，這是一般瀏覽器的默認行為。
2.連接網站：當我們改變網站后端邏輯的時候，很可能所需的url也變了，這時候就需要將用戶從舊的url轉移到新的url，這個時候
我們往往使用最多的也是重定向。我們應該盡量去避免。
3.跟蹤內部流量
4.跟蹤出戰流量
5.美化url：有的時候某個url很復雜，不利用用戶去輸入，我們就提供一個友好的url來給用戶，這個時候也會發生重定向。

規則12-移除重復腳本
該規則說的是同一個腳本被包含兩次。?

規則13-配置ETag
當網站被宿主在多于一臺服務器上時，ETag頭可能會阻礙緩存。
ETag：實體標簽，是web服務器和瀏覽器用于確認緩存組件的有效性的一種機制。?

規則14-使用Ajax緩存
確保Ajax請求遵守性能指導，尤其應具有長久的Expires頭。

轉載于:https://www.cnblogs.com/JemBai/archive/2009/10/16/1584499.html

總結

以上是生活随笔為你收集整理的规范HTML页的几点注意的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。