網(wǎng)站前端技術(shù)及其對網(wǎng)站性能的影響研究

摘要：隨著互聯(lián)網(wǎng)和電子商務(wù)的發(fā)展，人們對網(wǎng)站的要求越來越高，網(wǎng)站流量越來越大，頁面組件也越來越多，這就使得網(wǎng)站響應(yīng)速度變慢，為了提高網(wǎng)站的前端性能，本文首先對網(wǎng)站前端的相關(guān)開發(fā)技術(shù)進(jìn)行分析，然后研究了網(wǎng)站前端開發(fā)技術(shù)對網(wǎng)站性能的影響，最后根據(jù)這些影響提出網(wǎng)站前端開發(fā)應(yīng)遵循的技術(shù)規(guī)范。

關(guān)鍵詞：網(wǎng)站前端 網(wǎng)站前端技術(shù) 網(wǎng)站前端性能

1 網(wǎng)站前端開發(fā)技術(shù)分析

1.1 HTML語言

HTML（Hypertext Markup Language）是指超文本標(biāo)記語言，是制作網(wǎng)頁必須使用的語言，也是構(gòu)成網(wǎng)頁文件的主要語言。HTML語言是一種標(biāo)記語言，由一系列的標(biāo)記組成，他通過標(biāo)記來格式化各種頁面元素，某個標(biāo)記可以使他所標(biāo)記的內(nèi)容具有某種格式或特征，從而使得頁面可以按照需要的格式呈現(xiàn)。

HTML網(wǎng)頁文件需要在網(wǎng)頁瀏覽器中打開，這種程序需要網(wǎng)頁瀏覽器解釋執(zhí)行，各種網(wǎng)頁瀏覽器都可以完美的支持HTML語言，所以用HTML語言制作的網(wǎng)頁可以供使用各種瀏覽器的用戶瀏覽。

1.2 CSS樣式表

隨著Internet應(yīng)用越來越普及，對Internet程序的要求越來越高，而Internet程序一般都是做成網(wǎng)站形式，所以就對網(wǎng)站制作技術(shù)有了更高的要求，CSS就是為了彌補(bǔ)HTML 的不足而出現(xiàn)的。CSS（Cascading Style Sheet）是指層疊樣式表，他不是一種語言，由一系列的屬性組成，他通過屬性來格式化各種頁面元素，某些屬性可以使他所作用的內(nèi)容具有某些格式或特征，從而使得頁面可以按照需要的格式呈現(xiàn)。

在網(wǎng)頁中嵌入CSS代碼有三種方法：①直接在需要使用CSS樣式的標(biāo)記中添加CSS代碼。②在STYLE標(biāo)記中添加CSS代碼。③在外部樣式表文件中添加CSS代碼。

1.3 客戶端腳本語言

HTML和CSS都是進(jìn)行頁面布局的技術(shù)，他們只能對頁面進(jìn)行格式化，要想使頁面具有動態(tài)效果、能夠與用戶交互，就需要在頁面上編寫程序，這就促使了客戶端腳本語言的出現(xiàn)?？蛻舳四_本語言是編寫嵌入到網(wǎng)頁中的一段一段獨立程序的編程語言?？蛻舳四_本語言有JavaScript和VBScript兩種，目前常用的客戶端腳本語言是由Netscape公司開發(fā)的JavaScript。通過在網(wǎng)頁上嵌入由JavaScript編寫的程序，可以使得頁面內(nèi)容或格式根據(jù)設(shè)置的條件或用戶的操作發(fā)生變化，從而實現(xiàn)頁面的動態(tài)效果。

在網(wǎng)頁中嵌入客戶端腳本有三種方法：①直接在需要使用腳本的標(biāo)記中添加腳本。②在SCRIPT標(biāo)記中添加腳本。③在外部腳本文件中添加腳本。

2 網(wǎng)站前端開發(fā)技術(shù)對網(wǎng)站性能的影響

