Web標準化之前端開發(fā)常用工具

1、Firebug

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

（點擊查看大圖）

2、Page Speed

什么是 Page Speed？

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

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

3、Yslow

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

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

前面講了Web標準化系統(tǒng)之工具和Web標準化之網(wǎng)頁內(nèi)容篇， 這兩方面主要側重在客戶端優(yōu)化，其實服務器端也需要優(yōu)化的。

服務器優(yōu)化方法一：使用內(nèi)容分發(fā)網(wǎng)絡

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

抱歉，先來了段概念，這是抄的維基上的定義，哈哈，想看原文來這里：內(nèi)容分發(fā)網(wǎng)絡。

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

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

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

服務器優(yōu)化方法二：合理的緩存機制

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

 expires-tags（點擊查看大圖）

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

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

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

服務器優(yōu)化方法三：Gzip壓縮文件內(nèi)容

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

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

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

Accept-Encoding gzip， deflate

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

服務器優(yōu)化方法四：減少DNS查找次數(shù)

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

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

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

第二種方式就是減少頁面中出現(xiàn)的主機名的數(shù)量。因為緩存機制只對已經(jīng)訪問過且在緩存范圍內(nèi)的客戶端有效，而減少主機名的數(shù)量才是最有效的DNS查找 次數(shù)的方式。通�？刹捎庙撁嬷械撵o態(tài)資源文件使用相對路徑的試為減少頁面中的主機名。

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