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查找 次數的方式。通�？刹捎庙撁嬷械撵o態資源文件使用相對路徑的試為減少頁面中的主機名。

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