2.1 HTML語言對網(wǎng)站性能的影響

2.1.1 HTML文檔大小

用HTML語言編寫的網(wǎng)頁保存起來是一個以“html”為擴(kuò)展名的文本文件，一般把它稱作HTML文檔。該文件會占用一定的存儲空間，當(dāng)用戶請求該文件時，該文件需要被從服務(wù)器端下載到客戶端，這就需要占用網(wǎng)絡(luò)帶寬，下載過程需要一定的時間。在相同網(wǎng)速下，HTML文檔越小，下載所需要的時間就越短，用戶的等待時間就越短，網(wǎng)站前端性能就越好。

2.1.2 網(wǎng)頁圖片的數(shù)量

為了美觀，網(wǎng)頁上都需要使用圖片，圖片是通過HTML語言的“IMG”標(biāo)記插入的，但是圖片文件本身并不在HTML文檔中，而是一個單獨的圖片文件，通過“IMG”標(biāo)記調(diào)用到頁面上。因此，當(dāng)用戶請求一個HTML文檔時，HTML文檔本身和網(wǎng)頁上調(diào)用的圖片文件是被分別下載到客戶端的，每一個單獨文件的下載都需要一個HTTP請求，每一個HTTP請求連接的建立都需要時間。所以，一個頁面上圖片越多，所需要的HTTP請求數(shù)量就越多，下載所需要的額外時間越長。

2.1.3 網(wǎng)頁圖片緩存

HTML文檔中調(diào)用的圖片可以被瀏覽器緩存到客戶端，當(dāng)用戶再次請求同一個HTML文檔時，這些被緩存的圖片就不需要再次下載，從而減少HTTP請求的數(shù)量，同時減少HTTP響應(yīng)的大小，進(jìn)而減少用戶的等待時間，提高網(wǎng)站前端的性能。

2.2 CSS樣式表對網(wǎng)站性能的影響

2.2.1 樣式表的數(shù)量

一般在一個HTML文檔中可以加載多個樣式表文件，類似于HTML文檔中引用的圖片，當(dāng)用戶請求一個HTML文檔時，HTML文檔和樣式表文件被分別下載到客戶端，每一個文件的下載都需要一個HTTP請求，每一個HTTP請求連接的建立都需要時間。所以，一個HTML文檔中樣式表越少，所需要的HTTP請求數(shù)量就越少，下載所需要的額外時間越短。

2.2.2 樣式表緩存

HTML文檔中加載的樣式表文件可以被瀏覽器緩存到客戶端，當(dāng)用戶再次請求同一個HTML文檔時，這些被緩存的樣式表文件就不需要再次下載，從而減少HTTP請求的數(shù)量，同時減少HTTP響應(yīng)的大小，進(jìn)而減少用戶的等待時間，提高網(wǎng)站前端的性能。

2.2.3 樣式表位置

HTML文檔中對樣式表文件的加載既可以放在文檔的頂部，也可以放在文檔的底部，將樣式表文件的加載放在文檔的底部會阻止頁面的逐步呈現(xiàn)，而將樣式表文件的加載放在文檔的頂部會使頁面逐步呈現(xiàn)。而頁面的逐步呈現(xiàn)可以避免出現(xiàn)屏幕空白，為用戶提供可視化回饋，用戶可以立即看到頁面的部分內(nèi)容，從而使用戶在感覺上覺得網(wǎng)頁的加載速度變快。

2.2.4 CSS表達(dá)式

CSS表達(dá)式是動態(tài)設(shè)置CSS屬性的一種方法，IE5之后的瀏覽器都支持這種方式，其通過expression方法將JavaScript表達(dá)式的值設(shè)置為CSS屬性的值，其用法如下：

CSS屬性：expression（JavaScript表達(dá)式）

