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

朔州師范高等專(zhuān)科學(xué)校 武建業(yè)

現(xiàn)階段大眾對(duì)網(wǎng)站要求越來(lái)越高，網(wǎng)站負(fù)荷逐漸增大，網(wǎng)站性能優(yōu)化迫在眉睫。Web前端開(kāi)發(fā)技術(shù)和網(wǎng)站性能之間息息相關(guān)，為了確保該技術(shù)的應(yīng)用效果，提升網(wǎng)站服務(wù)質(zhì)量，就需要重點(diǎn)對(duì)其進(jìn)行全面分析?；诖耍恼戮蛯⒅攸c(diǎn)對(duì)該技術(shù)和其給網(wǎng)站性能帶來(lái)的影響進(jìn)行研究，以供參考。

在網(wǎng)絡(luò)技術(shù)和計(jì)算機(jī)技術(shù)不斷發(fā)展下，網(wǎng)站性能已經(jīng)成為決定網(wǎng)站流量、滿(mǎn)足網(wǎng)站客戶(hù)需求的重要因素。為了實(shí)現(xiàn)這一點(diǎn)，就需要重點(diǎn)從其前端開(kāi)發(fā)技術(shù)著手，分析其技術(shù)給網(wǎng)站性能帶來(lái)的影響。從目前實(shí)際情況來(lái)看，這類(lèi)技術(shù)當(dāng)中主要包含了HTML、CSS與客戶(hù)端腳本語(yǔ)言幾大部分，為了確保網(wǎng)站性能可以更好地滿(mǎn)足用戶(hù)需求，有關(guān)技術(shù)人員在就應(yīng)當(dāng)重點(diǎn)對(duì)該技術(shù)進(jìn)行深入分析，因此重點(diǎn)對(duì)該技術(shù)及其給網(wǎng)站性能帶來(lái)的影響進(jìn)行探究具有重大現(xiàn)實(shí)意義。

1 Web前端開(kāi)發(fā)技術(shù)

1.1 HTML語(yǔ)言

HTML語(yǔ)言是一種超文本標(biāo)記語(yǔ)言，這是網(wǎng)站制作當(dāng)中最重要的語(yǔ)言之一，也是網(wǎng)站文件當(dāng)中最關(guān)鍵的一項(xiàng)語(yǔ)言。同時(shí)這還是一種標(biāo)記性的語(yǔ)言，主要包含了各種標(biāo)記，主要在標(biāo)記之下對(duì)各類(lèi)頁(yè)面元素進(jìn)行格式化，促使其標(biāo)記內(nèi)容具備某類(lèi)特征或格式，確保網(wǎng)頁(yè)最終能夠依照設(shè)定需求呈現(xiàn)出來(lái)。由于這類(lèi)網(wǎng)頁(yè)文件要在網(wǎng)頁(yè)瀏覽器之中打開(kāi)，其程序也要在網(wǎng)頁(yè)瀏覽器之中解釋并執(zhí)行，因此使用該語(yǔ)言制作的網(wǎng)頁(yè)能夠在各類(lèi)瀏覽器之中應(yīng)用。

1.2 CSS

CSS就是層疊樣式表，是為了有效彌補(bǔ)HTML的不足而產(chǎn)生的。它并不是語(yǔ)言，而是由一系列屬性組成，主要通過(guò)屬性對(duì)各類(lèi)頁(yè)面元素進(jìn)行格式化，有些屬性能夠使其所作用的內(nèi)容具備相應(yīng)的特征或格式，確保頁(yè)面最終依照要求的格式展現(xiàn)出來(lái)。一般在給網(wǎng)頁(yè)當(dāng)中嵌入CSS代碼主要可以從這幾點(diǎn)入手：一是在需要應(yīng)用CSS樣式的標(biāo)記當(dāng)中添加；二是在STYLE標(biāo)記中添加；三是在外部樣式表文件當(dāng)中添加。

1.3 客戶(hù)端腳本語(yǔ)言

