溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“有哪些提高網(wǎng)頁(yè)加載速度的方法”，在日常操作中，相信很多人在有哪些提高網(wǎng)頁(yè)加載速度的方法問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”有哪些提高網(wǎng)頁(yè)加載速度的方法”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！
先決條件
在理想情況下，您應(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ú)法使用這類技術(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（參見(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?？梢栽谛麓翱诨颥F(xiàn)有窗口中打開(kāi) Firebug（參見(jiàn) 圖 1）。
安裝 YSlow
安裝 Firebug 之后，接下來(lái)安裝 YSlow。為此，執(zhí)行以下步驟：
1.打開(kāi) Firefox，然后轉(zhuǎn)到 YSlow 主頁(yè)。
2.安裝插件，然后重啟 Firefox。注意：與許多其他 Firefox 擴(kuò)展不同，YSlow 不會(huì)自動(dòng)啟動(dòng)。必須首先激活它。
3.要激活 YSlow，在狀態(tài)欄右鍵單擊其圖標(biāo)，然后單擊 Autorun。
圖 2 顯示了 YSlow 性能分析的結(jié)果。
圖 2. Firefox 起始頁(yè)的 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">
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è)面越小，越難以（但并不是不可能）完好地填充屏幕。現(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)三思。
不要使用圖像來(lái)表示文本
我們很少會(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 可能是很小的文件，但是瀏覽器仍然需要下載它們。較大的 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è)面。
一些優(yōu)化網(wǎng)頁(yè)的技巧
可以使用許多方法來(lái)優(yōu)化您的網(wǎng)頁(yè)，包括壓縮 JavaScript 文件，使用超文本傳輸協(xié)議（Hypertext Transfer Protocol，HTTP）壓縮，以及設(shè)置圖像大小。
壓縮和縮小 JavaScript 文件
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>read this!</div>
<div>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)。
設(shè)置圖像大小
與表格單元格、行和列一樣，當(dāng)您未明確設(shè)置圖像大小時(shí)，瀏覽器需要執(zhí)行計(jì)算來(lái)顯示圖像，這會(huì)降低處理速度。此外，在某些情形下，圖像大小的計(jì)算結(jié)果可能不正確，因此圖像會(huì)發(fā)生變形。
將 CSS 圖像映射用于裝飾功能
使用圖像映射代替多個(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 文件
要按需加載 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);
}</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);
}
驗(yàn)證函數(shù)加載
也可以驗(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）都支持它。
優(yōu)化 CSS 文件
如果經(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ò)
內(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í)加載。
在合適的時(shí)候使用 Google Gears
使用 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');</p>
<p>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é)果！
使用 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)稱為 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)宣稱它 “可能令您備受挫折”，因?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 擴(kuò)展
YSlow Firebug 擴(kuò)展使主觀的網(wǎng)頁(yè)分析日漸被淘汰。YSlow 使用 Yahoo! 起草的面向高性能網(wǎng)站的權(quán)威規(guī)則，分析網(wǎng)頁(yè)并告訴您它們變慢的原因。
使用 YSlow 分析網(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)該使用了。
到此，關(guān)于“有哪些提高網(wǎng)頁(yè)加載速度的方法”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼
