Web前端開發技術和其對網站性能的影響

高慧

摘 要：Web前端開發技術可以影響網站性能，影響服務質量。本文首先闡述了Web前端開發技術的有關概念，然后探討了Web前端開發技術如何影響網站性能，分析了Web前端開發技術的實施策略。當前，人們要不斷優化網站前端開發技術，以提升網站性能。

關鍵詞：前端開發技術;網站;Web;計算機

中圖分類號：TP393.092 文獻標識碼：A 文章編號：1003-5168（2019）28-0047-03

Talking about Web Front-end Development Technology

and Its Influence on Website Performance

GAO Hui

（Nanjing Rice Information Technology Co.， Ltd.，Nanjing Jiangsu 210001）

Abstract： Web front-end development technology can affect website performance and affect service quality. This paper first expounds the related concepts of Web front-end technology， and then discusses how Web front-end development technology affects website performance and analyzes the implementation strategy of Web front-end development technology. Currently， people must constantly optimize the Web front-end development technology to improve the performance of the website.

Keywords： front-end development technology;website;Web;computer

當前，信息技術的發展速度是有目共睹的，人們的生產、生活都很難離開互聯網。只有具備強大的性能，在大量用戶訪問網頁時，網站才能穩定地向用戶提供優質的服務。針對這一需求，人們必須從Web前端開發技術角度出發，進一步提升網站性能。當前，Web前端開發擁有3種比較重要的支柱性語言，它們分別是HTML、CSS以及客戶腳本語言，網站性能的好壞在很大程度上受到它們的影響，因此必須在Web前端開發過程中對其進行深入的研究和剖析。為了保證研發工作能夠真正達到預期效果，本文分析了這些技術的概念及其具體特征。

1 Web前端開發技術概述

1.1 HTML

HTML是指超文本標記語言，一般來說，此種語言是一個網頁的重要組成部分。通常情況下，該種語言的主要作用是通過各種類型的標記，進一步區分網頁中不同類型的內容，最后系統終端會對HTML的請求進行解析，并根據需求向用戶顯示相應的網頁內容。

1.2 CSS

CSS翻譯為中文的意思是“層疊樣式表”，它是由一些不同的屬性構成的，在多種屬性的共同影響下，Web中相應的頁面元素會根據實際情況自動進行格式化，并且根據不同的格式會顯示出不同的網頁內容。在網頁運行過程中，CSS一般具有三種添加方式：一是簡單直接地添加到各類相應的標記中;二是有選擇性地在STYLE標記中添加;三是在外部樣式表文件中進行添加。

1.3 客戶端腳本語言

簡單來說，腳本語言在一定程度上決定了網頁的實現和用戶交互，上文提到的HTML和CSS通常都是靜態的，它們的功能比較單一，僅僅只能通過一種已經提前選擇好的格式來顯示出相應的網頁內容，有時不能很好地呈現出預期效果，但是腳本語言可以解決這些問題。概括來說，腳本語言實際上是一段完全獨立于其他內容的簡單程序。目前，行業內認可度最高的腳本語言要數JavaScript（簡稱“JS”），它的自動化程度比較高，可以隨著用戶操作的改變，顯示出不同類型的內容，其被稱為動態效果。和上文提到的CSS一樣，JavaScript一般具有三種嵌入方式：一是簡單直接地添加到各類相應的標記中;二是有選擇性地在STYLE標記中添加;三是在外部樣式表文件中進行添加。圖1是HTML、CSS、JavaScript三種語言的相互關系。

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

2.1 HTML對網站性能的影響

互聯網的加載速度取決于HTML文件的大小，一般來說，采用HTML編寫的網頁后面都有一個統一的后綴，即.html，當互聯網輸入網址后，終端服務器會根據指令需求把文件下載下來，并通過客戶端顯示出來[1]。因此，文件越小，網頁的加載速度越快，反之則越慢。要想提升網站的性能，人們必須考慮到網頁的響應速度。

另外，網頁中圖片數量的多少也會影響網站的加載速度。需要注意的是，當用戶輸入網址后，網頁中的HTML文檔和圖片并不是同時被下載下來的，而是通過分別下載的方式進行加載，每個文件在下載時都要和HTTP建立一個連接，因此圖片的增多會導致HTTP的連接數增多，使得網站加載速度變慢[2]。當然，這些圖能夠被系統識別自動保存到客戶端中，也就是說，當用戶再一次訪問該網頁時，就不需要再重新加載這些圖片，那么網頁加載速度也會變快。

2.2 CSS對網站性能的影響

與前者相似，文檔中的樣式表在網頁加載過程中也要與HTTP分別建立不同的連接，這樣一來，網頁的加載速度也會隨著連接的增多而變慢，從而影響整個網站的性能。當然，這些CSS樣式表是能夠被系統識別并自動保存到客戶端的，也就是說，當用戶再一次訪問該網頁時，就不需要重新加載這些樣式表，那么網頁加載速度也會變快。

除此之外，樣式表文件的位置也或多或少影響網站性能。假如樣式表文件根據相關要求被放置于HTML文檔的最前端，這樣各個網頁會按照順序依次出現，防止網頁中間突然出現空白頁[3]。相反，網頁很難在加載過程中按序依次出現，這樣就會使用戶誤以為頁面的加載時間增長。

2.3 客戶端腳本語言如何影響網站性能