不管是HTML還是CSS都是對(duì)網(wǎng)頁(yè)進(jìn)行布局，只能對(duì)頁(yè)面格式化，而要想最終呈現(xiàn)出動(dòng)態(tài)效果，或者和用戶(hù)之間實(shí)現(xiàn)交互，就要給頁(yè)面編寫(xiě)相應(yīng)的程序，對(duì)此客戶(hù)端腳本語(yǔ)言應(yīng)運(yùn)而生。這是可以編寫(xiě)并嵌入網(wǎng)頁(yè)之中的獨(dú)立程序的編程語(yǔ)言，目前主要有JavaScript和VBScript兩類(lèi)，其中最常用的就是前者，主要通過(guò)給網(wǎng)頁(yè)嵌入其編寫(xiě)的程序，使頁(yè)面內(nèi)容或格式依照設(shè)置條件或用戶(hù)操作而產(chǎn)生變化，最終達(dá)到動(dòng)態(tài)頁(yè)面的效果。在實(shí)際嵌入時(shí)可以從這幾方面著手：一是在需要應(yīng)用腳本的標(biāo)記之中添加；二是在SCRIPT標(biāo)記中添加；三是在外部腳本文件中添加。

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

2.1 HTML帶來(lái)的影響

2.1.1 HTML文檔大小

使用HTML編寫(xiě)出的網(wǎng)頁(yè)整體是一個(gè)擴(kuò)展名為“html”的文本文件，通常稱(chēng)為HTML文檔。該文檔一般會(huì)占據(jù)相應(yīng)的存儲(chǔ)空間，一旦用戶(hù)請(qǐng)求該文件時(shí)，它就會(huì)從服務(wù)器端下載到客戶(hù)端，這一過(guò)程需要占用網(wǎng)絡(luò)寬帶，且下載需要耗費(fèi)一定時(shí)間。如果網(wǎng)速相同，該文檔越小，下載耗費(fèi)的時(shí)間就會(huì)越短，用戶(hù)就無(wú)需等待過(guò)多時(shí)間，網(wǎng)站其前端性能就會(huì)越好。

2.1.2 網(wǎng)頁(yè)圖片數(shù)量

為了保證網(wǎng)頁(yè)的美觀(guān)度往往都會(huì)使用一定數(shù)量的圖片，這些圖片都是使用HTML語(yǔ)言之中的“IMG”標(biāo)記插入的，然而圖片文件并不存在于HTML文檔之中，而是一種單獨(dú)的圖片文件，在“IMG”標(biāo)記被應(yīng)用在網(wǎng)頁(yè)當(dāng)中。一般用戶(hù)在請(qǐng)求文檔的時(shí)候，其文檔和相關(guān)圖片是分別被下載到客戶(hù)端的，所有單獨(dú)文件的下載都需要HTTP請(qǐng)求，且所有HTTP請(qǐng)求連接的構(gòu)建都要耗費(fèi)相應(yīng)的時(shí)間。因此網(wǎng)頁(yè)上圖片數(shù)量越大，HTTP請(qǐng)求數(shù)量也會(huì)越大，下載時(shí)間就會(huì)延長(zhǎng)。

2.1.3 網(wǎng)頁(yè)圖片緩存

該文檔中的所用圖片能夠被瀏覽器緩存至客戶(hù)端，如果用戶(hù)再次請(qǐng)求相同的文檔時(shí)，這些圖片便不用再次下載，由此有效降低了HTTP請(qǐng)求的數(shù)量，減少了響應(yīng)大小和用戶(hù)等待時(shí)長(zhǎng)，保證了網(wǎng)站性能。

2.2 CSS帶來(lái)的影響

2.2.1 樣式表的數(shù)量

通常情況下一個(gè)HTML文檔之中能夠加載若干個(gè)樣式表文件，與在文檔中應(yīng)用圖片的形式比較類(lèi)似。當(dāng)客戶(hù)在請(qǐng)求文檔時(shí)，其文檔與樣式表就都會(huì)被分別下載至客戶(hù)端，所有文件下載都需要HTTP請(qǐng)求，而HTTP請(qǐng)求在連接時(shí)都需要耗費(fèi)相應(yīng)的時(shí)間，因此文檔當(dāng)中樣式表數(shù)量越少，HTTP請(qǐng)求也會(huì)越少，整體下載時(shí)間也會(huì)越短。

