引言
不是全部人都可以使用高速 Internet 鏈接。即便每一個人都可以使用高速網絡，也會由於各類各樣的緣由使您的 Web 應用程序看起來運行緩慢。在這個寬帶速度不斷提升的時代，您應當關注一下頁面加載時間。將珍貴的頁面加載時間縮短几秒，將更加珍貴的請求和響應時間縮短几 毫秒。您將爲訪問者創造一種更好的體驗。
閱讀完本文以後，您將可以較好地瞭解網頁加載時間優化的基本知識。您還可以使用工具和知識更好地識別和判斷加載緩慢的頁面部分和瓶頸。
先決條件
在 理想狀況下，您應該安裝了 Mozilla Firefox。您還應該大致瞭解 Web 開發。本文涉及的主題並不複雜，可是若是您瞭解超文本標記語言（Hypertext Markup Language，HTML）、層疊樣式表（Cascading Style Sheet，CSS）以及 ™ 編程語言等主題，那麼在學習本文時將更加駕輕就熟。不須要使用集成開發環境（IDE），只需使用您喜好的編輯器。
您必須在瀏覽器中啓用了 JavaScript。另外，要學習與 Firebug 和 YSlow 相關的內容，您須要安裝 Firefox Web 瀏覽器。
假設您沒有寬帶
許多人經過某種形式的寬帶鏈接訪問 Internet，這些形式多是 DSL、網線、光纖或其餘方法。可是，沒法使用這類技術的用戶不得不使用撥號鏈接。您必定已經忘記撥號上網是什麼感受了，但您能夠試着回想一下網頁逐行加載時的情形。
幸 運的是，這些可憐的人們如今已經可以得到一些幫助。您能夠經過縮短加載頁面的時間來改善他們的體驗。可是，撥號鏈接並非下降加載和響應速度的唯一緣由。 許多 Web 設計人員錯誤地認爲高速 Internet 鏈接的到來會使網站性能優化變得沒有必要。這種觀點是不對的。例如，過去使用桌面軟件執行的許多任務如今能夠在線執行。在 Web 應用程序中得到像桌面軟件那樣的高速響應體驗很是困難，所以性能優化很是重要。幸運的是，一些工具和最佳實踐可用於縮短響應和加載時間，提供更加流暢的體 驗。
基本工具
對於全部與優化相關的任務，您必須使用工具來診斷瓶頸和識別問題。如今在 Web 開發中使用最普遍的兩個工具是 Firebug 和 YSlow，它們都是開源、免費的 Firefox 插件。
Firebug
Firebug（參見 參考資料）是最流行的 Firefox 擴展之一，該應用程序可以使 Web 開發人員的工做更加輕鬆。它包含許多很是有用的功能，好比：
JavaScript 調試
JavaScript 命令行
監視 JavaScript 性能和跟蹤 XmlHttpRequests
登陸 Firebug 控制檯
跟蹤
檢查 HTML 元素和動態編輯 HTML 代碼
動態編輯 CSS 文檔javascript
YSlow
YSlow（參見 參考資料）分析網頁，並根據 Yahoo! 起草的高性能網站規則（參見 參考），告訴您網頁加載緩慢的緣由。YSlow 是一個與 Firebug 集成的 Firefox 插件，所以您須要首先安裝 Firebug，而後才能安裝和使用 YSlow。php
安裝 Firebug
兩個 Firefox 擴展的安裝過程都很是簡單。要安裝 Firebug，執行如下步驟：css
- 打開 Firefox，轉到 Firebug 主頁。
- 安裝最新版的 Firebug。
- 若是 Firefox 配置爲阻止彈出窗口，單擊 Allow 容許打開安裝窗口。不然，單擊 Install Now。
- 重啓 Firefox。
您如今能夠從 Tools 菜單訪問 Firebug。能夠在新窗口或現有窗口中打開 Firebug（參見 圖 1）。
html
安裝 YSlow
安裝 Firebug 以後，接下來安裝 YSlow。爲此，執行如下步驟：
1.打開 Firefox，而後轉到 YSlow 主頁。
2.安裝插件，而後重啓 Firefox。注意：與許多其餘 Firefox 擴展不一樣，YSlow 不會自動啓動。必須首先激活它。
3.要激活 YSlow，在狀態欄右鍵單擊其圖標，而後單擊 Autorun。
圖 2 顯示了 YSlow 性能分析的結果。
圖 2. Firefox 起始頁的 YSlow 性能分析java
常識：牢記設計規則web
使人驚訝的是簡單的設計規則一般會被忽視，最終產生未經優化的、下載緩慢的網頁。牢記如下規則，頁面的加載速度將會更快。算法
使用良好的結構
可擴展 HTML (XHTML) 具備許多優點，可是其缺點也很明顯。XHTML 可能使您的頁面更加符合標準，可是它大量使用標記（強制性的 <start>和 <end> 標記），這意味着瀏覽器要下載更多代碼。因此，事情都有兩面性，嘗試在您的網頁中使用較少的 XHTML 代碼，以減少頁面大小。數據庫
若是您確實不得不使用 XHTML，試着儘量對它進行優化。例如，刪除空格並採用嚴格的 XHTML 編碼實踐，提升下載和解析速度。要嚴格執行 XHTML Strict 規則，向文檔中添加如下 doctype 語句：編程
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Strict 與 Strict HTML 4.01 是等效的，包含的屬性和元素沒有出如今 HTML 4.01 規範的反對內容中。記住，有兩個標記可以在 XHTML Transitional 中使用，但不能在 XHTML Strict 中使用，例如：api
<center>
<font>
<iframe>
<strike>
<u>
不要使佈局超載
在博客（和新的站點）流行起來以前，讓頁面水平滾動甚至垂直滾動被認爲是糟糕的實踐。頁面越小，越難以（但並非不可能）無缺地填充屏幕。如今，對 於博客和內容驅動的網站，不時能夠看到幾百 Kb 大小的長頁面。是的，您須要填充更多空間，可是這並不意味着您必須使用大的背景圖像、大量表格或者許多內容來填充。堅持簡約原則：少便是多。頁面中充斥着 各類類型的圖像、視頻、廣告等，這大大違背實用性原則，所以，在增長頁面的內容時請三思。
不要使用圖像來表示文本
咱們不多會控制字體在不一樣瀏覽器中的顯示方式，與字體不一樣的是，圖像老是精確地按照其設計方式來顯示。但這不能看成使用圖像來表示文本的藉口。
使用圖像表示文本的最多見示例就是在導航欄中。美觀的按鈕更加具備吸引力，可是它們的加載速度很慢。此外，圖像仍然不能由搜索引擎直接索引，所以， 使用圖像進行導航不利於搜索引擎優化（search engine optimization，SEO）。當無需圖像就能夠經過大量 CSS 技巧建立漂亮的按鈕時，毫不使用圖像來表示文本。
一種適用於 CSS 樣式的特定導航類型就是選項卡式導航，如 圖 3 所示。
圖 3. 選項卡式導航
除了體積較小以外，這種實現導航的方式也更加符合 Web 標準。
清單 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;
}
清單 2. 基於選項卡導航的 HTML 代碼
<div id="nav">
<ul>
<li><a href="#" title="Link 1"><span>Link 1</span></a></li>
<li><a href="#" title="Link 2"><span>Link 2</span></a></li>
<li><a href="#" title="Link 3"><span>Link 3</span></a></li>
<li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
<li><a href="#" title="Link 5"><span>Link 5</span></a></li>
</ul>
</div>
檢查 cookie 使用狀況
cookie 多是很小的文件，可是瀏覽器仍然須要下載它們。較大的 cookie 所需的下載時間更長，進而增長了瀏覽器加載網頁的時間。正由於如此，儘量縮小 cookie 來最小化對瀏覽器響應時間的影響很是重要。
此外，設置一個較早的 expire 日期或者根本不設置 expire 日期，會縮短響應時間。要在 PHP 語言中設置 cookie 的 expire 日期，使用如下代碼：
<?php
$expire = 2592000 + time();
// Add 30 day’s to the current time
setcookie(userid, 「123rrw3」, $expire);
?>
這段代碼設置 cookie userid，並將 expire 日期設置爲自當前日期以後 30 天。
不要包含沒必要要的 JavaScript 代碼，儘量將其外部化
與 cookie 相似，JavaScript 文件的下載也須要時間，這不可避免地會下降整個頁面的加載速度。所以，明智地使用 JavaScript（僅在真正必要時才使用）並優化腳本的大小和速度。
縮短 JavaScript 下載時間的另外一種方式是使用外部文件，而不是包含腳本內聯。這種方法也適用於 CSS，由於瀏覽器會緩存外部化的文本，而（在 HTML 頁面自身中）之內聯方式編碼的 CSS 或 JavaScript 每次都會隨 HTML 一塊兒加載。要經過在 HTML 中引用 CSS 和 JavaScript 代碼來外部化它們，可使用具備如下形式的代碼：
<link href="/stylesheets/myStyle.css" media="all" rel="Stylesheet" type="text/css" />
<script src="/javascripts/myJavascript.js" type="text/javascript"></script>
儘量避免使用表格
表格被用做網頁的主要構建塊，可是做爲頁面佈局元素，使用表格如今被認爲是糟糕的作 法。有時候，您必須使用表格（而且它們被認爲是顯示錶格數據的出色實踐）。若是是這樣，明確地指定表格單元格、行和列的寬度和高度，不然，瀏覽器必須執行 許多操做來計算如何顯示它們，這會下降頁面加載速度：
<td width="50px" height="10px">...</td>
刪除任何沒必要要的元素
可能這是全部技巧中最顯而易見的一個，可是它也是最容易忘記的一個技巧。我曾經提到過 「少便是多」：這不只是爲了真正吸引更普遍的用戶，還意味着須要下載和處理的東西更少。若是您真正須要在網頁上放置許多內容，考慮將網頁分爲 2 個、3 個或更多的獨立頁面。
一些優化網頁的技巧
可使用許多方法來優化您的網頁，包括壓縮 JavaScript 文件，使用超文本傳輸協議（Hypertext Transfer Protocol，HTTP）壓縮，以及設置圖像大小。
壓縮和縮小 JavaScript 文件
JavaScript 文件可能很是大，這意味着在某些情形中，它們的下載時間可能比全部其餘組件下載時間之和還長。解決此問題的一種方法是壓縮 JavaScript 文件。您可使用 GNU zip (gzip) 來完成此任務，由於許多瀏覽器都支持這種壓縮算法。
另外一種替代方法是縮小文件。這種方法刪除代碼中全部沒必要要的字符，好比製表符（tab）、新行和空格。它刪除代碼中的註釋和空白，進一步縮小文件大小。外部和內部樣式表均可以縮小。兩種最流行的縮小工具是 JSMin 和 YUI Compressor（參見 參考資料）。
使用 HTTP 壓縮，並始終使用小寫的 div 和類名
可 以使用 HTTP 壓縮來減小服務器與瀏覽器之間的通訊量。能夠在 Apache 中配置 HTTP 壓縮（.htaccess 文件），或者能夠將其包含到頁面中（對於 PHP，可使用一個 HTTP_ACCEPT_ENCODING 選項）。可是請注意：不是全部瀏覽器都支持壓縮。即便是支持壓縮的瀏覽器，壓縮和解壓縮都會加劇處理器的負載。要在 Apache 中啓用地毯式（blanket）壓縮（即壓縮全部文本和 HTML），使用如下命令：
AddOutputFilterByType DEFLATE text/html text/plain text/xml
另外，考慮一下您想要壓縮的內容。圖像、音樂和視頻在建立時已經進行了壓縮，所以您能夠將壓縮對象限制爲 HTML、CSS 和 JavaScript 文件。
另外一種減小壓縮工做的技巧是使用小寫形式的 <div> 元素和類名。因爲大小寫敏感性，而且使用的是無損壓縮，<header> 與 <Header> 不一樣，它們被壓縮爲兩個不一樣的標記。在下面的例子中，對於壓縮程序來講，Important 類與 important 類是不一樣的，這意味着對於壓縮程序，它們表示不一樣的對象，所以被分別壓縮爲兩段不一樣的文本。
<div>read this!</div>
<div>This will cost you some valuable load time</div>
留意細節彷佛可有可無。可是當您優化文件時，全部細微的細節都應考慮在內。
設置圖像大小
與表格單元格、行和列同樣，當您未明確設置圖像大小時，瀏覽器須要執行計算來顯示圖像，這會下降處理速度。此外，在某些情形下，圖像大小的計算結果可能不正確，所以圖像會發生變形。
將 CSS 圖像映射用於裝飾功能
使用圖像映射代替多個圖像，這是另外一種縮短加載時間的方式，由於同時下載圖像的各個獨立部分可以加快整個頁面的下載進度。或者，您可使用某種名爲 CSS sprites 的工具（參見 參考資料）。CSS sprites 可幫助減小 HTTP 請求的數量。一個圖像能夠包含裝飾或佈置頁面所需的全部圖像元素。您使用 CSS 來選擇（經過調用某些位置和維度）用於特定元素的映射。
儘量延遲腳本加載
我 在前面 提到過，移除徹底不須要的 JavaScript 代碼可以加快加載和處理速度。可是若是代碼已經很是精簡而且必須在頁面中包含 JavaScript 代碼的話，該怎麼辦？
在這種情形下，一種提高頁面下載速度的潛在方式是將腳本放在頁面的底部，使頁面加載更迅速。一般，瀏覽器只能（從同一個域）下載不超過兩個並行對 象，若是一個對象是一段 JavaScript 代碼，那麼在該腳本下載完以前，其餘頁面組件的下載將會暫停。若是將 JavaScript 代碼放在頁面底部，（在大多數狀況下）它將在最後下載，這時全部其餘組件都已下載完。
使用 Firebug 擴展跟蹤加載緩慢的文件，我敢打賭您的 JavaScript 文件是下載最慢的文件。壓縮 JavaScript 文件會有所幫助，可是僅僅這樣可能還不夠。您可使用如下代碼片斷延遲 JavaScript 的加載：
var delay = 5;
setTimeout("heavy();", delay * 1000);
這段代碼將對 heavy() 方法的調用延遲了 5 秒。您能夠將這段代碼與下面的技巧結合使用來延遲整個 JavaScript 文件的加載。
按需加載 JavaScript 文件
要按需加載 JavaScript，使用 import() 函數，如 清單 3 所示。
清單 3. import() 函數
function $import(src){
var scriptElem = document.createElement('script');
scriptElem.setAttribute('src',src);
scriptElem.setAttribute('type','text/javascript');
document.getElementsByTagName('head')[0].appendChild(scriptElem);
}</p> <p>// import with a random query parameter to avoid caching
function $importNoCache(src){
var ms = new Date().getTime().toString();
var seed = "?" + ms;
$import(src + seed);
}
驗證函數加載
也能夠驗證一個函數是否被加載，若是沒有，加載 JavaScript 文件。爲此，使用 清單 4 中的代碼。
清單 4. 驗證函數是否被加載
if (myfunction){
// The function has been loaded
}
else{ // Function has not been loaded yet, so load the javascript.
$import('http://www.yourfastsite.com/myfile.js');
}
注意：可使用 defer 屬性，但不是全部瀏覽器（包括 Firefox）都支持它。
優化 CSS 文件
若是通過適當優化和維護，CSS 文件不必定很大。例如，具備不少獨立類的 CSS 文件會影響下載速度。與 JavaScript 文件同樣，您須要優化 CSS 文件，使其包含所需的全部內容，同時保持合理的大小。另外，使用外部文件代替內聯定義來適應瀏覽器的緩存機制。
使用內容分佈網絡
內容分佈網絡（Content-distribution network，CDN）是另外一種縮短下載時間的好方法。當您將靜態圖像放在 Internet 上的許多服務器上時，用戶可以從離他們最近的服務器下載這些圖像。此外，大多數 CDN 都在快速服務器上運行，所以不管服務器的加載速度如何，其響應速度都比小型的超載服務器快。
對資產使用多個域來增長鏈接
CDN 的另外一個優點是它們是獨立的域。由於您的瀏覽器將併發鏈接的數量限制到一個單一的域，所以不管什麼時候加載一個頁面，都很容易佔滿全部線程。所以，到其餘資產 的鏈接被延遲了。然而，您的瀏覽器可以打開新線程或到其餘域的鏈接，這樣，從另外一個域加載的任何資產均可以與其餘全部資產同時加載。
在合適的時候使用 Google Gears
使用 Google Gears（參見 參考資料） 是避免用戶反覆下載同一內容的另外一種好方法。Gears 容許用戶離線訪問 Web 應用程序，可是也容許將頁面元素持久化到用戶的計算機上。所以，頻繁加載但未進行更新的內容能夠存儲在 Gears 數據庫中，該數據庫是一個 SQLite3 關係數據庫管理系統。對同一內容的全部 next 請求均可以從數據庫（而不是服務器）直接加載。
安裝 Gears 以後，獲取 gears_init.js 文件，以便輕鬆訪問 Gears 工廠和應用程序編程接口（API），將其保存爲 gears_init.js，經過如下方式在您的代碼中引用它：
<script type="text/javascript" src="gears_init.js"></script>
要肯定是否已安裝 Gears，使用 清單 5 中的代碼。
清單 5. 肯定是否已安裝 Gears
<script>
if (!window.google || !google.gears) {
location.href = "http://gears.google.com/?action=install&message=<welcome message>"
+ "&return=<return url>";
}
</script>
若是未安裝 Gears，代碼將向您提供下載 Gears 的 URL。
當全部元素都經過驗證而且 Gears 已安裝以後，您能夠測試 Gears 的極其有用的數據庫功能，使用 清單 6 中的 JavaScript 代碼。
清單 6. 測試數據庫功能
<script type="text/javascript">
var db = google.gears.factory.create('beta.db');
db.open('database-test');
db.execute('create table if not exists Test' +
' (Phrase text, Timestamp int)');
db.execute('insert into Test values (?, ?)', ['Monkey!', new Date().getTime()]);
var rs = db.execute('select * from Test order by Timestamp desc');</p> <p>while (rs.isValidRow()) {
alert(rs.field(0) + '@' + rs.field(1));
rs.next();
}
rs.close();
</script>
這段代碼在您的計算機或服務器上建立一個本地數據庫 db。若是表 Test 不存在，則建立一個，而後插入測試數據（Monkey! 和時間）。代碼從數據庫獲取數據，並在瀏覽器中以警告的形式呈現出來。
想像一下可能發生的結果！
使用 PNG 格式的圖像
Graphic Interchange Format (GIF) 和 Joint Photographic Experts Group (JPEG) 圖像格式都已過期了：Portable Network Graphic (PNG) 是將來流行的格式。固然，您能夠說 GIF 和 JPEG 已經消亡，或者 PNG 沒有任何缺陷，可是全部事物都有各自的優缺點，PNG 以最佳的文件大小提供了出色的質量。所以，若是進行選擇的話，應該儘量使用 PNG 圖像。
保持 Ajax 調用簡短、準確
當統稱爲 Asynchronous JavaScript + XML (Ajax) 的技術在兩年前出現時，這些技術爲處理頁面請求和響應提供了一種革命性方法。然而，撥號用戶可能歷來沒機會體驗其真正的優點，由於在許多情形下，Ajax 須要在瀏覽器與服務器之間大量通訊。所以，若是您可以保持 Ajax 調用簡短和準確，能夠避免用戶花費無止盡的時間來等待元素刷新或響應。
進行一次較大的 Ajax 調用並在本地處理客戶機數據
若是不能進行簡短的 Ajax 調用，或者若是這些調用不能提供指望的結果，能夠考慮一種替代方法：進行一次大的 Ajax 調用來獲取所需的一切內容，而後讓客戶機在本地處理數據。經過這種方式，客戶機只需等待一次（獲取傳入的數據），可是在此以後（當瀏覽器與服務器之間沒有 必要通訊時），處理速度將更快。固然，還有大量 Ajax 優化技術，本教程沒法一一列出。若是想要了解關於 Ajax 的更多信息，請查看 參考資料。
在沙箱中測試代碼
還有一個常常被遺忘的經常使用技巧。儘管清醒的 Web 開發人員一般會在啓動應用程序以前對其進行測試，可是有時候測試會使他們不那麼重視維護任務，或者新功能添加得太快，而且未通過充分考慮或測試。結果，餘下的腳本減緩了應用程序的速度。
如 果您添加一項新功能，能夠首先在沙箱裏（徹底脫離了應用程序的其他部分）進行測試，查看它做爲單個函數的行爲。經過這種方式，您能夠反覆檢查，並分析性能 和響應時間，無需考慮 Web 應用程序的其他部分。而後，當新功能的行爲符合預期時，能夠將其引入到應用程序的其他部分中，運行其餘測試，保證功能自己的行爲符合預期。
分析站點代碼
在許多場景中，自我檢討是一個不錯的建議。幸運的是，在開發過程當中，咱們可使用工具來幫助檢討，並儘量客觀地進行實踐。像 JSLint（參見 參考資源）這樣的工具的價值是沒法衡量的，儘管其站點宣稱它 「可能令您備受挫折」，由於它向您提供了全部的潛在代碼缺陷，這些缺陷不但使調試更加困難，並且可能致使更長的響應時間。
使用 JSLint 檢查 JavaScript 代碼中的錯誤或糟糕的編碼實踐
您不須要像完美主義者那樣追求天衣無縫的 JavaScript 代碼。可是，許多開發人員沒有認真對待代碼分析，一般在開發過程當中跳過了這個步驟。不幸的是，錯誤和糟糕的編碼實踐不只不太專業，並且可能減緩應用程序的 速度。當瀏覽器忙於應付錯誤和糟糕的編碼實踐時，加載不只須要更多時間，還會致使難以調試的錯誤。
所以，若是想要得到良好的代碼，能夠考慮使用代碼分析工具。有許多不一樣的工具可供使用，可是最適合 JavaScript 語言的工具非 JavaScript Lint 莫屬，它也叫作 JSLint（參見 參考資料）。也可使用 Firebug，可是 JSLint 更加正式，它包含在 YSlow 中。
檢查孤立的文件和丟失的圖像
檢查孤立的文件和丟失的圖像是一種明智之舉。大部分 Web 開發人員都會檢查錯誤的文件引用，可是這裏仍然須要說明一下。丟失的文件容易引發各類問題，由於它們會致使 「The image/page cannot be displayed」 之類的錯誤消息。可是在網頁速度優化方面，它們具備更大的缺陷：當瀏覽器尋找丟失的或孤立的文件時，它會消耗資源，這不可避免地會致使頁面處理速度變慢。 所以，請檢查孤立或丟失的文件，包括拼寫錯誤的文件名。
YSlow 擴展
YSlow Firebug 擴展使主觀的網頁分析日漸被淘汰。YSlow 使用 Yahoo! 起草的面向高性能網站的權威規則，分析網頁並告訴您它們變慢的緣由。
使用 YSlow 分析網頁
YSlow 是一個相對較小但很是有用的 Firefox 擴展。當啓動 YSlow 時，該擴展在瀏覽器的下半部分中打開，如 圖 4 所示。
圖 4. Firefox 中的 YSlow 擴展
圖 4 顯示了 Performance 視圖，能夠在其中看到 YSlow 如何評估您的網頁的性能，還可以看到該擴展檢測到的問題。單擊列表中的一個連接將打開一個頁面，其中解釋了相應的錯誤。若是存在能夠改進的頁面組件，YSlow 會給出改進建議。
在 Inspect 視圖中，如 圖 5 所示，您能夠逐一分析元素來剖析頁面。Inspect 視圖的一個最有用的功能是，當您在頁面上移動鼠標指針時，它會自動刷新，所以您無需經過滾動代碼內容來查找須要檢查的行。
圖 5. Firefox 中的 YSlow Inspect 視圖
從 Stats 視圖的名稱能夠猜想到，它（如 圖 6 所示）顯示與當前頁面有關的統計數據。這些數據包括空的和主要的緩存和 cookie。
圖 6. Firefox 中的 YSlow Stats 視圖
Components 視圖（如 圖 7 所示）列出了當前頁面上的組件。顯示的與每一個組件有關的數據包括文件類型和路徑、頁面過時時間以及 HTTP 響應報頭。單擊一個組件能夠將其打開，以供查看。單擊一個列標題能夠按升序或降序對錶進行排序。
圖 7. YSlow Components 視圖
YSlow 是一個較小的、有用的擴展，能夠在提升頁面加載速度方面爲您提供許多幫助。若是您之前未使用過它，那麼如今應該使用了。
結束語 優化網頁的加載速度並不複雜。實際上，您一般能夠垂手可得地實現速度優化。若是遵循本文中介紹的技巧以及 Web 開發最佳實踐，那麼無需採用其餘措施就能夠提升頁面的加載速度。 將 大量頁面優化技巧收集到一塊兒很簡單，我但願本文的資源具備必定的價值。可是，若是您認爲速度優化技巧只有這裏列出的這些，那麼您將驚奇地發現遠遠不止這 些。可是，即便您僅遵循這 20 多個技巧，您的頁面的加載速度也會更快，您的用戶也會更愜意 —— 不管他們經過撥號仍是專用的寬帶上網