腳本文件的多少同樣會影響網頁加載速度。和上文提到的圖片、CSS文件相同，腳本文件也能夠被系統識別并自動保存到客戶端，也就是說，當用戶再一次訪問該網頁時，就不需要重新加載這些腳本文件，網頁加載速度會變快。此外，腳本文件的位置也會或多或少影響網站性能。假如腳本文件根據相關要求被放置于HTML文檔的最前端，這樣各個網頁會按照順序依次出現，防止網頁中間突然出現空白頁。相反，網頁就很難在加載過程中按序依次出現，這樣就會使用戶誤以為頁面的加載時間增長[4]。

3 Web前端開發技術在具體研發過程中的運用策略

3.1 HTML語言應當遵守技術標準

3.1.1 縮減HTML文檔。通過前文的分析可以看出，Web前端的性能會隨著HTML文檔的縮小而變好，文檔越小，加載速度越快。自HTTP1.1起，各個網站的瀏覽器和服務器都可以根據需要進行壓縮，使用頻率最高的方法要數gzip[5]。

3.1.2 減少圖片。Web前端的性能會隨著圖片數量的減少而變好。為了加快網站加載速度，設計者可以采用合并圖片的方式來減少圖片數量。目前行業內認可度較高的方式主要有圖片地圖以及CSS Sprites。

3.1.3 自動緩存網頁圖片。研究發現，在第一次訪問網頁時，絕大多數網站的圖片都夠被系統識別并自動保存到客戶端，也就是說，當用戶再一次訪問該網頁時，就不需要重新加載這些圖片[6]。在網站服務器中，人們可以通過Expires指令設定圖片保存時間，在保存有效期內，用戶再次訪問網站可以不用重新下載圖片。

3.2 CSS樣式表應當遵守技術標準

3.2.1 縮減樣式表文件。樣式表文件的多少會影響網站的性能，樣式表文件越少，加載速度越快，因此設計者可以采用合并樣式表的方式來減少其數量，從而提升網站的性能。

3.2.2 自動緩存樣式表文件。絕大多數網站中的樣式表在第一次訪問網頁時都能被系統識別并自動保存到客戶端，也就是說，當用戶再一次訪問該網頁時，就不需要重新加載這些樣式表[7]。在網站服務器中，人們可以通過Expires指令設定樣式表的保存時間，在保存有效期內，用戶再次訪問網站可以不用重新下載這些樣式表文件。

3.2.3 將樣式表文件放置于網站最前端。網頁按照客戶指定的順序依次出現能夠防止顯示屏出現空白，客戶能夠根據需求依次看到相應的內容，使客戶認為網頁速度并不慢。所以，樣式表文件應當放置于網站最前端，確保網頁能夠依次出現。

3.2.4 盡量不使用CSS表達式。通常，CSS表達式的再一次求值會自然而然地導致Web前端性能降低，所以不到迫不得已，人們應當盡量不使用CSS表達式，必要時應當采用一次性表達式或事件處理器來替代[8]。

3.3 客戶端腳本方面應當遵守技術標準

3.3.1 減少腳本文件。腳本文件的多少會影響網站性能，腳本文件越少，加載速度越快，因此設計者可以采用合并腳本文件的方式來減少其數量，從而提升網站性能。

3.3.2 自動緩存腳本文件。在第一次訪問網頁時，絕大多數網站中的腳本文件都能被系統識別并自動保存到客戶端，也就是說，當用戶再一次訪問該網頁時，就不需要重新加載這些腳本文件。在網站服務器中，人們可以通過Expires指令設定腳本文件的保存時間，在保存有效期內，用戶再次訪問網站不用重新下載這些腳本文件。

3.3.3 將腳本文件放置于網站最底部。與前兩者不同的是，腳本文件應當放置于網站最底部，防止腳本阻止網頁組建的并行下載，確保網頁能夠按序依次出現，縮減網頁加載時間，進一步提高網站性能[9]。

3.3.4 精簡JavaScript。通常情況下，程序設計者會采用精簡的方法來刪除代碼中一些可有可無的注釋和字符，從而縮減JavaScript文件，確保網站的性能得以提升。

4 結語

本文主要深入剖析了HTML、CSS、客戶端腳本語言三種重要語言，并且從專業角度提出建議，總結出提升網站性能的具體方法。在今后的研發中，有關工作人員和企業依然要重視網站性能的研究，盡可能地從多種角度采用多種方式提升網站性能，滿足各類用戶的不同需求。

參考文獻：

[1]袁婷.淺談Web前端開發[J].無線互聯科技，2017（2）：35-36.

[2]張鑫，于涌，王典，等.Web前端技術開發的優化與研究[J].產業與科技論壇，2018（24）：55-56.

[3]白曉.Web前端開發技術以及優化方向探究[J].無線互聯科技，2019（7）：156-158.

[4]霍福華.Web前端開發技術以及優化方向[J].晉城職業技術學院學報，2017（2）：59-62.

[5]李強.Web前端開發技術與學習探討[J].長治學院學報，2016（2）：75-77.

[6]李鑫.Web前端的開發技術與優化研究[J].電腦知識與技術，2017（5）：56-57.

[7]李響.Web前端安全[J].科技創新與應用，2016（23）：92.

[8]張萃.Web前端開發技術與優化措施[J].中國管理信息化，2017（22）：153-154.

[9]邵英安.Web前端課程的教學探討[J].電腦迷，2016（8）：139.