Web前端開發(fā)技術(shù)對網(wǎng)站性能的影響發(fā)布者：本站     時間：2020-05-05 12:05:07

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

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

1.1 HTML

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

1.2 CSS

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

1.3 客戶端腳本語言

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

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

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

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

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

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

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

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

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

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

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

3.1 HTML語言應(yīng)當遵守技術(shù)標準

3.1.1 縮減HTML文檔。

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

3.1.2 減少圖片。

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

3.1.3 自動緩存網(wǎng)頁圖片。

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

3.2 CSS樣式表應(yīng)當遵守技術(shù)標準

3.2.1 縮減樣式表文件。

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

3.2.2 自動緩存樣式表文件。

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

3.2.3 將樣式表文件放置于網(wǎng)站最前端。

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

3.2.4 盡量不使用CSS表達式。

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

3.3 客戶端腳本方面應(yīng)當遵守技術(shù)標準

3.3.1 減少腳本文件。

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

3.3.2 自動緩存腳本文件。

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

3.3.3 將腳本文件放置于網(wǎng)站最底部。

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

3.3.4 精簡JavaScript。

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