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

陳捷

摘要：網(wǎng)站前端開發(fā)技術(shù)的應(yīng)用直接影響著網(wǎng)站性能，為了保障這些技術(shù)在實(shí)際應(yīng)用過程中都能發(fā)揮出預(yù)期作用，該文將首先在第一部分內(nèi)容中對(duì)現(xiàn)階段常用的幾類網(wǎng)站前端開發(fā)技術(shù)進(jìn)行介紹，進(jìn)而在此基礎(chǔ)上研究這些技術(shù)對(duì)網(wǎng)站性能所產(chǎn)生的影響，最后一部分則基于這些內(nèi)容提出了網(wǎng)站前端技術(shù)應(yīng)用過程中需要注意的幾點(diǎn)問題。

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

中圖分類號(hào)：TP311 ? ? 文獻(xiàn)標(biāo)識(shí)碼：A

文章編號(hào)：1009-3044（2019）15-0068-02

隨著計(jì)算機(jī)技術(shù)、網(wǎng)絡(luò)技術(shù)等的不斷發(fā)展，網(wǎng)站性能已經(jīng)成為決定網(wǎng)站能否應(yīng)對(duì)大量流量、滿足用戶各項(xiàng)功能需求的關(guān)鍵，為了從這一方面滿足用戶及行業(yè)需求，從網(wǎng)站前端開發(fā)技術(shù)的應(yīng)用對(duì)網(wǎng)站性能展開研究是非常有必要的。結(jié)合現(xiàn)狀來說，網(wǎng)站前端開發(fā)技術(shù)主要包含HIML、CSS、客戶端腳本語言等，而這些技術(shù)的應(yīng)用都會(huì)在不同程度上對(duì)網(wǎng)站性能產(chǎn)生一定影響，為了更進(jìn)一步保障網(wǎng)站性能可以滿足用戶需求，并提升其自身競(jìng)爭(zhēng)力，技術(shù)人員必須能針對(duì)上述技術(shù)在實(shí)際開發(fā)過程中的應(yīng)用進(jìn)行研究。為了確保這一工作的開展成效能夠達(dá)到預(yù)期，本文將在后續(xù)內(nèi)容中結(jié)合這些技術(shù)的定義和特點(diǎn)展開詳細(xì)論述。

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

1.1HTML

HTML即超文本標(biāo)記語言，對(duì)于本文所討論的問題來說，這種語言是網(wǎng)頁的主要構(gòu)成部分，在實(shí)際應(yīng)用過程中，這一語言主要通過不同的標(biāo)記來對(duì)網(wǎng)頁中的不同內(nèi)容進(jìn)行區(qū)分，最后通過瀏覽器對(duì)HTML語言的解釋和執(zhí)行完成向用戶顯示網(wǎng)頁內(nèi)容的過程。

1.2 CSS

CSS即層疊樣式表，CSS與HTML的區(qū)別主要在于后者屬于一種語言，而CSS是由一系列的屬性組成的，在這些不同屬性的作用之下，網(wǎng)頁中對(duì)應(yīng)的頁面元素將被格式化，進(jìn)而依照不同格式來顯示出網(wǎng)頁內(nèi)容。在實(shí)際應(yīng)用過程中，CSS代碼既可以直接添加到標(biāo)記之中，也可以在STYLE標(biāo)記中添加或在外部樣式表文件中添加。

1.3客戶端腳本語言

腳本語言是在網(wǎng)頁實(shí)現(xiàn)與用戶交互這一功能的關(guān)鍵，而HTML及CSS的應(yīng)用實(shí)際上都是靜態(tài)的，只能以某種選擇好的格式來展示頁面內(nèi)容，在腳本語言的輔助之下，這一問題將能得到很好的解決。從定義上來說，腳本語言就是嵌入到網(wǎng)頁中的一段獨(dú)立的程序。以現(xiàn)階段最為常用的腳本語言JavaScript為例，這一語言能根據(jù)用戶操作的不同而顯示出不同的內(nèi)容，即動(dòng)態(tài)效果。與CSS類似，將JavaScript嵌入到網(wǎng)頁中的方法也有三種：直接添加、在SCRIPT標(biāo)記中添加、在外部腳本文件中添加。圖一為HTML、CSS、JavaScript三者之間的關(guān)系。

