陳捷

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

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

中圖分類號：TP311 ? ? 文獻標(biāo)識碼：A

文章編號：1009-3044（2019）15-0068-02

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

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

1.1HTML

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

1.2 CSS

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

1.3客戶端腳本語言

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4 結(jié)束語

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

參考文獻：

[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è)計與實現(xiàn)[D]. 合肥：合肥工業(yè)大學(xué)，2016.

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

[5] 李強，楊巋，吳天吉.基于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)編輯：梁書】