Web標(biāo)準(zhǔn)化之前端開(kāi)發(fā)常用工具

1、Firebug

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

（點(diǎn)擊查看大圖）

2、Page Speed

什么是 Page Speed？

Page Speed 是開(kāi)源 Firefox/Firebug 插件。網(wǎng)站管理員和網(wǎng)絡(luò)開(kāi)發(fā)人員可以使用 Page Speed 來(lái)評(píng)估他們網(wǎng)頁(yè)的性能，并獲得有關(guān)如何改進(jìn)性能的建議。

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

3、Yslow

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

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

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

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

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

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

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

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

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

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

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

 expires-tags（點(diǎn)擊查看大圖）

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

上述HTTP頭信息表示，當(dāng)客戶端對(duì)服務(wù)器的某個(gè)文件發(fā)起請(qǐng)求時(shí)，服務(wù)器會(huì)根據(jù)一些標(biāo)識(shí)信息為文件生成唯一的識(shí)別碼：11a7bf3- cf10-49fec5f6e3940。當(dāng)客戶端再次請(qǐng)求該文件時(shí)，會(huì)通過(guò) If-Match或者If-None-Match這個(gè)條件判斷請(qǐng)求來(lái)驗(yàn)證資源是否更改。代碼如下：

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

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

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

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

從HTTP1.1始，Web客戶端默認(rèn)支持HTTP請(qǐng)求中有Accept-Encoding （見(jiàn)上圖）文件頭的壓縮格式：

Accept-Encoding gzip， deflate

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

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

當(dāng)我們?cè)跒g覽器里輸入：www.gnbase.com 這個(gè)域名時(shí)，域名系統(tǒng)（DNS）會(huì)把它解析成對(duì)應(yīng)的IP。當(dāng)然這個(gè)過(guò)程是需要大約20-120ms的時(shí)間，在這個(gè)過(guò)程中瀏覽器只能等待，直止DNS解析完 畢。見(jiàn)下圖：

 DNS解析時(shí)間示例（點(diǎn)擊查看大圖）

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

第二種方式就是減少頁(yè)面中出現(xiàn)的主機(jī)名的數(shù)量。因?yàn)榫彺鏅C(jī)制只對(duì)已經(jīng)訪問(wèn)過(guò)且在緩存范圍內(nèi)的客戶端有效，而減少主機(jī)名的數(shù)量才是最有效的DNS查找 次數(shù)的方式。通常可采用頁(yè)面中的靜態(tài)資源文件使用相對(duì)路徑的試為減少頁(yè)面中的主機(jī)名。

服務(wù)器租用/服務(wù)器托管中國(guó)五強(qiáng)！虛擬主機(jī)域名注冊(cè)頂級(jí)提供商！15年品質(zhì)保障！--億恩科技[ENKJ.COM]