引言
不是所有人都能夠使用高速 Internet 連接。即使每個(gè)人都能夠使用高速網(wǎng)絡(luò)，也會(huì)因?yàn)楦鞣N各樣的原因使您的 Web 應(yīng)用程序看起來運(yùn)行緩慢。在這個(gè)寬帶速度不斷提高的時(shí)代，您應(yīng)當(dāng)關(guān)注一下頁面加載時(shí)間。將珍貴的頁面加載時(shí)間縮短幾秒，將更加珍貴的請(qǐng)求和響應(yīng)時(shí)間縮短幾毫秒。您將為訪問者創(chuàng)造一種更好的體驗(yàn)。

閱讀完本文之后，您將能夠較好地了解網(wǎng)頁加載時(shí)間優(yōu)化的基本知識(shí)。您還能夠使用工具和知識(shí)更好地識(shí)別和判斷加載緩慢的頁面部分和瓶頸。

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

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

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

幸運(yùn)的是，這些可憐的人們現(xiàn)在已經(jīng)能夠獲得一些幫助。您可以通過縮短加載頁面的時(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)。

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

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

JavaScript 調(diào)試

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

YSlow

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

安裝 Firebug

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

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

您現(xiàn)在可以從 Tools 菜單訪問 Firebug?？梢栽谛麓翱诨颥F(xiàn)有窗口中打開 Firebug（參見 圖 1）。




安裝 YSlow

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

1.打開 Firefox，然后轉(zhuǎn)到 YSlow 主頁。
2.安裝插件，然后重啟 Firefox。注意：與許多其他 Firefox 擴(kuò)展不同，YSlow 不會(huì)自動(dòng)啟動(dòng)。必須首先激活它。
3.要激活 YSlow，在狀態(tài)欄右鍵單擊其圖標(biāo)，然后單擊 Autorun。
圖 2 顯示了 YSlow 性能分析的結(jié)果。

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

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

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

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

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

XHTML 1.0 Strict 與 Strict HTML 4.01 是等效的，包含的屬性和元素沒有出現(xiàn)在 HTML 4.01 規(guī)范的反對(duì)內(nèi)容中。記住，有兩個(gè)標(biāo)記能夠在 XHTML Transitional 中使用，但不能在 XHTML Strict 中使用，例如：

<center>
<font>
<iframe>
<strike>
<u>

不要使布局超載

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

不要使用圖像來表示文本

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

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

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

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

清單 2. 基于選項(xiàng)卡導(dǎo)航的 HTML 代碼

檢查 cookie 使用情況
cookie 可能是很小的文件，但是瀏覽器仍然需要下載它們。較大的 cookie 所需的下載時(shí)間更長，進(jìn)而增加了瀏覽器加載網(wǎng)頁的時(shí)間。正因?yàn)槿绱耍M可能縮小 cookie 來最小化對(duì)瀏覽器響應(yīng)時(shí)間的影響非常重要。

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

這段代碼設(shè)置 cookie userid，并將 expire 日期設(shè)置為自當(dāng)前日期之后 30 天。

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

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

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

刪除任何不必要的元素

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

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

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

壓縮和縮小 JavaScript 文件

JavaScript 文件可能非常大，這意味著在某些情形中，它們的下載時(shí)間可能比所有其他組件下載時(shí)間之和還長。解決此問題的一種方法是壓縮 JavaScript 文件。您可以使用 GNU zip (gzip) 來完成此任務(wù)，因?yàn)樵S多瀏覽器都支持這種壓縮算法。

另一種替代方法是縮小文件。這種方法刪除代碼中所有不必要的字符，比如制表符（tab）、新行和空格。它刪除代碼中的注釋和空白，進(jìn)一步縮小文件大小。外部和內(nèi)部樣式表都可以縮小。兩種最流行的縮小工具是 JSMin 和 YUI Compressor（參見 參考資料）。

使用 HTTP 壓縮，并始終使用小寫的 div 和類名
可以使用 HTTP 壓縮來減少服務(wù)器與瀏覽器之間的通信量?？梢栽?Apache 中配置 HTTP 壓縮（.htaccess 文件），或者可以將其包含到頁面中（對(duì)于 PHP，可以使用一個(gè) HTTP_ACCEPT_ENCODING 選項(xiàng)）。但是請(qǐng)注意：不是所有瀏覽器都支持壓縮。即使是支持壓縮的瀏覽器，壓縮和解壓縮都會(huì)加重處理器的負(fù)載。要在 Apache 中啟用地毯式（blanket）壓縮（即壓縮所有文本和 HTML），使用以下命令：