2.2.2 樣式表緩存

對(duì)于HTML文檔而言，被加載出的樣式表文件能夠被瀏覽器直接緩存到客戶(hù)端當(dāng)中，如果用戶(hù)再次發(fā)出同一個(gè)請(qǐng)求，這些樣式表文件也不需要再次下載，因此大大縮短了請(qǐng)求時(shí)間，提升了網(wǎng)站性能。

2.2.3 樣式表位置

在HTML文檔當(dāng)中，在加載樣式表文件時(shí)除了可以直接放在文檔頂部，還能被放在底部，如果放在底部會(huì)有效阻止頁(yè)面逐步展現(xiàn)，而放在頂部則會(huì)使頁(yè)面逐步展現(xiàn)。逐步展現(xiàn)能夠最大程度上避免屏幕出現(xiàn)空白，給用戶(hù)帶來(lái)相應(yīng)的可視化回饋，確保其能夠及時(shí)看到頁(yè)面內(nèi)容，在感覺(jué)上產(chǎn)生加載速度較快的感受。

2.2.4 CSS表達(dá)式

這是動(dòng)態(tài)設(shè)置CSS屬性的一種重要方法，大多數(shù)瀏覽器都支持這類(lèi)方式。對(duì)于頁(yè)面大小改變、頁(yè)面呈現(xiàn)、鼠標(biāo)移動(dòng)以及頁(yè)面滾動(dòng)過(guò)程中，該表達(dá)式都需要重新求值，需要消耗一定時(shí)間，導(dǎo)致其表達(dá)式性能下降，從而影響網(wǎng)站性能。

2.3 客戶(hù)端腳本語(yǔ)言帶來(lái)的影響

2.3.1 客戶(hù)端腳本數(shù)量

通常一個(gè)HTML文檔能夠加載若干個(gè)客戶(hù)端腳本文件，與樣式表數(shù)量相當(dāng)，當(dāng)用戶(hù)在請(qǐng)求文檔時(shí)，文檔與客戶(hù)端腳本文件也會(huì)被分別下載至客戶(hù)端，所有單獨(dú)文件下載也都需要有相應(yīng)的HTTP請(qǐng)求，所有請(qǐng)求的連接都需要耗費(fèi)一定時(shí)間。因此當(dāng)文檔之中的客戶(hù)端腳本數(shù)量越大，HTTP請(qǐng)求數(shù)量就會(huì)越大，最終下載耗費(fèi)的時(shí)間就會(huì)越長(zhǎng)。

2.3.2 客戶(hù)端腳本緩存

對(duì)于HTML文檔來(lái)說(shuō)，被加載出的客戶(hù)端腳本文件能夠被瀏覽器直接緩存到客戶(hù)端當(dāng)中，如果用戶(hù)再次發(fā)出相同的請(qǐng)求時(shí)，這些客戶(hù)端腳本文件也不需要再次下載，因此大大縮短了請(qǐng)求時(shí)間，保證了網(wǎng)站性能。

2.3.3 客戶(hù)端腳本位置

在HTML文檔當(dāng)中，在加載客戶(hù)端腳本文件時(shí)不僅可以直接放在文檔頂部，還能被放在底部，如果將其放在頂部則會(huì)衍生出兩項(xiàng)問(wèn)題。一方面，會(huì)直接阻止頁(yè)面組間實(shí)現(xiàn)并行下載，降低下載速度；另一方面，會(huì)阻止頁(yè)面逐步展現(xiàn)，導(dǎo)致屏幕出現(xiàn)空白，無(wú)法給用戶(hù)帶來(lái)可視化回饋，不能及時(shí)看到頁(yè)面內(nèi)容，進(jìn)而在感覺(jué)上產(chǎn)生加載速度過(guò)慢的感受。

