網站前端技術及其對網站性能的影響研究

陳捷

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

關鍵詞：網站前端技術;網站性能;影響

中圖分類號：TP311 ? ? 文獻標識碼：A

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

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

1網站前端開發技術介紹

1.1HTML

HTML即超文本標記語言，對于本文所討論的問題來說，這種語言是網頁的主要構成部分，在實際應用過程中，這一語言主要通過不同的標記來對網頁中的不同內容進行區分，最后通過瀏覽器對HTML語言的解釋和執行完成向用戶顯示網頁內容的過程。

1.2 CSS

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

1.3客戶端腳本語言

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

2網站前端技術對網站性能的影響

2.1HTML對網站性能的影響

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

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

2.2CSS對網站性能的影響

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

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

2.3客戶端腳本語言對網站性能的影響

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

3網站前端技術在實際開發過程中的應用策略

3.1對HTML的應用策略

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

3.2對CSS的應用策略

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

3.3對客戶端腳本語言的應用策略

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

4 結束語

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

參考文獻：

[1] 閆志英.淺析Web前端開發技術[J].無線互聯科技，2016（2）.

[2] 曾媛.學術社交網站前端性能的分析及優化[D].廣州：華南師范大學，2016.

[3] 黃杰.基于網站的性能優化與內存數據系統的設計與實現[D]. 合肥：合肥工業大學，2016.

[4] 李寶林.淺析網站性能優化技術[J].電子設計工程，2014，22（2）.

[5] 李強，楊巋，吳天吉.基于Asp.net的網站開發前端技術優化研究[J].軟件導刊，2013，12（5）.

[6] 包韶平.面向前端的網站性能優化方法與工具研究[J].科技風，2009（9）.

【通聯編輯：梁書】