另外，考慮一下您想要壓縮的內(nèi)容。圖像、音樂和視頻在創(chuàng)建時(shí)已經(jīng)進(jìn)行了壓縮，因此您可以將壓縮對(duì)象限制為 HTML、CSS 和 JavaScript 文件。

另一種減少壓縮工作的技巧是使用小寫形式的 <div> 元素和類名。由于大小寫敏感性，并且使用的是無損壓縮，<header> 與 <Header> 不同，它們被壓縮為兩個(gè)不同的標(biāo)記。在下面的例子中，對(duì)于壓縮程序來說，Important 類與 important 類是不同的，這意味著對(duì)于壓縮程序，它們表示不同的對(duì)象，因此被分別壓縮為兩段不同的文本。

留意細(xì)節(jié)似乎無關(guān)緊要。但是當(dāng)您優(yōu)化文件時(shí)，所有細(xì)微的細(xì)節(jié)都應(yīng)考慮在內(nèi)。

設(shè)置圖像大小
與表格單元格、行和列一樣，當(dāng)您未明確設(shè)置圖像大小時(shí)，瀏覽器需要執(zhí)行計(jì)算來顯示圖像，這會(huì)降低處理速度。此外，在某些情形下，圖像大小的計(jì)算結(jié)果可能不正確，因此圖像會(huì)發(fā)生變形。

將 CSS 圖像映射用于裝飾功能

使用圖像映射代替多個(gè)圖像，這是另一種縮短加載時(shí)間的方式，因?yàn)橥瑫r(shí)下載圖像的各個(gè)獨(dú)立部分能夠加快整個(gè)頁面的下載進(jìn)度。或者，您可以使用某種名為 CSS sprites 的工具（參見 參考資料）。CSS sprites 可幫助減少 HTTP 請(qǐng)求的數(shù)量。一個(gè)圖像可以包含裝飾或布置頁面所需的所有圖像元素。您使用 CSS 來選擇（通過調(diào)用某些位置和維度）用于特定元素的映射。

盡可能延遲腳本加載

我 在前面 提到過，移除完全不需要的 JavaScript 代碼能夠加快加載和處理速度。但是如果代碼已經(jīng)非常精簡并且必須在頁面中包含 JavaScript 代碼的話，該怎么辦？

在這種情形下，一種提升頁面下載速度的潛在方式是將腳本放在頁面的底部，使頁面加載更迅速。通常，瀏覽器只能（從同一個(gè)域）下載不超過兩個(gè)并行對(duì)象，如果一個(gè)對(duì)象是一段 JavaScript 代碼，那么在該腳本下載完之前，其他頁面組件的下載將會(huì)暫停。如果將 JavaScript 代碼放在頁面底部，（在大多數(shù)情況下）它將在最后下載，這時(shí)所有其他組件都已下載完。

使用 Firebug 擴(kuò)展跟蹤加載緩慢的文件，我敢打賭您的 JavaScript 文件是下載最慢的文件。壓縮 JavaScript 文件會(huì)有所幫助，但是僅僅這樣可能還不夠。您可以使用以下代碼片段延遲 JavaScript 的加載：

這段代碼將對(duì) heavy() 方法的調(diào)用延遲了 5 秒。您可以將這段代碼與下面的技巧結(jié)合使用來延遲整個(gè) JavaScript 文件的加載。

按需加載 JavaScript 文件
要按需加載 JavaScript，使用 import() 函數(shù)，如 清單 3 所示。

清單 3. import() 函數(shù)

驗(yàn)證函數(shù)加載
也可以驗(yàn)證一個(gè)函數(shù)是否被加載，如果沒有，加載 JavaScript 文件。為此，使用 清單 4 中的代碼。

清單 4. 驗(yàn)證函數(shù)是否被加載

注意：可以使用 defer 屬性，但不是所有瀏覽器（包括 Firefox）都支持它。

