先決條件

在理想情況下，您應(yīng)該安裝了 Mozilla Firefox。您還應(yīng)該大體了解 Web 開發(fā)。本文涉及的主題并不復(fù)雜，但是如果您了解超文本標(biāo)記語言（Hypertext Markup Language，HTML）、層疊樣式表（Cascading Style Sheet，CSS）以及 ? 編程語言等主題，那么在學(xué)習(xí)本文時將更加得心應(yīng)手。不需要使用集成開發(fā)環(huán)境（IDE），只需使用您喜愛的編輯器。

您必須在瀏覽器中啟用了 javacript：：。另外，要學(xué)習(xí)與 Firebug 和 YSlow 相關(guān)的內(nèi)容，您需要安裝 Firefox Web 瀏覽器。

假設(shè)您沒有寬帶

許多人通過某種形式的寬帶連接訪問 Internet，這些形式可能是 DSL、網(wǎng)線、光纖或其他方法。但是，無法使用這類技術(shù)的用戶不得不使用撥號連接。您一定已經(jīng)忘記撥號上網(wǎng)是什么感覺了，但您可以試著回想一下網(wǎng)頁逐行加載時的情形。

2006 Organization for Economic Cooperation and Development (OECD) 報告將寬帶 定義為數(shù)據(jù)下載速率大于 256 kbit/s 的連接。美國 Federal Communications Commission (FCC) 目前將寬帶定義為大于 768 kbit/s 速率的所有連接方式。

幸運(yùn)的是，這些可憐的人們現(xiàn)在已經(jīng)能夠獲得一些幫助。您可以通過縮短加載頁面的時間來改善他們的體驗。但是，撥號連接并不是降低加載和響應(yīng)速度的惟一原因。許多 Web 設(shè)計人員錯誤地認(rèn)為高速 Internet 連接的到來會使網(wǎng)站性能優(yōu)化變得沒有必要。這種觀點是不對的。例如，過去使用桌面軟件執(zhí)行的許多任務(wù)現(xiàn)在可以在線執(zhí)行。在 Web 應(yīng)用程序中獲得像桌面軟件那樣的高速響應(yīng)體驗非常困難，因此性能優(yōu)化非常重要。幸運(yùn)的是，一些工具和最佳實踐可用于縮短響應(yīng)和加載時間，提供更加流暢的體驗。

根據(jù) Birds-Eye 的 2007 寬帶統(tǒng)計顯示，美國境內(nèi) 25% 的人沒有 Internet 連接，53% 的人擁有寬帶，21% 的人仍然在使用撥號連接。

基本工具

對于所有與優(yōu)化相關(guān)的任務(wù)，您必須使用工具來診斷瓶頸和識別問題?，F(xiàn)在在 Web 開發(fā)中使用最廣泛的兩個工具是 Firebug 和 YSlow，它們都是開源、免費的 Firefox 插件。

Firebug

Firebug（參見 參考資料）是最流行的 Firefox 擴(kuò)展之一，該應(yīng)用程序能夠使 Web 開發(fā)人員的工作更加輕松。它包含許多非常有用的功能，比如：

• javacript：： 調(diào)試
• javacript：： 命令行
• 監(jiān)視 javacript：： 性能和跟蹤 XmlHttpRequests
• 登錄 Firebug 控制臺
• 跟蹤
• 檢查 HTML 元素和動態(tài)編輯 HTML 代碼
• 動態(tài)編輯 CSS 文檔

YSlow

YSlow（參見 參考資料）分析網(wǎng)頁，并根據(jù) Yahoo! 起草的高性能網(wǎng)站規(guī)則（參見 參考），告訴您網(wǎng)頁加載緩慢的原因。YSlow 是一個與 Firebug 集成的 Firefox 插件，因此您需要首先安裝 Firebug，然后才能安裝和使用 YSlow。

安裝 Firebug

兩個 Firefox 擴(kuò)展的安裝過程都非常簡單。要安裝 Firebug，執(zhí)行以下步驟：

1. 打開 Firefox，轉(zhuǎn)到 Firebug 主頁。
2. 安裝最新版的 Firebug。
3. 如果 Firefox 配置為阻止彈出窗口，單擊 Allow 允許打開安裝窗口。否則，單擊 Install Now。
4. 重啟 Firefox。

您現(xiàn)在可以從 Tools 菜單訪問 Firebug?？梢?wbr>在新窗口或現(xiàn)有窗口中打開 Firebug（參見 圖 1）。

圖 1. Firefox 起始頁的 Firebug HTML 和 Style 視圖

安裝 YSlow

安裝 Firebug 之后，接下來安裝 YSlow。為此，執(zhí)行以下步驟：

1. 打開 Firefox，然后轉(zhuǎn)到 YSlow 主頁。
2. 安裝插件，然后重啟 Firefox。

   注意：與許多其他 Firefox 擴(kuò)展不同，YSlow 不會自動啟動。必須首先激活它。

3. 要激活 YSlow，在狀態(tài)欄右鍵單擊其圖標(biāo)，然后單擊 Autorun。

圖 2 顯示了 YSlow 性能分析的結(jié)果。

圖 2. Firefox 起始頁的 YSlow 性能分析

常識：牢記設(shè)計規(guī)則

令人驚訝的是簡單的設(shè)計規(guī)則通常會被忽視，最終產(chǎn)生未經(jīng)優(yōu)化的、下載緩慢的網(wǎng)頁。牢記以下規(guī)則，頁面的加載速度將會更快。

使用良好的結(jié)構(gòu)

可擴(kuò)展 HTML (XHTML) 具有許多優(yōu)勢，但是其缺點也很明顯。XHTML 可能使您的頁面更加符合標(biāo)準(zhǔn)，但是它大量使用標(biāo)記（強(qiáng)制性的 和 標(biāo)記），這意味著瀏覽器要下載更多代碼。所以，事情都有兩面性，嘗試在您的網(wǎng)頁中使用較少的 XHTML 代碼，以減小頁面大小。

如果您確實不得不使用 XHTML，試著盡可能對它進(jìn)行優(yōu)化。例如，刪除空格并采用嚴(yán)格的 XHTML 編碼實踐，提高下載和解析速度。要嚴(yán)格執(zhí)行 XHTML cript： 規(guī)則，向文檔中添加以下 doctype 語句：

• <iframe>

不要使布局超載

在博客（和新的站點）流行起來之前，讓頁面水平滾動甚至垂直滾動被認(rèn)為是糟糕的實踐。頁面越小，越難以（但并不是不可能）完好地填充屏幕?，F(xiàn)在，對于博客和內(nèi)容驅(qū)動的網(wǎng)站，不時可以看到幾百 Kb 大小的長頁面。是的，您需要填充更多空間，但是這并不意味著您必須使用大的背景圖像、大量表格或者許多內(nèi)容來填充。堅持簡約原則：少即是多。頁面中充斥著各種類型的圖像、視頻、廣告等，這大大違背實用性原則，因此，在增加頁面的內(nèi)容時請三思。

不要使用圖像來表示文本

我們很少會控制字體在不同瀏覽器中的顯示方式，與字體不同的是，圖像總是精確地按照其設(shè)計方式來顯示。但這不能當(dāng)作使用圖像來表示文本的借口。

使用圖像表示文本的最常見示例就是在導(dǎo)航欄中。美觀的按鈕更加具有吸引力，但是它們的加載速度很慢。此外，圖像仍然不能由搜索引擎直接索引，因此，使用圖像進(jìn)行導(dǎo)航不利于搜索引擎優(yōu)化（search engine optimization，SEO）。當(dāng)無需圖像就可以通過大量 CSS 技巧創(chuàng)建漂亮的按鈕時，絕不使用圖像來表示文本。

一種適用于 CSS 樣式的特定導(dǎo)航類型就是選項卡式導(dǎo)航，如 圖 3 所示。

圖 3. 選項卡式導(dǎo)航

除了體積較小之外，這種實現(xiàn)導(dǎo)航的方式也更加符合 Web 標(biāo)準(zhǔn)。