在頁面呈現(xiàn)、頁面大小改變、頁面滾動或鼠標(biāo)在頁面上移動時，CSS表達(dá)式都要重新求值，這種對CSS表達(dá)式的重復(fù)求值需要消耗一定的系統(tǒng)資源，需要一定的時間，這就使得CSS表達(dá)式的性能比較底下，在頁面中使用CSS表達(dá)式就會降低網(wǎng)站前端的性能。

2.3 客戶端腳本對網(wǎng)站性能的影響

2.3.1 客戶端腳本的數(shù)量

一般在一個HTML文檔中可以加載多個客戶端腳本文件，類似于樣式表的數(shù)量，當(dāng)用戶請求一個HTML文檔時，HTML文檔和客戶端腳本文件被分別下載到客戶端，每一個單獨文件的下載都需要一個HTTP請求，每一個HTTP請求連接的建立都需要時間。所以，一個HTML文檔中客戶端腳本越多，所需要的HTTP請求數(shù)量就越多，下載所需要的額外時間越長。

2.3.2 客戶端腳本緩存

HTML文檔中加載的客戶端腳本文件可以被瀏覽器緩存到客戶端，當(dāng)用戶再次請求同一個HTML文檔時，這些被緩存的客戶端腳本文件就不需要再次下載，從而減少HTTP請求的數(shù)量，同時減少HTTP響應(yīng)的大小，進(jìn)而減少用戶的等待時間，提高網(wǎng)站前端的性能。

2.3.3 客戶端腳本位置

HTML文檔中對客戶端腳本文件的加載既可以放在文檔的頂部，也可以放在文檔的底部，將客戶端腳本文件的加載放在文檔的頂部會帶來兩個方面的問題。一是腳本的執(zhí)行會阻止頁面組件的并行下載，這使得頁面組件的下載速度變慢；二是這會阻止腳本以下的內(nèi)容的逐步呈現(xiàn)，造成屏幕空白，從而使用戶在感覺上覺得網(wǎng)頁的加載速度變慢。

2.3.4 客戶端腳本大小

客戶端腳本文件是一個以“js”為擴(kuò)展名的文本文件，當(dāng)用戶請求使用客戶端腳本文件的HTML文檔時，客戶端腳本文件會被從服務(wù)器端下載到客戶端，下載過程需要一定的時間?？蛻舳四_本文件越小，下載所需要的時間就越短，用戶的等待時間就越短，網(wǎng)站前端性能就越好。

3 網(wǎng)站前端開發(fā)應(yīng)遵循的技術(shù)規(guī)范

3.1 HTML語言方面應(yīng)遵循的技術(shù)規(guī)范

3.1.1 壓縮HTML文檔

HTML文檔越小，網(wǎng)站前端的性能越好，那么我們就可以對HTML文檔進(jìn)行壓縮，使在網(wǎng)絡(luò)上傳輸?shù)腍TML文檔變小，從而節(jié)約HTML文檔的下載時間，提高網(wǎng)站前端性能。從HTTP1.1開始，Web瀏覽器和服務(wù)器就開始支持壓縮，常用的壓縮方法是gzip。

3.1.2 合并圖片

網(wǎng)頁上圖片的數(shù)量越少，一個頁面上HTTP請求的數(shù)量就越少，網(wǎng)站前端的性能就越高。我們可以通過合并頁面上的圖片來達(dá)到減少網(wǎng)頁上圖片數(shù)量的目的，常用的合并圖片的方法有圖片地圖和CSS Sprites兩種。

3.1.3 對圖片使用緩存

將網(wǎng)頁中的圖片在其第一次被訪問時緩存在客戶端可以減少HTTP請求的數(shù)量，提高網(wǎng)站前端的性能。Web服務(wù)器可以使用expires頭指定圖片的有效期，Web瀏覽器可以在圖片的有效期內(nèi)使用緩存在客戶端的圖片，而不用重新從服務(wù)器端下載該圖片。

