Web前端開發(fā)技術(shù)以及優(yōu)化研究

目前，網(wǎng)頁制作技術(shù)已經(jīng)在不斷的發(fā)展之中，未來也會(huì)呈現(xiàn)出更加高端的前端產(chǎn)品。文章針對(duì)Web的前端開發(fā)技術(shù)進(jìn)行的分析，并基于Web前端開發(fā)技術(shù)提出相應(yīng)的優(yōu)化措施。

【關(guān)鍵詞】Web前端；開發(fā)；優(yōu)化措施

目前，我國(guó)國(guó)家已經(jīng)全面進(jìn)入了互聯(lián)網(wǎng)Web2.0時(shí)代。在這個(gè)過程中，出現(xiàn)了很多與桌面軟件相似的Web軟件。網(wǎng)站的前端開發(fā)工作也發(fā)生了重大的變化。在這個(gè)發(fā)展變化的過程中，網(wǎng)頁已經(jīng)不僅僅是對(duì)文字和圖片的承載，還能夠研發(fā)出更加生動(dòng)的網(wǎng)站內(nèi)容，這樣有效的增加了用戶的體驗(yàn)效果。而現(xiàn)階段，隨著互聯(lián)網(wǎng)技術(shù)的不斷發(fā)展，Web前端開發(fā)技術(shù)也會(huì)繼續(xù)優(yōu)化，促進(jìn)網(wǎng)站的靈活性。

1 關(guān)于Web前端開發(fā)技術(shù)的相關(guān)概念

在網(wǎng)站和網(wǎng)頁的制作過程中，Web前端開發(fā)技術(shù)主要包括HTML、CSS、JavaScript等三項(xiàng)主要的技術(shù)，這三種技術(shù)都分別具有不同的特點(diǎn)，也對(duì)代碼的質(zhì)量提出了不同的要求。不過，這三種前端開發(fā)語言之間聯(lián)系又是比較密切的。

1.1 HTML/XHTML

HTML5是一種網(wǎng)頁制作中常見的超文本標(biāo)記語言，其在結(jié)構(gòu)上是比較清晰的。這種語言能夠?qū)σ恍┻^時(shí)的標(biāo)記進(jìn)行消除，并分離展示與內(nèi)容，在對(duì)這種語言的結(jié)構(gòu)進(jìn)行改進(jìn)之后，生成的網(wǎng)頁就會(huì)顯得比較干凈，也在一定程度上提高了用戶的體驗(yàn)。XHTML語言是比較準(zhǔn)確的，這種語言的書寫標(biāo)準(zhǔn)是比較嚴(yán)格的，同時(shí)其跨平臺(tái)能力也比較強(qiáng)。

1.2 CSS

CSS這種語言是用來對(duì)網(wǎng)頁進(jìn)行控制和分離網(wǎng)頁內(nèi)容，是一種標(biāo)記性的語言，這種標(biāo)記性的語言能夠?qū)?nèi)容和表現(xiàn)分離，也能夠有效的提高網(wǎng)頁的瀏覽速度。

1.3 JavaScript

JavaScript這種語言出現(xiàn)之后，使得網(wǎng)頁信息與網(wǎng)絡(luò)用戶之間不再僅僅是瀏覽與被瀏覽的關(guān)系，還能夠?qū)ο嚓P(guān)的內(nèi)容進(jìn)行實(shí)時(shí)的表達(dá)。JavaScript能夠被嵌入到HTML文件當(dāng)中，進(jìn)而能夠讓用戶在不通過Web服務(wù)器的情況下，就能夠?yàn)g覽網(wǎng)頁，這樣就能夠有效的利用電腦資源，也有效的減輕了服務(wù)器的壓力。

1.4 DOM

W3C提出了一張新的標(biāo)準(zhǔn)API，這項(xiàng)語言標(biāo)準(zhǔn)與網(wǎng)絡(luò)平臺(tái)和網(wǎng)絡(luò)語言無關(guān)，這種語言就是DOM。DOM（語言能夠?qū)ML文檔進(jìn)行有效的抽象化。DOM這個(gè)借口與平臺(tái)、語言乃至瀏覽器之間都不存在關(guān)聯(lián)。

1.5 Ajax

Ajax這種語言的最主要的特點(diǎn)，就是其能夠在不刷新網(wǎng)頁的情況下就能夠傳輸服務(wù)器或者讀寫數(shù)據(jù)，這是非常方便的。

2 關(guān)于Web前端開發(fā)技術(shù)的優(yōu)化研究

在網(wǎng)站的構(gòu)建過程中，需要將網(wǎng)頁設(shè)計(jì)的美觀大方且服務(wù)功能比較全面，但是這樣的設(shè)計(jì)，往往無法保證其性能，這就會(huì)使得網(wǎng)站頁面有過長(zhǎng)的延遲，不能讓用戶感到滿意。因此，需要對(duì)Web前端開發(fā)技術(shù)進(jìn)行必要的優(yōu)化，主要的優(yōu)化措施如下：

2.1 適當(dāng)?shù)臏p少HTTP請(qǐng)求

為了保證網(wǎng)頁的性能，對(duì)Web前端技術(shù)進(jìn)行優(yōu)化，而在這個(gè)過程中，適當(dāng)?shù)臏p少HTTP請(qǐng)求是一項(xiàng)比較有效的措施。一個(gè)相對(duì)比較完整的HTTP請(qǐng)求，應(yīng)該包括連接服務(wù)器、DNS尋址、發(fā)送數(shù)據(jù)以及接收數(shù)據(jù)等一系列過程，而這同時(shí)又是一個(gè)比較復(fù)雜的過程中，在這個(gè)過程中，網(wǎng)站面臨的每個(gè)請(qǐng)求都會(huì)對(duì)寬帶資源進(jìn)行占用，但是瀏覽器的請(qǐng)求會(huì)在這個(gè)過程中達(dá)到上線，當(dāng)超過這個(gè)上線之后，用戶就會(huì)出現(xiàn)瀏覽網(wǎng)站速度慢的現(xiàn)象。所以應(yīng)該相應(yīng)的減少HTTP請(qǐng)求，具體的方法是將CSS文件與JavaScript文件進(jìn)行有效的合并。