優(yōu)化 CSS 文件
如果經(jīng)過適當(dāng)優(yōu)化和維護(hù)，CSS 文件不一定很大。例如，具有很多獨(dú)立類的 CSS 文件會(huì)影響下載速度。與 JavaScript 文件一樣，您需要優(yōu)化 CSS 文件，使其包含所需的所有內(nèi)容，同時(shí)保持合理的大小。另外，使用外部文件代替內(nèi)聯(lián)定義來適應(yīng)瀏覽器的緩存機(jī)制。

使用內(nèi)容分布網(wǎng)絡(luò)
內(nèi)容分布網(wǎng)絡(luò)（Content-distribution network，CDN）是另一種縮短下載時(shí)間的好方法。當(dāng)您將靜態(tài)圖像放在 Internet 上的許多服務(wù)器上時(shí)，用戶能夠從離他們最近的服務(wù)器下載這些圖像。此外，大多數(shù) CDN 都在快速服務(wù)器上運(yùn)行，因此無論服務(wù)器的加載速度如何，其響應(yīng)速度都比小型的超載服務(wù)器快。

對(duì)資產(chǎn)使用多個(gè)域來增加連接
CDN 的另一個(gè)優(yōu)勢(shì)是它們是獨(dú)立的域。因?yàn)槟臑g覽器將并發(fā)連接的數(shù)量限制到一個(gè)單一的域，因此無論何時(shí)加載一個(gè)頁面，都很容易占滿所有線程。因此，到其他資產(chǎn)的連接被延遲了。然而，您的瀏覽器能夠打開新線程或到其他域的連接，這樣，從另一個(gè)域加載的任何資產(chǎn)都可以與其他所有資產(chǎn)同時(shí)加載。

在合適的時(shí)候使用 Google Gears

使用 Google Gears（參見 參考資料）是避免用戶反復(fù)下載同一內(nèi)容的另一種好方法。Gears 允許用戶離線訪問 Web 應(yīng)用程序，但是也允許將頁面元素持久化到用戶的計(jì)算機(jī)上。因此，頻繁加載但未進(jìn)行更新的內(nèi)容可以存儲(chǔ)在 Gears 數(shù)據(jù)庫中，該數(shù)據(jù)庫是一個(gè) SQLite3 關(guān)系數(shù)據(jù)庫管理系統(tǒng)。對(duì)同一內(nèi)容的所有 next 請(qǐng)求都可以從數(shù)據(jù)庫（而不是服務(wù)器）直接加載。

安裝 Gears 之后，獲取 gears_init.js 文件，以便輕松訪問 Gears 工廠和應(yīng)用程序編程接口（API），將其保存為 gears_init.js，通過以下方式在您的代碼中引用它：

要確定是否已安裝 Gears，使用 清單 5 中的代碼。

清單 5. 確定是否已安裝 Gears

如果未安裝 Gears，代碼將向您提供下載 Gears 的 URL。

當(dāng)所有元素都通過驗(yàn)證并且 Gears 已安裝之后，您可以測(cè)試 Gears 的極其有用的數(shù)據(jù)庫功能，使用 清單 6 中的 JavaScript 代碼。

清單 6. 測(cè)試數(shù)據(jù)庫功能

這段代碼在您的計(jì)算機(jī)或服務(wù)器上創(chuàng)建一個(gè)本地?cái)?shù)據(jù)庫 db。如果表 Test 不存在，則創(chuàng)建一個(gè)，然后插入測(cè)試數(shù)據(jù)（Monkey! 和時(shí)間）。代碼從數(shù)據(jù)庫獲取數(shù)據(jù)，并在瀏覽器中以警告的形式呈現(xiàn)出來。

想像一下可能發(fā)生的結(jié)果！

使用 PNG 格式的圖像
Graphic Interchange Format (GIF) 和 Joint Photographic Experts Group (JPEG) 圖像格式都已過時(shí)了：Portable Network Graphic (PNG) 是未來流行的格式。當(dāng)然，您可以說 GIF 和 JPEG 已經(jīng)消亡，或者 PNG 沒有任何缺陷，但是所有事物都有各自的優(yōu)缺點(diǎn)，PNG 以最佳的文件大小提供了出色的質(zhì)量。因此，如果進(jìn)行選擇的話，應(yīng)該盡可能使用 PNG 圖像。

