先決條件
在理想情況下，您應該安裝了 Mozilla Firefox。您還應該大體了解 Web 開發(fā)。本文涉及的主題并不復雜，但是如果您了解超文本標記語言（Hypertext Markup Language，HTML）、層疊樣式表（Cascading Style Sheet，CSS）以及 ? 編程語言等主題，那么在學習本文時將更加得心應手。不需要使用集成開發(fā)環(huán)境（IDE），只需使用您喜愛的編輯器。
您必須在瀏覽器中啟用了 javacript：：。另外，要學習與 Firebug 和 YSlow 相關的內(nèi)容，您需要安裝 Firefox Web 瀏覽器。
假設您沒有寬帶
許多人通過某種形式的寬帶連接訪問 Internet，這些形式可能是 DSL、網(wǎng)線、光纖或其他方法。但是，無法使用這類技術的用戶不得不使用撥號連接。您一定已經(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 速率的所有連接方式。 | |
幸運的是，這些可憐的人們現(xiàn)在已經(jīng)能夠獲得一些幫助。您可以通過縮短加載頁面的時間來改善他們的體驗。但是，撥號連接并不是降低加載和響應速度的惟一原因。許多 Web 設計人員錯誤地認為高速 Internet 連接的到來會使網(wǎng)站性能優(yōu)化變得沒有必要。這種觀點是不對的。例如，過去使用桌面軟件執(zhí)行的許多任務現(xiàn)在可以在線執(zhí)行。在 Web 應用程序中獲得像桌面軟件那樣的高速響應體驗非常困難，因此性能優(yōu)化非常重要。幸運的是，一些工具和最佳實踐可用于縮短響應和加載時間，提供更加流暢的體驗。
|
|
根據(jù) Birds-Eye 的 2007 寬帶統(tǒng)計顯示，美國境內(nèi) 25% 的人沒有 Internet 連接，53% 的人擁有寬帶，21% 的人仍然在使用撥號連接。 | |
基本工具
對于所有與優(yōu)化相關的任務，您必須使用工具來診斷瓶頸和識別問題?，F(xiàn)在在 Web 開發(fā)中使用最廣泛的兩個工具是 Firebug 和 YSlow，它們都是開源、免費的 Firefox 插件。
Firebug
Firebug（參見 參考資料）是最流行的 Firefox 擴展之一，該應用程序能夠使 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 擴展的安裝過程都非常簡單。要安裝 Firebug，執(zhí)行以下步驟：
- 打開 Firefox，轉到 Firebug 主頁。
- 安裝最新版的 Firebug。
- 如果 Firefox 配置為阻止彈出窗口，單擊 Allow 允許打開安裝窗口。否則，單擊 Install Now。
- 重啟 Firefox。
您現(xiàn)在可以從 Tools 菜單訪問 Firebug。可以在新窗口或現(xiàn)有窗口中打開 Firebug（參見 圖 1）。
圖 1. Firefox 起始頁的 Firebug HTML 和 Style 視圖
安裝 YSlow
安裝 Firebug 之后，接下來安裝 YSlow。為此，執(zhí)行以下步驟：
- 打開 Firefox，然后轉到 YSlow 主頁。
- 安裝插件，然后重啟 Firefox。
注意：與許多其他 Firefox 擴展不同，YSlow 不會自動啟動。必須首先激活它。
- 要激活 YSlow，在狀態(tài)欄右鍵單擊其圖標，然后單擊 Autorun。
圖 2 顯示了 YSlow 性能分析的結果。
圖 2. Firefox 起始頁的 YSlow 性能分析
常識：牢記設計規(guī)則
令人驚訝的是簡單的設計規(guī)則通常會被忽視，最終產(chǎn)生未經(jīng)優(yōu)化的、下載緩慢的網(wǎng)頁。牢記以下規(guī)則，頁面的加載速度將會更快。
使用良好的結構
可擴展 HTML (XHTML) 具有許多優(yōu)勢，但是其缺點也很明顯。XHTML 可能使您的頁面更加符合標準，但是它大量使用標記（強制性的
如果您確實不得不使用 XHTML，試著盡可能對它進行優(yōu)化。例如，刪除空格并采用嚴格的 XHTML 編碼實踐，提高下載和解析速度。要嚴格執(zhí)行 XHTML cript： 規(guī)則，向文檔中添加以下 doctype 語句：
XHTML 1.0 cript： 與 cript： HTML 4.01 是等效的，包含的屬性
和元素沒有出現(xiàn)在 HTML 4.01 規(guī)范的反對內(nèi)容中。記住，有兩個標記能夠在 XHTML Transitional 中使用，但不能在 XHTML cript： 中使用，例如：
不要使布局超載
在博客（和新的站點）流行起來之前，讓頁面水平滾動甚至垂直滾動被認為是糟糕的實踐。頁面越小，越難以（但并不是不可能）完好地填充屏幕?，F(xiàn)在，對于博客和內(nèi)容驅動的網(wǎng)站，不時可以看到幾百 Kb 大小的長頁面。是的，您需要填充更多空間，但是這并不意味著您必須使用大的背景圖像、大量表格或者許多內(nèi)容來填充。堅持簡約原則：少即是多。頁面中充斥著各種類型的圖像、視頻、廣告等，這大大違背實用性原則，因此，在增加頁面的內(nèi)容時請三思。
不要使用圖像來表示文本
我們很少會控制字體在不同瀏覽器中的顯示方式，與字體不同的是，圖像總是精確地按照其設計方式來顯示。但這不能當作使用圖像來表示文本的借口。
使用圖像表示文本的最常見示例就是在導航欄中。美觀的按鈕更加具有吸引力，但是它們的加載速度很慢。此外，圖像仍然不能由搜索引擎直接索引，因此，使用圖像進行導航不利于搜索引擎優(yōu)化（search engine optimization，SEO）。當無需圖像就可以通過大量 CSS 技巧創(chuàng)建漂亮的按鈕時，絕不使用圖像來表示文本。
一種適用于 CSS 樣式的特定導航類型就是選項卡式導航，如 圖 3 所示。
圖 3. 選項卡式導航
除了體積較小之外，這種實現(xiàn)導航的方式也更加符合 Web 標準。
|
|
遵循統(tǒng)稱為 Web 標準 的一組最佳實踐的網(wǎng)站具有精簡性、可訪問性、搜索引擎友好性、適用性和基于 CSS 的特征。 | |
清單 1 和 清單 2 中的代碼以純 CSS/XHTML 的形式實現(xiàn)基于選項卡的導航功能。
清單 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 |