2網(wǎng)站前端技術(shù)對(duì)網(wǎng)站性能的影響

2.1HTML對(duì)網(wǎng)站性能的影響

1）HTML文件的大小決定著用戶打開網(wǎng)頁時(shí)的等待時(shí)間。使用HTML編寫的網(wǎng)頁實(shí)際上是一個(gè)以.html為后綴的文件，而當(dāng)用戶輸入網(wǎng)址試圖打開這一網(wǎng)頁時(shí)，那么就需要從服務(wù)器將這一文件下載到客戶端后進(jìn)行顯示。顯然，文件越小，請(qǐng)求后需要等待的時(shí)間就更短，反之，用戶則需要等待更長(zhǎng)時(shí)間，對(duì)于本文所討論的網(wǎng)站性能來說，響應(yīng)速度則是衡量其性能的主要因素之一。

2）頁面中圖片的數(shù)量決定著網(wǎng)站的響應(yīng)速度。當(dāng)用戶發(fā)出請(qǐng)求之后，HTML文檔與圖片實(shí)際上是分別被下載的，而每一個(gè)單獨(dú)文件的下載都需要建立一個(gè)新的HTTP連接，也就是說，圖片數(shù)量越多，HTTP連接的數(shù)量也就越多，網(wǎng)站響應(yīng)時(shí)間自然會(huì)在原有基礎(chǔ)上有所增長(zhǎng)，但同時(shí)，這些被調(diào)用的圖是可以被緩存到客戶端的，當(dāng)用戶下一次訪問網(wǎng)頁時(shí)，等待時(shí)間就會(huì)相應(yīng)縮短。

2.2CSS對(duì)網(wǎng)站性能的影響

與上文中的內(nèi)容類似，當(dāng)一個(gè)HTML文檔中存在多個(gè)樣式表時(shí)，那么HTML文檔下載過程中就需要針對(duì)每一個(gè)樣式表文件建立不同的HTTP連接，這樣的特性必然會(huì)對(duì)網(wǎng)站性能產(chǎn)生影響。同樣的，CSS樣式表文件也可以被瀏覽器緩存到客戶端，進(jìn)而加快再次訪問網(wǎng)頁時(shí)的響應(yīng)速度。

除了數(shù)量之外，樣式表文件的位置也會(huì)對(duì)網(wǎng)站性能產(chǎn)生影響。若將樣式表文件的加載放在HTML文檔頂部，那么頁面就可以逐步呈現(xiàn)，避免空白頁面的出現(xiàn)，反之，頁面無法在加載過程中逐步呈現(xiàn)，空白頁面就很有可能導(dǎo)致用戶在觀感上認(rèn)為頁面加載時(shí)間變長(zhǎng)。

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

腳本文件數(shù)量仍是影響網(wǎng)頁響應(yīng)速度的主要因素之一，但與圖片、CSS樣式表等文件類似，瀏覽器也可以將腳本文件緩存到客戶端之中，進(jìn)而縮短用戶等待時(shí)間。除此之外，腳本文件的加載在HTML文檔中的位置也會(huì)對(duì)網(wǎng)站性能產(chǎn)生影響，若將此類文件的加載放在文檔頂部，那么腳本文件的加載就會(huì)阻止頁面其他組件的下載，同時(shí)，頁面也不能逐步呈現(xiàn)，在用戶等待過程中出現(xiàn)空白頁面，網(wǎng)頁的加載速度將會(huì)因此而大幅降低。

3網(wǎng)站前端技術(shù)在實(shí)際開發(fā)過程中的應(yīng)用策略

3.1對(duì)HTML的應(yīng)用策略