保持 Ajax 調(diào)用簡短、準(zhǔn)確
當(dāng)統(tǒng)稱為 Asynchronous JavaScript + XML (Ajax) 的技術(shù)在兩年前出現(xiàn)時(shí)，這些技術(shù)為處理頁面請(qǐng)求和響應(yīng)提供了一種革命性方法。然而，撥號(hào)用戶可能從來沒機(jī)會(huì)體驗(yàn)其真正的優(yōu)勢(shì)，因?yàn)樵谠S多情形下，Ajax 需要在瀏覽器與服務(wù)器之間大量通信。因此，如果您能夠保持 Ajax 調(diào)用簡短和準(zhǔn)確，可以避免用戶花費(fèi)無止盡的時(shí)間來等待元素刷新或響應(yīng)。

進(jìn)行一次較大的 Ajax 調(diào)用并在本地處理客戶機(jī)數(shù)據(jù)

如果不能進(jìn)行簡短的 Ajax 調(diào)用，或者如果這些調(diào)用不能提供期望的結(jié)果，可以考慮一種替代方法：進(jìn)行一次大的 Ajax 調(diào)用來獲取所需的一切內(nèi)容，然后讓客戶機(jī)在本地處理數(shù)據(jù)。通過這種方式，客戶機(jī)只需等待一次（獲取傳入的數(shù)據(jù)），但是在此之后（當(dāng)瀏覽器與服務(wù)器之間沒有必要通信時(shí)），處理速度將更快。當(dāng)然，還有大量 Ajax 優(yōu)化技術(shù)，本教程無法一一列出。如果想要了解關(guān)于 Ajax 的更多信息，請(qǐng)查看 參考資料。

在沙箱中測(cè)試代碼
還有一個(gè)經(jīng)常被遺忘的常用技巧。盡管清醒的 Web 開發(fā)人員通常會(huì)在啟動(dòng)應(yīng)用程序之前對(duì)其進(jìn)行測(cè)試，但是有時(shí)候測(cè)試會(huì)使他們不那么重視維護(hù)任務(wù)，或者新功能添加得太快，并且未經(jīng)過充分考慮或測(cè)試。結(jié)果，余下的腳本減緩了應(yīng)用程序的速度。

如果您添加一項(xiàng)新功能，可以首先在沙箱里（完全脫離了應(yīng)用程序的其余部分）進(jìn)行測(cè)試，查看它作為單個(gè)函數(shù)的行為。通過這種方式，您可以反復(fù)檢查，并分析性能和響應(yīng)時(shí)間，無需考慮 Web 應(yīng)用程序的其余部分。然后，當(dāng)新功能的行為符合預(yù)期時(shí)，可以將其引入到應(yīng)用程序的其余部分中，運(yùn)行其他測(cè)試，保證功能本身的行為符合預(yù)期。

分析站點(diǎn)代碼

在許多場(chǎng)景中，自我反省是一個(gè)不錯(cuò)的建議。幸運(yùn)的是，在開發(fā)過程中，我們可以使用工具來幫助反省，并盡可能客觀地進(jìn)行實(shí)踐。像 JSLint（參見 參考資源）這樣的工具的價(jià)值是無法衡量的，盡管其站點(diǎn)宣稱它 “可能令您備受挫折”，因?yàn)樗蚰峁┝怂械臐撛诖a缺陷，這些缺陷不但使調(diào)試更加困難，而且可能導(dǎo)致更長的響應(yīng)時(shí)間。

使用 JSLint 檢查 JavaScript 代碼中的錯(cuò)誤或糟糕的編碼實(shí)踐

您不需要像完美主義者那樣追求完美無缺的 JavaScript 代碼。但是，許多開發(fā)人員沒有認(rèn)真對(duì)待代碼分析，通常在開發(fā)過程中跳過了這個(gè)步驟。不幸的是，錯(cuò)誤和糟糕的編碼實(shí)踐不僅不太專業(yè)，而且可能減緩應(yīng)用程序的速度。當(dāng)瀏覽器忙于應(yīng)付錯(cuò)誤和糟糕的編碼實(shí)踐時(shí)，加載不僅需要更多時(shí)間，還會(huì)導(dǎo)致難以調(diào)試的錯(cuò)誤。

因此，如果想要獲得良好的代碼，可以考慮使用代碼分析工具。有許多不同的工具可供使用，但是最適合 JavaScript 語言的工具非 JavaScript Lint 莫屬，它也叫做 JSLint（參見 參考資料）。也可以使用 Firebug，但是 JSLint 更加正式，它包含在 YSlow 中。