2.3.4 客戶(hù)端腳本大小

由于該類(lèi)文件本身是一種擴(kuò)展名是“JS”的文本文件，當(dāng)用戶(hù)發(fā)出文檔請(qǐng)求時(shí)，該文件就會(huì)直接被下載到客戶(hù)端上，整個(gè)過(guò)程需要耗費(fèi)一定時(shí)間。文件越小，下載所用時(shí)間就會(huì)越短，用戶(hù)等待時(shí)長(zhǎng)就會(huì)越短，網(wǎng)站性能也會(huì)越好。

3 技術(shù)應(yīng)用

3.1 HTML語(yǔ)言方面

一是對(duì)文檔進(jìn)行縮減。由于網(wǎng)站性能會(huì)隨著文檔的縮減而優(yōu)化，文檔越小，加載耗費(fèi)時(shí)間越短，因此這就可以根據(jù)實(shí)際情況對(duì)網(wǎng)站瀏覽器及服務(wù)器進(jìn)行壓縮。二是減少圖片數(shù)量。由于網(wǎng)站性能會(huì)隨著圖片數(shù)量的減少而所有優(yōu)化，為了提升網(wǎng)站加載速度，就可以通過(guò)合并圖片的形式降低圖片數(shù)量。三是自動(dòng)對(duì)網(wǎng)頁(yè)圖片進(jìn)行緩存，在首次訪(fǎng)問(wèn)網(wǎng)頁(yè)時(shí)很多網(wǎng)站圖片都能被直接識(shí)別且自動(dòng)保存至客戶(hù)端，這樣再次訪(fǎng)問(wèn)時(shí)就不需要重新加載。

3.2 CSS方面

一是對(duì)樣式表文件進(jìn)行縮減。網(wǎng)站性能會(huì)隨著樣式表文件的減少而優(yōu)化，加載速度也會(huì)隨之提升，所以這就可以依照實(shí)際情況通過(guò)合并樣式表的形式減少數(shù)量。二是自動(dòng)對(duì)樣式表文件進(jìn)行緩存，確保在首次訪(fǎng)問(wèn)網(wǎng)頁(yè)時(shí)樣式表能被直接識(shí)別且自動(dòng)保存至客戶(hù)端，這樣再次訪(fǎng)問(wèn)時(shí)就不需要重新加載。三是將樣式表文件放在網(wǎng)站前端，使網(wǎng)頁(yè)依次出現(xiàn)，以避免產(chǎn)生空白，在感覺(jué)上加快加載速度。四是最好不應(yīng)用CSS表達(dá)式，必要時(shí)可用一次性表達(dá)式等代替。

3.3 客戶(hù)端腳本方面

一是對(duì)客戶(hù)端腳本文件進(jìn)行縮減，具體可用合并方式減少數(shù)量，以此提升網(wǎng)站性能。二是自動(dòng)對(duì)客戶(hù)端腳本文件進(jìn)行緩存，確保在首次訪(fǎng)問(wèn)能被直接識(shí)別并自動(dòng)保存至客戶(hù)端，減少加載頻次。三是將文件放在網(wǎng)站最底部，使網(wǎng)頁(yè)依次出現(xiàn)，在感覺(jué)上加快加載速度。四是對(duì)JavaScript進(jìn)行精簡(jiǎn)，刪除一些不重要的字符或注釋?zhuān)源颂嵘W(wǎng)站性能。

結(jié)束語(yǔ)：總之，在網(wǎng)絡(luò)技術(shù)發(fā)展下，應(yīng)該繼續(xù)將更多精力放在提升網(wǎng)站性能上，加大對(duì)前端開(kāi)發(fā)技術(shù)的研究與探索，在網(wǎng)站性能優(yōu)化實(shí)踐中不斷推動(dòng)其技術(shù)發(fā)展，進(jìn)而實(shí)現(xiàn)最大應(yīng)用價(jià)值，滿(mǎn)足用戶(hù)需求。