很久沒(méi)寫(xiě)技術(shù)方面的東西，是因?yàn)樵谧隽艘欢螘r(shí)間的技術(shù)以后我越發(fā)發(fā)現(xiàn)，學(xué)什么技術(shù)或者技術(shù)應(yīng)該鉆研到什么層次真的不是最重要的，最重要的是解決問(wèn)題的方法和能力。所以以后如果再寫(xiě)技術(shù)類的文章，定要少些技術(shù)細(xì)節(jié)，多一些方法和思路，今天就給大家介紹幾個(gè)提高頁(yè)面裝載時(shí)間的方法，都是我在工作當(dāng)中實(shí)踐出來(lái)的經(jīng)驗(yàn)。

首先給大家列出幾個(gè)阻礙loadtime提高的因素，有不足的歡迎補(bǔ)充：
1、頁(yè)面大??；
2、頁(yè)面連接數(shù)；
3、服務(wù)器抗壓能力；
4、網(wǎng)絡(luò)狀況（包括帶寬和網(wǎng)段等因素）；

一、頁(yè)面大小
頁(yè)面大小是指頁(yè)面內(nèi)容的字節(jié)數(shù)。
在同等網(wǎng)絡(luò)環(huán)境下，頁(yè)面越小自然下載時(shí)間越快，所以在合理范圍內(nèi)減少頁(yè)面大小是可以優(yōu)化下載速度的。而頁(yè)面大小主要是由HTML的代碼量來(lái)決定的（當(dāng)然也可能包括一些css或者js的代碼，不過(guò)主體還是HTML代碼），要想減小頁(yè)面的大小，就得根據(jù)W3C的標(biāo)準(zhǔn)來(lái)優(yōu)化HTML代碼結(jié)構(gòu)，去除一些垃圾無(wú)意義的代碼，前2年轟轟烈烈的web重構(gòu)大致就是這個(gè)意思。如果你對(duì)web標(biāo)準(zhǔn)或者web重構(gòu)不了解，可以去google一下這方面的內(nèi)容，不過(guò)國(guó)內(nèi)很多學(xué)習(xí)者對(duì)web重構(gòu)的理解有偏差，單一地認(rèn)為是用div+css取代table布局，這種觀點(diǎn)就不必去理會(huì)了。

二、頁(yè)面連接數(shù)
頁(yè)面連接數(shù)是指瀏覽器從服務(wù)器上下載完當(dāng)前頁(yè)面以及其所需資源的過(guò)程中向服務(wù)器發(fā)出的請(qǐng)求次數(shù)。
舉個(gè)例子，一個(gè)頁(yè)面文件當(dāng)中包括一張圖片、一個(gè)外聯(lián)的css文件和一個(gè)外聯(lián)的js文件，那么完全下載完這個(gè)頁(yè)面所需要對(duì)服務(wù)器發(fā)送的請(qǐng)求就是4個(gè)（當(dāng)前頁(yè)面html、圖片、css和js各占一個(gè)連接數(shù)），該頁(yè)面的連接數(shù)也就是4個(gè)。
服務(wù)器處理連接數(shù)是需要耗費(fèi)資源和時(shí)間的，所以多次少取不如少次多取。
就好比方說(shuō)你和你五個(gè)哥們一起去買車票，總共只有一個(gè)售票窗口，是5個(gè)人排隊(duì)各買各的快還是一個(gè)人排隊(duì)買5個(gè)人的快呢?答案很明顯。
所以降低頁(yè)面連接數(shù)是非常有必要并且非常有效的辦法。
那么如果來(lái)降低頁(yè)面連接數(shù)呢？這里有一些技巧，比如寫(xiě)css需要用到背景圖片的時(shí)候，能用一張解決問(wèn)題的絕不用兩張，甚至最好不用圖片，我本人就非常喜歡無(wú)圖片的綠色環(huán)保的css代碼。
還有就是能統(tǒng)一到一個(gè)文件里面的盡量統(tǒng)一到一個(gè)文件里面，比如js文件和css文件都沒(méi)有必要外聯(lián)，都可以吐到一個(gè)相應(yīng)的html代碼中間，讓服務(wù)器一次性發(fā)送給瀏覽器，這樣的好處有很多：首先可以減少頁(yè)面連接數(shù)，其次可以避免由于網(wǎng)絡(luò)問(wèn)題造成的頁(yè)面裸奔現(xiàn)象（沒(méi)有css修飾的頁(yè)面就是裸奔）和js功能函數(shù)沒(méi)load完造成頁(yè)面功能不完整的現(xiàn)象。
看到這里，有的哥們可能會(huì)問(wèn)，把js和css代碼都寫(xiě)在一個(gè)頁(yè)面里面豈不是很不好維護(hù)么？web標(biāo)準(zhǔn)不是崇尚結(jié)構(gòu)和表現(xiàn)分離，結(jié)構(gòu)與行為分離么？然也，web標(biāo)準(zhǔn)確實(shí)是對(duì)的。但是把js和css代碼與HTML搞在一起只是給瀏覽器看的，有很多的方法可以做到頁(yè)面生成之前css、js和HTML都是完全分離的，而生成的頁(yè)面卻是三者的綜合體。比如apache的頁(yè)面拼裝功能，或者smarty中的模版嵌套功能等。
另外，設(shè)置瀏覽器的頁(yè)面緩存也是一個(gè)不錯(cuò)的辦法，能非常有效地降低頁(yè)面連接數(shù)，提高頁(yè)面加載速度。當(dāng)然這只是針對(duì)那些實(shí)時(shí)性不強(qiáng)的網(wǎng)站來(lái)說(shuō)。

三、服務(wù)器抗壓能力
服務(wù)器抗壓能力通常指的是服務(wù)器所能承受的最大訪問(wèn)人數(shù)。
這是一個(gè)硬件指標(biāo)，不過(guò)也可以通過(guò)對(duì)軟件和頁(yè)面的優(yōu)化來(lái)提高服務(wù)器的抗壓能力。
這里的服務(wù)器主要包括兩項(xiàng)，一個(gè)是http的服務(wù)器（apache或者iis），還有一個(gè)是數(shù)據(jù)庫(kù)服務(wù)器。
這是所說(shuō)的優(yōu)化主要是有效減少服務(wù)器的連接數(shù)、提高程序執(zhí)行效率，比如靜態(tài)化頁(yè)面或者使用緩存可以減少數(shù)據(jù)庫(kù)的壓力，減少頁(yè)面連接數(shù)可以減少http服務(wù)器的壓力等。還可以通過(guò)安裝一些軟件或者模塊來(lái)達(dá)到這個(gè)目的，比如zend的php加速引擎，以及apc等。

四、網(wǎng)絡(luò)狀況
網(wǎng)絡(luò)狀況指的是用戶當(dāng)前的網(wǎng)絡(luò)環(huán)境。
比如是撥號(hào)用戶還是寬帶用戶，帶寬是512k還是1M等等，這些硬件指標(biāo)就像通向你電腦的管道，管道越大，相同時(shí)間內(nèi)下載的東西就越多，速度自然就越快了。
當(dāng)然這個(gè)因素不是網(wǎng)站開(kāi)發(fā)者可以去控制的。

以上就是我總結(jié)出來(lái)的幾個(gè)提高頁(yè)面loadtime的方法，有什么不足的地方還希望大家能補(bǔ)充一下，多多益善。

最新評(píng)論