先決條件

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

您必須在瀏覽器中啟用了 javacript：：。另外，要學習與 Firebug 和 YSlow 相關的內容，您需要安裝 Firefox Web 瀏覽器。

假設您沒有寬帶

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

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

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

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

基本工具

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

Firebug

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

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

YSlow

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

安裝 Firebug

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

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

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

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

安裝 YSlow

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

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

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

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

圖 2 顯示了 YSlow 性能分析的結果。

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

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

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

使用良好的結構

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

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

• <iframe>

不要使布局超載

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

不要使用圖像來表示文本

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

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

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

圖 3. 選項卡式導航

除了體積較小之外，這種實現導航的方式也更加符合 Web 標準。

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

清單 1 和 清單 2 中的代碼以純 CSS/XHTML 的形式實現基于選項卡的導航功能。

清單 1. 基于選項卡導航的 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 所需的下載時間更長，進而增加了瀏覽器加載網頁的時間。正因為如此，盡可能縮小 cookie 來最小化對瀏覽器響應時間的影響非常重要。

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

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

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

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

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

盡可能避免使用表格

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

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

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

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