2.2 適當(dāng)?shù)目s小文件

縮小文件的大小能夠?qū)SS文件與JavaScript文件進(jìn)行有效的壓縮，還能夠?qū)ζ浯a進(jìn)行必要的優(yōu)化，這樣就能夠減少文件的大小，達(dá)到對(duì)Web前端開發(fā)技術(shù)的有效優(yōu)化。

2.3 CSS和script的位置

CSS是一種層疊樣式表，在對(duì)Web開發(fā)技術(shù)進(jìn)行優(yōu)化的過程中，應(yīng)該將其放在頂部，這樣就能夠增加CSS的加在速度，也就能夠讓用戶能夠在最短的時(shí)間內(nèi)看到自己想要看到的畫面。相應(yīng)的，script應(yīng)該放在底部，這主要是避免script腳本對(duì)頁面的下載速度造成影響，這樣就能夠進(jìn)一步提高頁面的加載速度，減少頁面的加載時(shí)間，有效的提高了Web前端的性能。

2.4 進(jìn)行跨瀏覽器開發(fā)

Web前端在不同的瀏覽器上，需要不同的執(zhí)行方式，長(zhǎng)久以來，Web前端開發(fā)技術(shù)需要面對(duì)多個(gè)瀏覽器，并對(duì)這些瀏覽器進(jìn)行必要的測(cè)試，但是，這項(xiàng)工程是比較龐大的，所以不能夠?qū)λ械臑g覽器進(jìn)行測(cè)試，這也是不顯示的，所以需要進(jìn)行跨瀏覽器開發(fā)，這樣就能夠通過這項(xiàng)技術(shù)來對(duì)瀏覽器進(jìn)行測(cè)試，也完成了Web前端技術(shù)的優(yōu)化。

2.5 降低DNS的查詢次數(shù)

在網(wǎng)頁瀏覽的過程中，DNS進(jìn)行一次解析查詢需要用到120毫秒以內(nèi)的時(shí)間，所以，在DNS查詢的過程中，網(wǎng)頁瀏覽器不能夠進(jìn)行下載，這樣會(huì)對(duì)用戶造成不便，影響了用戶體驗(yàn)。所以，應(yīng)該有效的降低DNS的查詢次數(shù)，只有這樣才能夠保證網(wǎng)頁的加載速度，也才能夠讓用戶進(jìn)行正常下載。

2.6 避免出現(xiàn)404錯(cuò)誤

在網(wǎng)頁瀏覽的過程中，會(huì)經(jīng)常出現(xiàn)“404錯(cuò)誤”這種現(xiàn)象主要產(chǎn)生的原因是因?yàn)椴]有查找到應(yīng)有的文件，在這個(gè)過程中HTTP的請(qǐng)求會(huì)消耗掉大量的時(shí)間，那么使用HTTP進(jìn)行請(qǐng)求是不會(huì)得到響應(yīng)的，這樣就會(huì)出現(xiàn)404未找到頁面的錯(cuò)誤，一旦出現(xiàn)這種情況，將會(huì)對(duì)用戶體驗(yàn)造成嚴(yán)重的影響。所以，在對(duì)Web前端開發(fā)技術(shù)進(jìn)行優(yōu)化的過程中，應(yīng)該充分測(cè)試網(wǎng)站鏈接，進(jìn)而有效的降低404錯(cuò)誤。

3 結(jié)語

總而言之，Web的發(fā)展貫穿了博客到前端技術(shù)的始終，當(dāng)今時(shí)代，是一個(gè)移動(dòng)互聯(lián)網(wǎng)發(fā)展的大時(shí)代。為了在這個(gè)發(fā)展的過程中，不斷的提高用戶的體驗(yàn)效果，應(yīng)該對(duì)Web前端開發(fā)技術(shù)進(jìn)行有效的優(yōu)化，將Web與原生應(yīng)用之間進(jìn)行有效的優(yōu)勢(shì)互補(bǔ)，進(jìn)而構(gòu)成強(qiáng)大的互聯(lián)網(wǎng)生態(tài)系統(tǒng)，有效的方便了人們的生活。

參考文獻(xiàn)

[1]李幫誠(chéng).Web前端開發(fā)技術(shù)與研究[J].電腦知識(shí)與技術(shù)，2016（29）：47-49.

[2]吳睿.Web前端開發(fā)技術(shù)以及優(yōu)化研究[J].中國(guó)新通信，2016（17）：63.

[3]陳月，秦福建.Web前端開發(fā)技術(shù)以及優(yōu)化方向探究[J].信息與電腦（理論版），2016（04）：35+37.

[4]陳鯡.Web前端開發(fā)技術(shù)以及優(yōu)化方向分析[J].新媒體研究，2015（03）：39-40.

作者簡(jiǎn)介

張明哲（1993-），女，漢族，河南省安陽市人?，F(xiàn)為邵陽學(xué)院2013級(jí)計(jì)算機(jī)科學(xué)與技術(shù)專業(yè)在讀大學(xué)本科學(xué)生。

作者單位

邵陽學(xué)院 湖南省邵陽市 422000