Web標準化之前端開發常用工具

1、Firebug

Firebug是Firfox中的五星級推薦級別的插件，它的受歡迎程度可見一斑。這款插件整合了查看HTML結構及樣式、實時編輯等功能，是開發 HTML、CSS、JavaScript的利器。有了它，我們可以網頁的HTML、CSS、JavaScript進行實時的編輯、調試和監控。大家可以拿 自己的網站感興趣的網站，用這個工具來分析，慢慢上手。看下它的廬山真面目吧：

（點擊查看大圖）

2、Page Speed

什么是 Page Speed？

Page Speed 是開源 Firefox/Firebug 插件。網站管理員和網絡開發人員可以使用 Page Speed 來評估他們網頁的性能，并獲得有關如何改進性能的建議。

Page Speed 能自動優化網站圖像，提供能直接用于網站中的壓縮圖片。該工具還能識別失效的JavaScript和CSS，清理這些無效的文件將減少用戶等待網頁加載的 時間。

3、Yslow

Yslow　是Yahoo Developre Network開發的集成于Firebug的插件。它的獨特之處不僅在于分布網站，而且為每一個規則生成一則整體的報告，具體到每個可能的優化之 處，Yslow都列出具體的修改意見。

更貼心的是Yslow還提供了一系列輔助工具，對頁面的腳本、CSS以及圖片進行更細致的優化。

前面講了Web標準化系統之工具和Web標準化之網頁內容篇， 這兩方面主要側重在客戶端優化，其實服務器端也需要優化的。

服務器優化方法一：使用內容分發網絡

內容分發網絡（Content delivery network或Content distribution network，常簡寫成CDN）是指一種透過互聯網互相連接的電腦網絡系統，提供高效能、可擴展性、及低成本的網絡將內容傳遞給使用者。

抱歉，先來了段概念，這是抄的維基上的定義，哈哈，想看原文來這里：內容分發網絡。

簡單點是這樣，雖然現在的光纜呀光纖呀神馬的大大提升了傳輸速度，但空間的距離還是會增加服務器的響應時間，谷歌離開大陸搬到香港，谷歌的搜索響應 時間就有輕微的影響，這個大家有時能感覺出來。畢竟傳輸距離長了，信號傳輸過程中的路由節點等因素會消耗時間，內容分發網絡是很好地解決這個問題的方法。

CDN由一系列分散到各個不同地理位置上的Web服務器組成，目的在于提高網站內容的傳輸速度，然后根據用戶與服務器的空間距離來選擇向用戶傳輸內 容的服務器。其中網站的靜態內容是優先考慮采用此方式的。一般情況下，在終端用戶聽響應時間中，有 80%-90%的時間（參見：Web標準化之網頁內容篇的 表格 ）用于下載圖像、CSS、JS等頁面內容。把這部分內容分布式存放后，能有效地縮短服務器的響應時間。

當然，CDN的成本比較高，一般的個人網站和企業站承受不了這個負擔。不過隨著目標客戶的擴大和業務的全球化，當網絡公司發展到一定規模，CDN就 成為實現快速響應所必需的方案了。Yahoo！就是這項技術的受益者，它把網站靜態內容轉移到CDN上后，大約平均節省了終端用戶20%左右的響應時間， 效果比較理想。

服務器優化方法二：合理的緩存機制

瀏覽器和代理服務器使用緩存來降低HTTP請求的大小和次數以加快頁面的訪問速度，Web服務器在HTTP響應中使用Expires文件頭來告訴客 戶端內容需要保存多久。如下面光年論壇的HTTP信息，它告訴瀏覽器這個響應到2011年5月7日才過期：

 expires-tags（點擊查看大圖）

上面是我瀏覽器訪問光年論壇時返回的HTTP頭信息。從上圖可以看出光年論壇使用的是Apache服務器，并且使用了Entity Tags（ETag，實體標簽）。ETag的主要作用就是辨別服務器端的資源是否發生了變化，示例代碼如下：

上述HTTP頭信息表示，當客戶端對服務器的某個文件發起請求時，服務器會根據一些標識信息為文件生成唯一的識別碼：11a7bf3- cf10-49fec5f6e3940。當客戶端再次請求該文件時，會通過 If-Match或者If-None-Match這個條件判斷請求來驗證資源是否更改。代碼如下：

如果ETag匹配，服務器就會返回一個304代碼，這樣瀏覽器端就會請求ETag發生變化的文件，減少瀏覽器端數據的流量，加快瀏覽器的反應速度， 更重要的是，減輕了服務器的壓力。

服務器優化方法三：Gzip壓縮文件內容

CDN解決了傳輸距離的問題，緩存機制降低了請求的次數，而對傳輸內容進行壓縮，則是更直接地降低響應時間的方式。

Gzip是目前最流行的也是最有效的壓縮方式，另外一種壓縮格式是deflate，不過它的使用范圍有限，效果也稍遜色。使用Gzip壓縮所有可能 的文件類型是減少文件大小，增加用戶體驗簡單且有效的方式。

從HTTP1.1始，Web客戶端默認支持HTTP請求中有Accept-Encoding （見上圖）文件頭的壓縮格式：

Accept-Encoding gzip， deflate

Gzip可以減少大約70%的響應規模，目前約有90%通過瀏覽器傳輸的互聯網交換支持Gzip格式。一般的Web服務器只壓縮HTML文檔，我們 可以用其他輔助工具對JS腳本和CSS進行壓縮。同時，像圖片和PDF文件已經壓縮過了，故不必再進行Gzip壓縮。

服務器優化方法四：減少DNS查找次數

當我們在瀏覽器里輸入：www.gnbase.com 這個域名時，域名系統（DNS）會把它解析成對應的IP。當然這個過程是需要大約20-120ms的時間，在這個過程中瀏覽器只能等待，直止DNS解析完 畢。見下圖：

 DNS解析時間示例（點擊查看大圖）

DNS解析是必需的，從高級腳本到細小的圖標，頁面上的每個資源都要做DNS解析，眾生平等的概念在這里體現的非常充分。一個資源要20ms，15 個資源就要300ms。那么如何才能有效的減少這種重復性動作呢？一個方法是緩存DNS，瀏覽器是自己來控制DNS緩存的，比如IE對DNS默認的DNS 查找記錄緩存時間為半小時，可通過修改注冊表鍵值DNSCacheTimeout來改變它；Firefox對DNS的查找緩存時間為1小時，它在配置文件 中的選項為network.dnsCacheExpiration。

第二種方式就是減少頁面中出現的主機名的數量。因為緩存機制只對已經訪問過且在緩存范圍內的客戶端有效，而減少主機名的數量才是最有效的DNS查找 次數的方式。通常可采用頁面中的靜態資源文件使用相對路徑的試為減少頁面中的主機名。

服務器租用/服務器托管中國五強！虛擬主機域名注冊頂級提供商！15年品質保障！--億恩科技[ENKJ.COM]