http://www.ibm.com/developerworks/cn/web/wa-speedweb/?S_TACT=105AGX52&S_CMP=tec-csdn
您希望加快網(wǎng)頁(yè)的加載速度嗎？了解如何通過(guò)縮短加載時(shí)間來(lái)改善撥號(hào)上網(wǎng)用戶的瀏覽體驗(yàn)，在某些情形下，加載時(shí)間最多可縮短 80%。
不是所有人都能夠使用高速 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 瀏覽器。
許多人通過(guò)某種形式的寬帶連接訪問(wèn) Internet，這些形式可能是 DSL、網(wǎng)線、光纖或其他方法。但是，無(wú)法使用這類技術(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)題?，F(xiàn)在在 Web 開(kāi)發(fā)中使用最廣泛的兩個(gè)工具是 Firebug 和 YSlow，它們都是開(kāi)源、免費(fèi)的 Firefox 插件。
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（參見(jiàn) 參考資料 ）分析網(wǎng)頁(yè)，并根據(jù) Yahoo! 起草的高性能網(wǎng)站規(guī)則（參見(jiàn) 參考 ），告訴您網(wǎng)頁(yè)加載緩慢的原因。YSlow 是一個(gè)與 Firebug 集成的 Firefox 插件，因此您需要首先安裝 Firebug，然后才能安裝和使用 YSlow。
兩個(gè) Firefox 擴(kuò)展的安裝過(guò)程都非常簡(jiǎn)單。要安裝 Firebug，執(zhí)行以下步驟：
- 打開(kāi) Firefox，轉(zhuǎn)到 Firebug 主頁(yè) 。
- 安裝最新版的 Firebug。
- 如果 Firefox 配置為阻止彈出窗口，單擊 Allow 允許打開(kāi)安裝窗口。否則，單擊 Install Now 。
- 重啟 Firefox。
您現(xiàn)在可以從 Tools 菜單訪問(wèn) Firebug。可以在新窗口或現(xiàn)有窗口中打開(kāi) Firebug（參見(jiàn) 圖 1 ）。
圖 1. Firefox 起始頁(yè)的 Firebug HTML 和 Style 視圖
|
|
安裝 Firebug 之后，接下來(lái)安裝 YSlow。為此，執(zhí)行以下步驟：
- 打開(kāi) Firefox，然后轉(zhuǎn)到 YSlow 主頁(yè) 。
-
安裝插件，然后重啟 Firefox。
注意： 與許多其他 Firefox 擴(kuò)展不同，YSlow 不會(huì)自動(dòng)啟動(dòng)。必須首先激活它。
- 要激活 YSlow，在狀態(tài)欄右鍵單擊其圖標(biāo)，然后單擊 Autorun 。
圖 2 顯示了 YSlow 性能分析的結(jié)果。
圖 2. Firefox 起始頁(yè)的 YSlow 性能分析
|
|
|
令人驚訝的是簡(jiǎn)單的設(shè)計(jì)規(guī)則通常會(huì)被忽視，最終產(chǎn)生未經(jīng)優(yōu)化的、下載緩慢的網(wǎng)頁(yè)。牢記以下規(guī)則，頁(yè)面的加載速度將會(huì)更快。
可擴(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">
|
XHTML 1.0 Strict 與 Strict HTML 4.01 是等效的，包含的屬性和元素沒(méi)有出現(xiàn)在 HTML 4.01 規(guī)范的反對(duì)內(nèi)容中。記住，有兩個(gè)標(biāo)記能夠在 XHTML Transitional 中使用，但不能在 XHTML Strict 中使用，例如：
-
<center> -
<font> -
<iframe> -
<strike> -
<u>
|
|
|
在博客（和新的站點(diǎn)）流行起來(lái)之前，讓頁(yè)面水平滾動(dòng)甚至垂直滾動(dòng)被認(rèn)為是糟糕的實(shí)踐。頁(yè)面越小，越難以（但并不是不可能）完好地填充屏幕?，F(xiàn)在，對(duì)于博客和內(nèi)容驅(qū)動(dòng)的網(wǎng)站，不時(shí)可以看到幾百 Kb 大小的長(zhǎng)頁(yè)面。是的，您需要填充更多空間，但是這并不意味著您必須使用大的背景圖像、大量表格或者許多內(nèi)容來(lái)填充。堅(jiān)持簡(jiǎn)約原則：少即是多。頁(yè)面中充斥著各種類型的圖像、視頻、廣告等，這大大違背實(shí)用性原則，因此，在增加頁(yè)面的內(nèi)容時(shí)請(qǐng)三思。
我們很少會(huì)控制字體在不同瀏覽器中的顯示方式，與字體不同的是，圖像總是精確地按照其設(shè)計(jì)方式來(lái)顯示。但這不能當(dāng)作使用圖像來(lái)表示文本的借口。
使用圖像表示文本的最常見(jiàn)示例就是在導(dǎo)航欄中。美觀的按鈕更加具有吸引力，但是它們的加載速度很慢。此外，圖像仍然不能由搜索引擎直接索引，因此，使用圖像進(jìn)行導(dǎo)航不利于搜索引擎優(yōu)化（search engine optimization，SEO）。當(dāng)無(wú)需圖像就可以通過(guò)大量 CSS 技巧創(chuàng)建漂亮的按鈕時(shí)，絕不使用圖像來(lái)表示文本。
一種適用于 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 文檔
#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. 基于選項(xiàng)卡導(dǎo)航的 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 所需的下載時(shí)間更長(zhǎng)，進(jìn)而增加了瀏覽器加載網(wǎng)頁(yè)的時(shí)間。正因?yàn)槿绱?，盡可能縮小 cookie 來(lái)最小化對(duì)瀏覽器響應(yīng)時(shí)間的影響非常重要。
此外，設(shè)置一個(gè)較早的
expire
日期或者根本不設(shè)置
expire
日期，會(huì)縮短響應(yīng)時(shí)間。要在 PHP 語(yǔ)言中設(shè)置 cookie 的
expire
日期，使用以下代碼：
<?php
$expire = 2592000 + time();
// Add 30 day’s to the current time
setcookie(userid, “123rrw3”, $expire);
?>
|
這段代碼設(shè)置 cookie
userid
，并將
expire
日期設(shè)置為自當(dāng)前日期之后 30 天。
|
|
|
不要包含不必要的 JavaScript 代碼，盡可能將其外部化
與 cookie 類似，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>
|
表格被用作網(wǎng)頁(yè)的主要構(gòu)建塊，但是作為頁(yè)面布局元素，使用表格現(xiàn)在被認(rèn)為是糟糕的做法。有時(shí)候，您必須使用表格（并且它們被認(rèn)為是顯示表格數(shù)據(jù)的出色實(shí)踐）。如果是這樣，明確地指定表格單元格、行和列的寬度和高度，否則，瀏覽器必須執(zhí)行許多操作來(lái)計(jì)算如何顯示它們，這會(huì)降低頁(yè)面加載速度：
<td width="50px" height="10px">...</td>
|
可能這是所有技巧中最顯而易見(jiàn)的一個(gè)，但是它也是最容易忘記的一個(gè)技巧。我曾經(jīng)提到過(guò) “少即是多”：這不僅是為了真正吸引更廣泛的用戶，還意味著需要下載和處理的東西更少。如果您真正需要在網(wǎng)頁(yè)上放置許多內(nèi)容，考慮將網(wǎng)頁(yè)分為 2 個(gè)、3 個(gè)或更多的獨(dú)立頁(yè)面。
可以使用許多方法來(lái)優(yōu)化您的網(wǎng)頁(yè)，包括壓縮 JavaScript 文件，使用超文本傳輸協(xié)議（Hypertext Transfer Protocol，HTTP）壓縮，以及設(shè)置圖像大小。
JavaScript 文件可能非常大，這意味著在某些情形中，它們的下載時(shí)間可能比所有其他組件下載時(shí)間之和還長(zhǎng)。解決此問(wèn)題的一種方法是壓縮 JavaScript 文件。您可以使用 GNU zip (gzip) 來(lái)完成此任務(wù)，因?yàn)樵S多瀏覽器都支持這種壓縮算法。
另一種替代方法是縮小文件。這種方法刪除代碼中所有不必要的字符，比如制表符（tab）、新行和空格。它刪除代碼中的注釋和空白，進(jìn)一步縮小文件大小。外部和內(nèi)部樣式表都可以縮小。兩種最流行的縮小工具是 JSMin 和 YUI Compressor（參見(jiàn) 參考資料 ）。
|
|
|
使用 HTTP 壓縮，并始終使用小寫(xiě)的 div 和類名
可以使用 HTTP 壓縮來(lái)減少服務(wù)器與瀏覽器之間的通信量?？梢栽?Apache 中配置 HTTP 壓縮（.htaccess 文件），或者可以將其包含到頁(yè)面中（對(duì)于 PHP，可以使用一個(gè)
HTTP_ACCEPT_ENCODING
選項(xiàng)）。但是請(qǐng)注意：不是所有瀏覽器都支持壓縮。即使是支持壓縮的瀏覽器，壓縮和解壓縮都會(huì)加重處理器的負(fù)載。要在 Apache 中啟用地毯式（blanket）壓縮（即壓縮所有文本和 HTML），使用以下命令：
AddOutputFilterByType DEFLATE text/html text/plain text/xml
|
另外，考慮一下您想要壓縮的內(nèi)容。圖像、音樂(lè)和視頻在創(chuàng)建時(shí)已經(jīng)進(jìn)行了壓縮，因此您可以將壓縮對(duì)象限制為 HTML、CSS 和 JavaScript 文件。
另一種減少壓縮工作的技巧是使用小寫(xiě)形式的
<div>
元素和類名。由于大小寫(xiě)敏感性，并且使用的是無(wú)損壓縮，
<header>
與
<Header>
不同，它們被壓縮為兩個(gè)不同的標(biāo)記。在下面的例子中，對(duì)于壓縮程序來(lái)說(shuō)，
Important
類與
important
類是不同的，這意味著對(duì)于壓縮程序，它們表示不同的對(duì)象，因此被分別壓縮為兩段不同的文本。
<div class="Important">read this!</div>
<div class="important">This will cost you some valuable load time</div>
|
留意細(xì)節(jié)似乎無(wú)關(guān)緊要。但是當(dāng)您優(yōu)化文件時(shí)，所有細(xì)微的細(xì)節(jié)都應(yīng)考慮在內(nèi)。
|
|
|
與表格單元格、行和列一樣，當(dāng)您未明確設(shè)置圖像大小時(shí)，瀏覽器需要執(zhí)行計(jì)算來(lái)顯示圖像，這會(huì)降低處理速度。此外，在某些情形下，圖像大小的計(jì)算結(jié)果可能不正確，因此圖像會(huì)發(fā)生變形。
使用圖像映射代替多個(gè)圖像，這是另一種縮短加載時(shí)間的方式，因?yàn)橥瑫r(shí)下載圖像的各個(gè)獨(dú)立部分能夠加快整個(gè)頁(yè)面的下載進(jìn)度?；蛘?，您可以使用某種名為 CSS sprites 的工具（參見(jiàn) 參考資料 ）。CSS sprites 可幫助減少 HTTP 請(qǐng)求的數(shù)量。一個(gè)圖像可以包含裝飾或布置頁(yè)面所需的所有圖像元素。您使用 CSS 來(lái)選擇（通過(guò)調(diào)用某些位置和維度）用于特定元素的映射。
|
|
|
我 在前面 提到過(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);
|
這段代碼將對(duì)
heavy()
方法的調(diào)用延遲了 5 秒。您可以將這段代碼與下面的技巧結(jié)合使用來(lái)延遲整個(gè) JavaScript 文件的加載。
要按需加載 JavaScript，使用 import() 函數(shù)，如 清單 3 所示。
清單 3. import() 函數(shù)
function $import(src){
var scriptElem = document.createElement('script');
scriptElem.setAttribute('src',src);
scriptElem.setAttribute('type','text/javascript');
document.getElementsByTagName('head')[0].appendChild(scriptElem);
}
// import with a random query parameter to avoid caching
function $importNoCache(src){
var ms = new Date().getTime().toString();
var seed = "?" + ms;
$import(src + seed);
}
|
也可以驗(yàn)證一個(gè)函數(shù)是否被加載，如果沒(méi)有，加載 JavaScript 文件。為此，使用 清單 4 中的代碼。
清單 4. 驗(yàn)證函數(shù)是否被加載
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）都支持它。
|
|
|
如果經(jīng)過(guò)適當(dāng)優(yōu)化和維護(hù)，CSS 文件不一定很大。例如，具有很多獨(dú)立類的 CSS 文件會(huì)影響下載速度。與 JavaScript 文件一樣，您需要優(yōu)化 CSS 文件，使其包含所需的所有內(nèi)容，同時(shí)保持合理的大小。另外，使用外部文件代替內(nèi)聯(lián)定義來(lái)適應(yīng)瀏覽器的緩存機(jī)制。
|
|
|
內(nèi)容分布網(wǎng)絡(luò)（Content-distribution network，CDN）是另一種縮短下載時(shí)間的好方法。當(dāng)您將靜態(tài)圖像放在 Internet 上的許多服務(wù)器上時(shí)，用戶能夠從離他們最近的服務(wù)器下載這些圖像。此外，大多數(shù) CDN 都在快速服務(wù)器上運(yùn)行，因此無(wú)論服務(wù)器的加載速度如何，其響應(yīng)速度都比小型的超載服務(wù)器快。
對(duì)資產(chǎn)使用多個(gè)域來(lái)增加連接
CDN 的另一個(gè)優(yōu)勢(shì)是它們是獨(dú)立的域。因?yàn)槟臑g覽器將并發(fā)連接的數(shù)量限制到一個(gè)單一的域，因此無(wú)論何時(shí)加載一個(gè)頁(yè)面，都很容易占滿所有線程。因此，到其他資產(chǎn)的連接被延遲了。然而，您的瀏覽器能夠打開(kāi)新線程或到其他域的連接，這樣，從另一個(gè)域加載的任何資產(chǎn)都可以與其他所有資產(chǎn)同時(shí)加載。
|
|
|
使用 Google Gears（參見(jiàn)
參考資料
）是避免用戶反復(fù)下載同一內(nèi)容的另一種好方法。Gears 允許用戶離線訪問(wèn) Web 應(yīng)用程序，但是也允許將頁(yè)面元素持久化到用戶的計(jì)算機(jī)上。因此，頻繁加載但未進(jìn)行更新的內(nèi)容可以存儲(chǔ)在 Gears 數(shù)據(jù)庫(kù)中，該數(shù)據(jù)庫(kù)是一個(gè) SQLite3 關(guān)系數(shù)據(jù)庫(kù)管理系統(tǒng)。對(duì)同一內(nèi)容的所有
next
請(qǐng)求都可以從數(shù)據(jù)庫(kù)（而不是服務(wù)器）直接加載。
安裝 Gears 之后，獲取 gears_init.js 文件，以便輕松訪問(wèn) Gears 工廠和應(yīng)用程序編程接口（API） ，將其保存為 gears_init.js ，通過(guò)以下方式在您的代碼中引用它：
<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。
當(dāng)所有元素都通過(guò)驗(yàn)證并且 Gears 已安裝之后，您可以測(cè)試 Gears 的極其有用的數(shù)據(jù)庫(kù)功能，使用 清單 6 中的 JavaScript 代碼。
清單 6. 測(cè)試數(shù)據(jù)庫(kù)功能
<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');
while (rs.isValidRow()) {
alert(rs.field(0) + '@' + rs.field(1));
rs.next();
}
rs.close();
</script>
|
這段代碼在您的計(jì)算機(jī)或服務(wù)器上創(chuàng)建一個(gè)本地?cái)?shù)據(jù)庫(kù) db。 如果表 Test 不存在，則創(chuàng)建一個(gè)，然后插入測(cè)試數(shù)據(jù)（ Monkey! 和時(shí)間）。代碼從數(shù)據(jù)庫(kù)獲取數(shù)據(jù)，并在瀏覽器中以警告的形式呈現(xiàn)出來(lái)。
想像一下可能發(fā)生的結(jié)果！
|
|
|
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)稱為 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)查看 參考資料 。
還有一個(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ù)期。
|
|
|
在許多場(chǎng)景中，自我反省是一個(gè)不錯(cuò)的建議。幸運(yùn)的是，在開(kāi)發(fā)過(guò)程中，我們可以使用工具來(lái)幫助反省，并盡可能客觀地進(jìn)行實(shí)踐。像 JSLint（參見(jiàn) 參考資源 ）這樣的工具的價(jià)值是無(wú)法衡量的，盡管其站點(diǎn)宣稱它 “可能令您備受挫折”，因?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í)踐不僅不太專業(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” 之類的錯(cuò)誤消息。但是在網(wǎng)頁(yè)速度優(yōu)化方面，它們具有更大的缺陷：當(dāng)瀏覽器尋找丟失的或孤立的文件時(shí)，它會(huì)消耗資源，這不可避免地會(huì)導(dǎo)致頁(yè)面處理速度變慢。因此，請(qǐng)檢查孤立或丟失的文件，包括拼寫(xiě)錯(cuò)誤的文件名。
|
|
|
YSlow Firebug 擴(kuò)展使主觀的網(wǎng)頁(yè)分析日漸被淘汰。YSlow 使用 Yahoo! 起草的面向高性能網(wǎng)站的權(quán)威規(guī)則，分析網(wǎng)頁(yè)并告訴您它們變慢的原因。
|
|
|
YSlow 是一個(gè)相對(duì)較小但非常有用的 Firefox 擴(kuò)展。當(dāng)啟動(dòng) YSlow 時(shí)，該擴(kuò)展在瀏覽器的下半部分中打開(kāi)，如 圖 4 所示。
圖 4. Firefox 中的 YSlow 擴(kuò)展
圖 4 顯示了 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 視圖中，如 圖 5 所示，您可以逐一分析元素來(lái)剖析頁(yè)面。Inspect 視圖的一個(gè)最有用的功能是，當(dāng)您在頁(yè)面上移動(dòng)鼠標(biāo)指針時(shí)，它會(huì)自動(dòng)刷新，因此您無(wú)需通過(guò)滾動(dòng)代碼內(nèi)容來(lái)查找需要檢查的行。
圖 5. Firefox 中的 YSlow Inspect 視圖
從 Stats 視圖的名稱可以猜測(cè)到，它（如 圖 6 所示）顯示與當(dāng)前頁(yè)面有關(guān)的統(tǒng)計(jì)數(shù)據(jù)。這些數(shù)據(jù)包括空的和主要的緩存和 cookie。
圖 6. Firefox 中的 YSlow Stats 視圖
Components 視圖（如 圖 7 所示）列出了當(dāng)前頁(yè)面上的組件。顯示的與每個(gè)組件有關(guān)的數(shù)據(jù)包括文件類型和路徑、頁(yè)面過(guò)期時(shí)間以及 HTTP 響應(yīng)報(bào)頭。單擊一個(gè)組件可以將其打開(kāi)，以供查看。單擊一個(gè)列標(biāo)題可以按升序或降序?qū)Ρ磉M(jìn)行排序。
圖 7. YSlow Components 視圖
YSlow 是一個(gè)較小的、有用的擴(kuò)展，可以在提高頁(yè)面加載速度方面為您提供許多幫助。如果您以前未使用過(guò)它，那么現(xiàn)在應(yīng)該使用了。
|
|
|
優(yōu)化網(wǎng)頁(yè)的加載速度并不復(fù)雜。實(shí)際上，您通?？梢暂p而易舉地實(shí)現(xiàn)速度優(yōu)化。如果遵循本文中介紹的技巧以及 Web 開(kāi)發(fā)最佳實(shí)踐，那么無(wú)需采用其他措施就可以提高頁(yè)面的加載速度。
將大量頁(yè)面優(yōu)化技巧收集到一起很簡(jiǎn)單，我希望本文的資源具有一定的價(jià)值。但是，如果您認(rèn)為速度優(yōu)化技巧只有這里列出的這些，那么您將驚奇地發(fā)現(xiàn)遠(yuǎn)遠(yuǎn)不止這些。但是，即使您僅遵循這 20 多個(gè)技巧，您的頁(yè)面的加載速度也會(huì)更快，您的用戶也會(huì)更愜意 —— 無(wú)論他們通過(guò)撥號(hào)還是專用的寬帶上網(wǎng)。
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫(xiě)作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
