先決條件

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

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

假設(shè)您沒有寬帶

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

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

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

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

基本工具

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

Firebug

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

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

YSlow

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

安裝 Firebug

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

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

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

圖 1. Firefox 起始頁(yè)的 Firebug HTML 和 Style 視圖
 

安裝 YSlow

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

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

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

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

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

圖 2. Firefox 起始頁(yè)的 YSlow 性能分析
 

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

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

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

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

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

• <iframe>

不要使布局超載

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

不要使用圖像來表示文本

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

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

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

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

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

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

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

清單 1. 基于選項(xiàng)卡導(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 所需的下載時(shí)間更長(zhǎng)，進(jìn)而增加了瀏覽器加載網(wǎng)頁(yè)的時(shí)間。正因?yàn)槿?wbr>此，盡可能縮小 cookie 來最小化對(duì)瀏覽器響應(yīng)時(shí)間的影響非常重要。

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

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

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

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

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

盡可能避免使用表格

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

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

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

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