3.2 CSS樣式表方面應(yīng)遵循的技術(shù)規(guī)范

3.2.1 合并樣式表文件

網(wǎng)頁上樣式表文件的數(shù)量越少，一個頁面上HTTP請求的數(shù)量就越少，網(wǎng)站前端的性能就越高。我們可以通過合并頁面上的樣式表文件來達(dá)到減少網(wǎng)頁上樣式表文件數(shù)量的目的。

3.2.2 對樣式表文件使用緩存

將樣式表文件緩存在客戶端可以減少HTTP請求的數(shù)量，提高網(wǎng)站前端的性能。Web服務(wù)器可以使用expires頭指定樣式表文件的有效期，Web瀏覽器可以在樣式表文件的有效期內(nèi)使用緩存在客戶端的樣式表文件，而不用重新從服務(wù)器端下載該樣式表文件。

3.2.3 將樣式表文件放在頂部

頁面的逐步呈現(xiàn)可以避免出現(xiàn)屏幕空白，用戶可以立即看到頁面的部分內(nèi)容，從而使用戶覺得網(wǎng)頁的加載速度變快。我們可以將樣式表文件放在頁面的頂部，從而使頁面逐步呈現(xiàn)。

3.2.4 避免CSS表達(dá)式

CSS表達(dá)式的重新求值會降低網(wǎng)站前端的性能，我們可以通過避免在網(wǎng)頁中使用CSS表達(dá)式來提高網(wǎng)站前端的性能，可以通過一次性表達(dá)式或事件處理器來代替CSS表達(dá)式。

3.3 客戶端腳本方面應(yīng)遵循的技術(shù)規(guī)范

3.3.1 合并腳本文件

網(wǎng)頁上腳本文件的數(shù)量越少，一個頁面上HTTP請求的數(shù)量就越少，網(wǎng)站前端的性能就越高。我們可以通過合并頁面上的腳本文件來達(dá)到減少網(wǎng)頁上腳本文件數(shù)量的目的。

3.3.2 對腳本文件使用緩存

將腳本文件緩存在客戶端可以減少HTTP請求的數(shù)量，提高網(wǎng)站前端的性能。Web服務(wù)器可以使用expires頭指定腳本文件的有效期，Web瀏覽器可以在腳本文件的有效期內(nèi)使用緩存在客戶端的腳本文件，而不用重新從服務(wù)器端下載該腳本文件。

3.3.3 將腳本放在底部

將腳本放在頁面底部可以避免腳本阻止頁面組件的并行下載和頁面的逐步呈現(xiàn)，從而提高頁面組件的下載速度，縮短頁面的加載時間，提高網(wǎng)站前端的性能。

3.3.4 精簡JavaScript

為了使JavaScript文件盡量小，可以通過精簡的方式來移除代碼中注釋、空白字符等不必要的字符，進(jìn)而縮短加載時間，提高性能。常用的精簡JavaScript文件代碼的工具有JSMin和ShrinkSafe兩個。

參考文獻(xiàn)：

[1]雷海衛(wèi)，張萍.網(wǎng)頁制作中靜態(tài)頁生成技術(shù)的研究.電腦開發(fā)與應(yīng)用，2007（05）.

[2]鄧小善，龍艷軍.高訪問量網(wǎng)站性能監(jiān)測與優(yōu)化的設(shè)計與實現(xiàn)，現(xiàn)代計算機(jī)（專業(yè)版），2009（02）.

[3]張徽燕，張胡.動態(tài)Cache技術(shù)在網(wǎng)站性能設(shè)計中的應(yīng)用.電腦知識與技術(shù)，2006（12）.

基金項目：河南工業(yè)大學(xué)?？蒲谢鹳Y助項目（編號：09XSK004）

作者簡介：韓濤（1977-），男，河南杞縣人，博士研究生，研究方向為電子商務(wù)、網(wǎng)絡(luò)營銷。