檢查孤立的文件和丟失的圖像
檢查孤立的文件和丟失的圖像是一種明智之舉。大部分 Web 開發(fā)人員都會(huì)檢查錯(cuò)誤的文件引用，但是這里仍然需要說明一下。丟失的文件容易引起各種問題，因?yàn)樗鼈儠?huì)導(dǎo)致 “The image/page cannot be displayed” 之類的錯(cuò)誤消息。但是在網(wǎng)頁速度優(yōu)化方面，它們具有更大的缺陷：當(dāng)瀏覽器尋找丟失的或孤立的文件時(shí)，它會(huì)消耗資源，這不可避免地會(huì)導(dǎo)致頁面處理速度變慢。因此，請(qǐng)檢查孤立或丟失的文件，包括拼寫錯(cuò)誤的文件名。

YSlow 擴(kuò)展
YSlow Firebug 擴(kuò)展使主觀的網(wǎng)頁分析日漸被淘汰。YSlow 使用 Yahoo! 起草的面向高性能網(wǎng)站的權(quán)威規(guī)則，分析網(wǎng)頁并告訴您它們變慢的原因。

使用 YSlow 分析網(wǎng)頁
YSlow 是一個(gè)相對(duì)較小但非常有用的 Firefox 擴(kuò)展。當(dāng)啟動(dòng) YSlow 時(shí)，該擴(kuò)展在瀏覽器的下半部分中打開，如 圖 4 所示。

圖 4. Firefox 中的 YSlow 擴(kuò)展





圖 4 顯示了 Performance 視圖，可以在其中看到 YSlow 如何評(píng)估您的網(wǎng)頁的性能，還能夠看到該擴(kuò)展檢測(cè)到的問題。單擊列表中的一個(gè)鏈接將打開一個(gè)頁面，其中解釋了相應(yīng)的錯(cuò)誤。如果存在可以改進(jìn)的頁面組件，YSlow 會(huì)給出改進(jìn)建議。

在 Inspect 視圖中，如 圖 5 所示，您可以逐一分析元素來剖析頁面。Inspect 視圖的一個(gè)最有用的功能是，當(dāng)您在頁面上移動(dòng)鼠標(biāo)指針時(shí)，它會(huì)自動(dòng)刷新，因此您無需通過滾動(dòng)代碼內(nèi)容來查找需要檢查的行。

圖 5. Firefox 中的 YSlow Inspect 視圖




從 Stats 視圖的名稱可以猜測(cè)到，它（如 圖 6 所示）顯示與當(dāng)前頁面有關(guān)的統(tǒng)計(jì)數(shù)據(jù)。這些數(shù)據(jù)包括空的和主要的緩存和 cookie。

圖 6. Firefox 中的 YSlow Stats 視圖




Components 視圖（如 圖 7 所示）列出了當(dāng)前頁面上的組件。顯示的與每個(gè)組件有關(guān)的數(shù)據(jù)包括文件類型和路徑、頁面過期時(shí)間以及 HTTP 響應(yīng)報(bào)頭。單擊一個(gè)組件可以將其打開，以供查看。單擊一個(gè)列標(biāo)題可以按升序或降序?qū)Ρ磉M(jìn)行排序。

圖 7. YSlow Components 視圖




YSlow 是一個(gè)較小的、有用的擴(kuò)展，可以在提高頁面加載速度方面為您提供許多幫助。如果您以前未使用過它，那么現(xiàn)在應(yīng)該使用了。

結(jié)束語
優(yōu)化網(wǎng)頁的加載速度并不復(fù)雜。實(shí)際上，您通?？梢暂p而易舉地實(shí)現(xiàn)速度優(yōu)化。如果遵循本文中介紹的技巧以及 Web 開發(fā)最佳實(shí)踐，那么無需采用其他措施就可以提高頁面的加載速度。

將大量頁面優(yōu)化技巧收集到一起很簡單，我希望本文的資源具有一定的價(jià)值。但是，如果您認(rèn)為速度優(yōu)化技巧只有這里列出的這些，那么您將驚奇地發(fā)現(xiàn)遠(yuǎn)遠(yuǎn)不止這些。但是，即使您僅遵循這 20 多個(gè)技巧，您的頁面的加載速度也會(huì)更快，您的用戶也會(huì)更愜意 —— 無論他們通過撥號(hào)還是專用的寬帶上網(wǎng)。

文章來自：developerworks