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

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

現(xiàn)階段大眾對網(wǎng)站要求越來越高，網(wǎng)站負(fù)荷逐漸增大，網(wǎng)站性能優(yōu)化迫在眉睫。Web前端開發(fā)技術(shù)和網(wǎng)站性能之間息息相關(guān)，為了確保該技術(shù)的應(yīng)用效果，提升網(wǎng)站服務(wù)質(zhì)量，就需要重點對其進行全面分析。基于此，文章就將重點對該技術(shù)和其給網(wǎng)站性能帶來的影響進行研究，以供參考。

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

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

1.1 HTML語言

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

1.2 CSS

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

1.3 客戶端腳本語言

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

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

2.1 HTML帶來的影響

2.1.1 HTML文檔大小

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

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

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

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

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

2.2 CSS帶來的影響

2.2.1 樣式表的數(shù)量

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

2.2.2 樣式表緩存

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

2.2.3 樣式表位置

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

2.2.4 CSS表達式

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

2.3 客戶端腳本語言帶來的影響

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

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

2.3.2 客戶端腳本緩存

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

2.3.3 客戶端腳本位置

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

2.3.4 客戶端腳本大小

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

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

3.1 HTML語言方面

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

3.2 CSS方面

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

3.3 客戶端腳本方面

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

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