結(jié)合上文中的內(nèi)容，為了避免HTML對(duì)網(wǎng)站性能產(chǎn)生負(fù)面影響，相關(guān)技術(shù)人員應(yīng)注意以下幾點(diǎn)問題：1）對(duì)HTML文檔進(jìn)行壓縮。這一點(diǎn)主要是為了在原有基礎(chǔ)之上節(jié)約從服務(wù)器端下載HTML文檔所需要的時(shí)間，現(xiàn)階段常用的壓縮方法為gzip。2）合并圖片。為了減少加載大量圖片時(shí)建立多個(gè)HTTP連接所耗費(fèi)的時(shí)間，技術(shù)人員可以利用CSS Sprites來將圖片合并起來。3）緩存圖片。即在第一次訪問網(wǎng)頁時(shí)就緩存網(wǎng)頁中的圖片，進(jìn)而針對(duì)這些圖片利用expires頭設(shè)置有效期，在有效期內(nèi)訪問這一網(wǎng)頁時(shí)使用緩存好的圖片，網(wǎng)頁響應(yīng)時(shí)間自然能得到有效縮短。

3.2對(duì)CSS的應(yīng)用策略

1）樣式表的合并和緩存。樣式表數(shù)量越少，對(duì)應(yīng)網(wǎng)頁HTTP請(qǐng)求的數(shù)量也會(huì)有所縮減，進(jìn)而達(dá)到提升網(wǎng)站性能的目的。另一方面，與圖片的緩存類似，依然可以采用expires頭來緩存CSS文件，只要在有效期內(nèi)，訪問這一網(wǎng)頁就不用再次從服務(wù)器端下載該樣式表文件。2）在HTML文檔頂端加載CSS樣式表，這一設(shè)置可以避免空白頁面的出現(xiàn)，進(jìn)而以逐步呈現(xiàn)的形式將網(wǎng)頁顯示在瀏覽器中，用戶所感受到的加載時(shí)間自然會(huì)有所縮短。

3.3對(duì)客戶端腳本語言的應(yīng)用策略

1）腳本文件的合并和緩存。對(duì)腳本文件的處理與上文中的內(nèi)容類似，技術(shù)人員仍可以利用expires頭來將腳本文件緩存到客戶端，進(jìn)而指定對(duì)應(yīng)腳本文件的有效期，在有效期內(nèi)不需要重復(fù)執(zhí)行腳本文件下載操作。2）腳本文件加載的位置。應(yīng)將腳本文件的加載放在HTML文檔底部，進(jìn)而實(shí)現(xiàn)逐步顯示并提升加載速度。3）對(duì)JavaScript進(jìn)行精簡(jiǎn)。這一點(diǎn)主要是為了進(jìn)一步降低腳本文件大小，通過移除腳本文件中的注釋、空白字符等都能達(dá)到這樣的效果，而在JSMin、ShrinkSafe等軟件的輔助之下，腳本文件的大小將能得到進(jìn)一步壓縮。

4 結(jié)束語

綜上所述，在對(duì)HTML、CSS、客戶端腳本語言等對(duì)網(wǎng)站性能的影響進(jìn)行分析的基礎(chǔ)之上，本文主要從這些內(nèi)容出發(fā)對(duì)利用這些技術(shù)進(jìn)行網(wǎng)站前端開發(fā)時(shí)應(yīng)注意的問題做了深入探討。在后續(xù)發(fā)展過程中，相關(guān)技術(shù)人員及單位必須能進(jìn)一步將網(wǎng)站性能重視起來，并通過各類技術(shù)的應(yīng)用來不斷提升網(wǎng)站性能，以此來保障網(wǎng)站能在功能上更好地滿足用戶需求。

參考文獻(xiàn)：

[1] 閆志英.淺析Web前端開發(fā)技術(shù)[J].無線互聯(lián)科技，2016（2）.

[2] 曾媛.學(xué)術(shù)社交網(wǎng)站前端性能的分析及優(yōu)化[D].廣州：華南師范大學(xué)，2016.

[3] 黃杰.基于網(wǎng)站的性能優(yōu)化與內(nèi)存數(shù)據(jù)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D]. 合肥：合肥工業(yè)大學(xué)，2016.

[4] 李寶林.淺析網(wǎng)站性能優(yōu)化技術(shù)[J].電子設(shè)計(jì)工程，2014，22（2）.

[5] 李強(qiáng)，楊巋，吳天吉.基于Asp.net的網(wǎng)站開發(fā)前端技術(shù)優(yōu)化研究[J].軟件導(dǎo)刊，2013，12（5）.

[6] 包韶平.面向前端的網(wǎng)站性能優(yōu)化方法與工具研究[J].科技風(fēng)，2009（9）.

【通聯(lián)編輯：梁書】