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