Web前端開發(fā)技術(shù)和其對(duì)網(wǎng)站性能的影響

高慧

摘 要：Web前端開發(fā)技術(shù)可以影響網(wǎng)站性能，影響服務(wù)質(zhì)量。本文首先闡述了Web前端開發(fā)技術(shù)的有關(guān)概念，然后探討了Web前端開發(fā)技術(shù)如何影響網(wǎng)站性能，分析了Web前端開發(fā)技術(shù)的實(shí)施策略。當(dāng)前，人們要不斷優(yōu)化網(wǎng)站前端開發(fā)技術(shù)，以提升網(wǎng)站性能。

關(guān)鍵詞：前端開發(fā)技術(shù);網(wǎng)站;Web;計(jì)算機(jī)

中圖分類號(hào)：TP393.092 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：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

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

1 Web前端開發(fā)技術(shù)概述

1.1 HTML

HTML是指超文本標(biāo)記語言，一般來說，此種語言是一個(gè)網(wǎng)頁的重要組成部分。通常情況下，該種語言的主要作用是通過各種類型的標(biāo)記，進(jìn)一步區(qū)分網(wǎng)頁中不同類型的內(nèi)容，最后系統(tǒng)終端會(huì)對(duì)HTML的請求進(jìn)行解析，并根據(jù)需求向用戶顯示相應(yīng)的網(wǎng)頁內(nèi)容。

1.2 CSS

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

1.3 客戶端腳本語言

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

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

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

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

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

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

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

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

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

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

3 Web前端開發(fā)技術(shù)在具體研發(fā)過程中的運(yùn)用策略

3.1 HTML語言應(yīng)當(dāng)遵守技術(shù)標(biāo)準(zhǔn)

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

3.1.2 減少圖片。Web前端的性能會(huì)隨著圖片數(shù)量的減少而變好。為了加快網(wǎng)站加載速度，設(shè)計(jì)者可以采用合并圖片的方式來減少圖片數(shù)量。目前行業(yè)內(nèi)認(rèn)可度較高的方式主要有圖片地圖以及CSS Sprites。

3.1.3 自動(dòng)緩存網(wǎng)頁圖片。研究發(fā)現(xiàn)，在第一次訪問網(wǎng)頁時(shí)，絕大多數(shù)網(wǎng)站的圖片都?jí)虮幌到y(tǒng)識(shí)別并自動(dòng)保存到客戶端，也就是說，當(dāng)用戶再一次訪問該網(wǎng)頁時(shí)，就不需要重新加載這些圖片[6]。在網(wǎng)站服務(wù)器中，人們可以通過Expires指令設(shè)定圖片保存時(shí)間，在保存有效期內(nèi)，用戶再次訪問網(wǎng)站可以不用重新下載圖片。

3.2 CSS樣式表應(yīng)當(dāng)遵守技術(shù)標(biāo)準(zhǔn)

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

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

3.2.3 將樣式表文件放置于網(wǎng)站最前端。網(wǎng)頁按照客戶指定的順序依次出現(xiàn)能夠防止顯示屏出現(xiàn)空白，客戶能夠根據(jù)需求依次看到相應(yīng)的內(nèi)容，使客戶認(rèn)為網(wǎng)頁速度并不慢。所以，樣式表文件應(yīng)當(dāng)放置于網(wǎng)站最前端，確保網(wǎng)頁能夠依次出現(xiàn)。

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

3.3 客戶端腳本方面應(yīng)當(dāng)遵守技術(shù)標(biāo)準(zhǔn)

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

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

3.3.3 將腳本文件放置于網(wǎng)站最底部。與前兩者不同的是，腳本文件應(yīng)當(dāng)放置于網(wǎng)站最底部，防止腳本阻止網(wǎng)頁組建的并行下載，確保網(wǎng)頁能夠按序依次出現(xiàn)，縮減網(wǎng)頁加載時(shí)間，進(jìn)一步提高網(wǎng)站性能[9]。

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

4 結(jié)語

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

參考文獻(xiàn)：

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

[2]張鑫，于涌，王典，等.Web前端技術(shù)開發(fā)的優(yōu)化與研究[J].產(chǎn)業(yè)與科技論壇，2018（24）：55-56.

[3]白曉.Web前端開發(fā)技術(shù)以及優(yōu)化方向探究[J].無線互聯(lián)科技，2019（7）：156-158.

[4]霍福華.Web前端開發(fā)技術(shù)以及優(yōu)化方向[J].晉城職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2017（2）：59-62.

[5]李強(qiáng).Web前端開發(fā)技術(shù)與學(xué)習(xí)探討[J].長治學(xué)院學(xué)報(bào)，2016（2）：75-77.

[6]李鑫.Web前端的開發(fā)技術(shù)與優(yōu)化研究[J].電腦知識(shí)與技術(shù)，2017（5）：56-57.

[7]李響.Web前端安全[J].科技創(chuàng)新與應(yīng)用，2016（23）：92.

[8]張萃.Web前端開發(fā)技術(shù)與優(yōu)化措施[J].中國管理信息化，2017（22）：153-154.

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