|
|
引言
不是所有人都能夠使用高速 InterNET 連接。即使每個人都能夠使用高速網(wǎng)絡(luò)，也會因?yàn)楦鞣N各樣的原因使您的 Web 應(yīng)用程序看起來運(yùn)行緩慢。在這個寬帶速度不斷提高的時代，您應(yīng)當(dāng)關(guān)注一下頁面加載時間。將珍貴的頁面加載時間縮短幾秒，將更加珍貴的請求和響應(yīng)時間縮短幾毫秒。您將為訪問者創(chuàng)造一種更好的體驗(yàn)。
閱讀完本文之后，您將能夠較好地了解網(wǎng)頁加載時間優(yōu)化的基本知識。您還能夠使用工具和知識更好地識別和判斷加載緩慢的頁面部分和瓶頸。
先決條件
在理想情況下，您應(yīng)該安裝了 Mozilla Firefox。您還應(yīng)該大體了解 Web 開發(fā)。本文涉及的主題并不復(fù)雜，但是如果您了解超文本標(biāo)記語言（Hypertext Markup Language，HTML）、層疊樣式表（Cascading Style Sheet，CSS）以及 ™ 編程語言等主題，那么在學(xué)習(xí)本文時將更加得心應(yīng)手。不需要使用集成開發(fā)環(huán)境（IDE），只需使用您喜愛的編輯器。
您必須在瀏覽器中啟用了 JavaScript。另外，要學(xué)習(xí)與 Firebug 和 YSlow 相關(guān)的內(nèi)容，您需要安裝 Firefox Web 瀏覽器。
假設(shè)您沒有寬帶
許多人通過某種形式的寬帶連接訪問 InterNET，這些形式可能是 DSL、網(wǎng)線、光纖或其他方法。但是，無法使用這類技術(shù)的用戶不得不使用撥號連接。您一定已經(jīng)忘記撥號上網(wǎng)是什么感覺了，但您可以試著回想一下網(wǎng)頁逐行加載時的情形。
幸運(yùn)的是，這些可憐的人們現(xiàn)在已經(jīng)能夠獲得一些幫助。您可以通過縮短加載頁面的時間來改善他們的體驗(yàn)。但是，撥號連接并不是降低加載和響應(yīng)速度的惟一原因。許多 Web 設(shè)計(jì)人員錯誤地認(rèn)為高速 InterNET 連接的到來會使網(wǎng)站性能優(yōu)化變得沒有必要。這種觀點(diǎn)是不對的。例如，過去使用桌面軟件執(zhí)行的許多任務(wù)現(xiàn)在可以在線執(zhí)行。在 Web 應(yīng)用程序中獲得像桌面軟件那樣的高速響應(yīng)體驗(yàn)非常困難，因此性能優(yōu)化非常重要。幸運(yùn)的是，一些工具和最佳實(shí)踐可用于縮短響應(yīng)和加載時間，提供更加流暢的體驗(yàn)。
基本工具
對于所有與優(yōu)化相關(guān)的任務(wù)，您必須使用工具來診斷瓶頸和識別問題。現(xiàn)在在 Web 開發(fā)中使用最廣泛的兩個工具是 Firebug 和 YSlow，它們都是開源、免費(fèi)的 Firefox 插件。
Firebug
Firebug（參見 參考資料）是最流行的 Firefox 擴(kuò)展之一，該應(yīng)用程序能夠使 Web 開發(fā)人員的工作更加輕松。它包含許多非常有用的功能，比如：
- JavaScript 調(diào)試
- JavaScript 命令行
- 監(jiān)視 JavaScript 性能和跟蹤 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。
常識：牢記設(shè)計(jì)規(guī)則
令人驚訝的是簡單的設(shè)計(jì)規(guī)則通常會被忽視，最終產(chǎn)生未經(jīng)優(yōu)化的、下載緩慢的網(wǎng)頁。牢記以下規(guī)則，頁面的加載速度將會更快。
使用良好的結(jié)構(gòu)
可擴(kuò)展 HTML (XHTML) 具有許多優(yōu)勢，但是其缺點(diǎn)也很明顯。XHTML 可能使您的頁面更加符合標(biāo)準(zhǔn)，但是它大量使用標(biāo)記（強(qiáng)制性的 <start> 和 <end> 標(biāo)記），這意味著瀏覽器要下載更多代碼。所以，事情都有兩面性，嘗試在您的網(wǎng)頁中使用較少的 XHTML 代碼，以減小頁面大小。
如果您確實(shí)不得不使用 XHTML，試著盡可能對它進(jìn)行優(yōu)化。例如，刪除空格并采用嚴(yán)格的 XHTML 編碼實(shí)踐，提高下載和解析速度。要嚴(yán)格執(zhí)行 XHTML Strict 規(guī)則，向文檔中添加以下 doctype 語句：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
檢查 cookie 使用情況
cookie 可能是很小的文件，但是瀏覽器仍然需要下載它們。較大的 cookie 所需的下載時間更長，進(jìn)而增加了瀏覽器加載網(wǎng)頁的時間。正因?yàn)槿绱耍M可能縮小 cookie 來最小化對瀏覽器響應(yīng)時間的影響非常重要。
此外，設(shè)置一個較早的 expire 日期或者根本不設(shè)置 expire 日期，會縮短響應(yīng)時間。
不要包含不必要的 JavaScript 代碼，盡可能將其外部化
與 cookie 類似，JavaScript 文件的下載也需要時間，這不可避免地會降低整個頁面的加載速度。因此，明智地使用 JavaScript（僅在真正必要時才使用）并優(yōu)化腳本的大小和速度。
縮短 JavaScript 下載時間的另一種方式是使用外部文件，而不是包含腳本內(nèi)聯(lián)。這種方法也適用于 CSS，因?yàn)闉g覽器會緩存外部化的文本，而（在 HTML 頁面自身中）以內(nèi)聯(lián)方式編碼的 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>
盡可能延遲腳本加載
我 在前面 提到過，移除完全不需要的 JavaScript 代碼能夠加快加載和處理速度。但是如果代碼已經(jīng)非常精簡并且必須在頁面中包含 JavaScript 代碼的話，該怎么辦？
在這種情形下，一種提升頁面下載速度的潛在方式是將腳本放在頁面的底部，使頁面加載更迅速。通常，瀏覽器只能（從同一個域）下載不超過兩個并行對象，如果一個對象是一段 JavaScript 代碼，那么在該腳本下載完之前，其他頁面組件的下載將會暫停。如果將 JavaScript 代碼放在頁面底部，（在大多數(shù)情況下）它將在最后下載，這時所有其他組件都已下載完。
使用 Firebug 擴(kuò)展跟蹤加載緩慢的文件，我敢打賭您的 JavaScript 文件是下載最慢的文件。壓縮 JavaScript 文件會有所幫助，但是僅僅這樣可能還不夠。您可以使用以下代碼片段延遲 JavaScript 的加載：
var delay = 5;
setTimeout("heavy();", delay * 1000);
使用 PNG 格式的圖像
Graphic Interchange Format (GIF) 和 Joint Photographic Experts Group (JPEG) 圖像格式都已過時了：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ù)為處理頁面請求和響應(yīng)提供了一種革命性方法。然而，撥號用戶可能從來沒機(jī)會體驗(yàn)其真正的優(yōu)勢，因?yàn)樵谠S多情形下，Ajax 需要在瀏覽器與服務(wù)器之間大量通信。因此，如果您能夠保持 Ajax 調(diào)用簡短和準(zhǔn)確，可以避免用戶花費(fèi)無止盡的時間來等待元素刷新或響應(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ù)器之間沒有必要通信時），處理速度將更快。當(dāng)然，還有大量 Ajax 優(yōu)化技術(shù)，本教程無法一一列出。如果想要了解關(guān)于 Ajax 的更多信息，請查看 參考資料。
在沙箱中測試代碼
還有一個經(jīng)常被遺忘的常用技巧。盡管清醒的 Web 開發(fā)人員通常會在啟動應(yīng)用程序之前對其進(jìn)行測試，但是有時候測試會使他們不那么重視維護(hù)任務(wù)，或者新功能添加得太快，并且未經(jīng)過充分考慮或測試。結(jié)果，余下的腳本減緩了應(yīng)用程序的速度。
如果您添加一項(xiàng)新功能，可以首先在沙箱里（完全脫離了應(yīng)用程序的其余部分）進(jìn)行測試，查看它作為單個函數(shù)的行為。通過這種方式，您可以反復(fù)檢查，并分析性能和響應(yīng)時間，無需考慮 Web 應(yīng)用程序的其余部分。然后，當(dāng)新功能的行為符合預(yù)期時，可以將其引入到應(yīng)用程序的其余部分中，運(yùn)行其他測試，保證功能本身的行為符合預(yù)期。
分析站點(diǎn)代碼
在許多場景中，自我反省是一個不錯的建議。幸運(yùn)的是，在開發(fā)過程中，我們可以使用工具來幫助反省，并盡可能客觀地進(jìn)行實(shí)踐。像 JSLint（參見 參考資源）這樣的工具的價(jià)值是無法衡量的，盡管其站點(diǎn)宣稱它 “可能令您備受挫折”，因?yàn)樗蚰峁┝怂械臐撛诖a缺陷，這些缺陷不但使調(diào)試更加困難，而且可能導(dǎo)致更長的響應(yīng)時間。
使用 JSLint 檢查 JavaScript 代碼中的錯誤或糟糕的編碼實(shí)踐
您不需要像完美主義者那樣追求完美無缺的 JavaScript 代碼。但是，許多開發(fā)人員沒有認(rèn)真對待代碼分析，通常在開發(fā)過程中跳過了這個步驟。不幸的是，錯誤和糟糕的編碼實(shí)踐不僅不太專業(yè)，而且可能減緩應(yīng)用程序的速度。當(dāng)瀏覽器忙于應(yīng)付錯誤和糟糕的編碼實(shí)踐時，加載不僅需要更多時間，還會導(dǎo)致難以調(diào)試的錯誤。
因此，如果想要獲得良好的代碼，可以考慮使用代碼分析工具。有許多不同的工具可供使用，但是最適合 JavaScript 語言的工具非 JavaScript Lint 莫屬，它也叫做 JSLint（參見 參考資料）。也可以使用 Firebug，但是 JSLint 更加正式，它包含在 YSlow 中。
檢查孤立的文件和丟失的圖像
檢查孤立的文件和丟失的圖像是一種明智之舉。大部分 Web 開發(fā)人員都會檢查錯誤的文件引用，但是這里仍然需要說明一下。丟失的文件容易引起各種問題，因?yàn)樗鼈儠?dǎo)致 “The image/page cannot be displayed” 之類的錯誤消息。但是在網(wǎng)頁速度優(yōu)化方面，它們具有更大的缺陷：當(dāng)瀏覽器尋找丟失的或孤立的文件時，它會消耗資源，這不可避免地會導(dǎo)致頁面處理速度變慢。因此，請檢查孤立或丟失的文件，包括拼寫錯誤的文件名。
使用 YSlow 分析網(wǎng)頁
YSlow 是一個相對較小但非常有用的 Firefox 擴(kuò)展。當(dāng)啟動 YSlow 時，該擴(kuò)展在瀏覽器的下半部分中打開，如下所示。
圖 顯示了 Performance 視圖，可以在其中看到 YSlow 如何評估您的網(wǎng)頁的性能，還能夠看到該擴(kuò)展檢測到的問題。單擊列表中的一個鏈接將打開一個頁面，其中解釋了相應(yīng)的錯誤。如果存在可以改進(jìn)的頁面組件，YSlow 會給出改進(jìn)建議。
在 Inspect 視圖中，如 下面所示，您可以逐一分析元素來剖析頁面。Inspect 視圖的一個最有用的功能是，當(dāng)您在頁面上移動鼠標(biāo)指針時，它會自動刷新，因此您無需通過滾動代碼內(nèi)容來查找需要檢查的行。
從 Stats 視圖的名稱可以猜測到，它（如 下圖 所示）顯示與當(dāng)前頁面有關(guān)的統(tǒng)計(jì)數(shù)據(jù)。這些數(shù)據(jù)包括空的和主要的緩存和 cookie。
Components 視圖（如 圖 7 所示）列出了當(dāng)前頁面上的組件。顯示的與每個組件有關(guān)的數(shù)據(jù)包括文件類型和路徑、頁面過期時間以及 HTTP 響應(yīng)報(bào)頭。單擊一個組件可以將其打開，以供查看。單擊一個列標(biāo)題可以按升序或降序?qū)Ρ磉M(jìn)行排序。
YSlow 是一個較小的、有用的擴(kuò)展，可以在提高頁面加載速度方面為您提供許多幫助。如果您以前未使用過它，那么現(xiàn)在應(yīng)該使用了。
NET技術(shù)：20 種提升網(wǎng)頁速度的技巧，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