遵循統(tǒng)稱為 Web 標(biāo)準(zhǔn) 的一組最佳實踐的網(wǎng)站具有精簡性、可訪問性、搜索引擎友好性、適用性和基于 CSS 的特征。

清單 1 和 清單 2 中的代碼以純 CSS/XHTML 的形式實現(xiàn)基于選項卡的導(dǎo)航功能。

清單 1. 基于選項卡導(dǎo)航的 CSS 文檔

				    #nav {      float:left;      width:100%;      background:#E7E5E2;      font-size:95%;      line-height:normal;      border-bottom:1px solid #54545C;      }    #nav ul {	margin:0;	padding:10px 10px 0 50px;	list-style:none;      }    #nav li {      display:inline;      margin:0;      padding:0;      }    #nav a {      float:left;      background:url("tableftK.gif") no-repeat left top;      margin:0;      padding:0 0 0 4px;      text-decoration:none;      }    #nav a span {      float:left;      display:block;      background:url("tabrightK.gif") no-repeat right top;      padding:5px 15px 4px 6px;      color:#FFF;      }    /* Commented Backslash Hack hides rule from IE5-Mac \*/    #nav a span {float:none;}    /* End IE5-Mac hack */    #nav a:hover span {      color:#FFF;	  background-position：:100% -42px;      }    #nav a:hover {      background-position：:0% -42px;      }    #nav a:hover span {      background-position：:100% -42px;	  }

				
  
    
Link 1    
Link 2    
Link 3    
Longer Link Text    
Link 5  

檢查 cookie 使用情況

cookie 可能是很小的文件，但是瀏覽器仍然需要下載它們。較大的 cookie 所需的下載時間更長，進(jìn)而增加了瀏覽器加載網(wǎng)頁的時間。正因為如此，盡可能縮小 cookie 來最小化對瀏覽器響應(yīng)時間的影響非常重要。

此外，設(shè)置一個較早的 expire 日期或者根本不設(shè)置 expire 日期，會縮短響應(yīng)時間。要在 PHP 語言中設(shè)置 cookie 的 expire 日期，使用以下代碼：

不要包含不必要的 javacript：： 代碼，盡可能將其外部化

與 cookie 類似，javacript：： 文件的下載也需要時間，這不可避免地會降低整個頁面的加載速度。因此，明智地使用 javacript：：（僅在真正必要時才使用）并優(yōu)化腳本的大小和速度。

縮短 javacript：： 下載時間的另一種方式是使用外部文件，而不是包含腳本內(nèi)聯(lián)。這種方法也適用于 CSS，因為瀏覽器會緩存外部化的文本，而（在 HTML 頁面自身中）以內(nèi)聯(lián)方式編碼的 CSS 或 javacript：： 每次都會隨 HTML 一起加載。要通過在 HTML 中引用 CSS 和 javacript：： 代碼來外部化它們，可以使用具有以下形式的代碼：

   < src="/javacript：：s/myjavacript：：.js" type="text/javacript：：">

盡可能避免使用表格

表格被用作網(wǎng)頁的主要構(gòu)建塊，但是作為頁面布局元素，使用表格現(xiàn)在被認(rèn)為是糟糕的做法。有時候，您必須使用表格（并且它們被認(rèn)為是顯示表格數(shù)據(jù)的出色實踐）。如果是這樣，明確地指定表格單元格、行和列的寬度和高度，否則，瀏覽器必須執(zhí)行許多操作來計算如何顯示它們，這會降低頁面加載速度：

可能這是所有技巧中最顯而易見的一個，但是它也是最容易忘記的一個技巧。我曾經(jīng)提到過 “少即是多”：這不僅是為了真正吸引更廣泛的用戶，還意味著需要下載和處理的東西更少。如果您真正需要在網(wǎng)頁上放置許多內(nèi)容，考慮將網(wǎng)頁分為 2 個、3 個或更多的獨立頁面。

一些優(yōu)化網(wǎng)頁的技巧

可以使用許多方法來優(yōu)化您的網(wǎng)頁，包括壓縮 javacript：： 文件，使用超文本傳輸協(xié)議（Hypertext Transfer Protocol，HTTP）壓縮，以及設(shè)置圖像大小。