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

肖群欒

摘 要：現(xiàn)階段，信息化技術(shù)已經(jīng)在多個(gè)領(lǐng)域都有所應(yīng)用，信息化技術(shù)的應(yīng)用有效促進(jìn)了社會(huì)的進(jìn)步，信息化技術(shù)在發(fā)展過(guò)程中也不斷的進(jìn)行改良以及優(yōu)化，現(xiàn)階段我國(guó)已經(jīng)步入Web2.0時(shí)代。Web前端開(kāi)發(fā)技術(shù)時(shí)基于網(wǎng)頁(yè)制作所產(chǎn)生的一種新興技術(shù)，同時(shí)也是一種時(shí)代的體現(xiàn)。但由于Web前端開(kāi)發(fā)技術(shù)與網(wǎng)頁(yè)制作技術(shù)二者之間區(qū)別明顯。網(wǎng)頁(yè)制作技術(shù)主要展現(xiàn)靜態(tài)事物，隨著Web2.0時(shí)代的到來(lái)，人們對(duì)瀏覽網(wǎng)頁(yè)的要求也越來(lái)越高，針對(duì)這種情況，傳統(tǒng)的網(wǎng)頁(yè)制作已經(jīng)難以滿足人們的需求，因此，要加大對(duì)Web前段開(kāi)發(fā)技術(shù)以及優(yōu)化進(jìn)行研究。本文以Web前端開(kāi)發(fā)技術(shù)及優(yōu)化為研究問(wèn)題，對(duì)其開(kāi)發(fā)以及優(yōu)化方向進(jìn)行分析介紹，僅供參考。

關(guān)鍵詞：Web;開(kāi)發(fā)技術(shù);優(yōu)化

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

（一）HTML5

HTML5是一種文本語(yǔ)言，能夠清晰的將網(wǎng)頁(yè)的結(jié)構(gòu)所體現(xiàn)出來(lái)，與傳統(tǒng)的網(wǎng)頁(yè)設(shè)計(jì)相比，HTML5能夠使程序通過(guò)Web瀏覽器運(yùn)行，同時(shí)將視頻等其他插件融入到Web瀏覽器當(dāng)中，使瀏覽器成為一種通用的平臺(tái)，這能大大的提高用戶在使用Web瀏覽器時(shí)的便捷性。同時(shí)，將HTML5應(yīng)用到智能手機(jī)上也取得了良好的效果，所以，加強(qiáng)對(duì)HTML5的研究能夠促進(jìn)Web前端技術(shù)的開(kāi)發(fā)。

（二）CSS

在進(jìn)行Web開(kāi)發(fā)時(shí)，CSS技術(shù)主要用于網(wǎng)頁(yè)樣式設(shè)計(jì)，同時(shí)能夠區(qū)分網(wǎng)頁(yè)樣式以及網(wǎng)頁(yè)消息，有效提高瀏覽網(wǎng)頁(yè)的速度。CSS是一種計(jì)算機(jī)語(yǔ)言，其能夠表示HTML以及XML，并且可以支持眾多不同的字號(hào)以及不同的字體，這能夠使Web前端開(kāi)發(fā)對(duì)網(wǎng)頁(yè)的設(shè)計(jì)更加準(zhǔn)確，進(jìn)而提升網(wǎng)頁(yè)的顯示效果，優(yōu)化網(wǎng)頁(yè)的寫(xiě)法。CSS代碼較為精簡(jiǎn)，因此網(wǎng)頁(yè)布局修改以及調(diào)整難度較低，可以大幅提升其訪問(wèn)速度與開(kāi)發(fā)效率[1]。

（三）DOM

DOM技術(shù)在Web前端開(kāi)發(fā)過(guò)程中其作用是極其重要的，DOM是一種與語(yǔ)言以及平臺(tái)無(wú)關(guān)的應(yīng)用程序端口，DOM可以將XML文檔抽象化，形成一個(gè)由節(jié)點(diǎn)構(gòu)成的樹(shù)形數(shù)據(jù)結(jié)構(gòu)，進(jìn)而提升頁(yè)面的交互性，實(shí)現(xiàn)異構(gòu)訪問(wèn)的功能以及訪問(wèn)頁(yè)面其他標(biāo)準(zhǔn)組件功能。

（四）AJAX

AJAX技術(shù)使用DOM作動(dòng)態(tài)顯示以及交互，可以在一定程度上減少服務(wù)器和后臺(tái)數(shù)據(jù)之間的交互量，使得網(wǎng)頁(yè)能夠異步更新，降低請(qǐng)求信息量，提升網(wǎng)絡(luò)速度以及穩(wěn)定性。

（五）JavaScript

JavaScript的出現(xiàn)提高了Netscape Navigator的使用功能，使得用戶與信息之間不僅是瀏覽的關(guān)系，二者之間能夠進(jìn)行更深一步的表達(dá)以及理解。

二、Web優(yōu)化方向

現(xiàn)階段，雖然Web前端開(kāi)發(fā)技術(shù)在不斷進(jìn)行優(yōu)化以及升級(jí)，其技能種類(lèi)數(shù)量也逐漸上升，但在實(shí)際應(yīng)用過(guò)程中仍有一定的不足，這將直接影響網(wǎng)頁(yè)的相應(yīng)速度以及訪問(wèn)速度，使網(wǎng)頁(yè)延遲較長(zhǎng)，因此對(duì)Web進(jìn)行優(yōu)化就顯得尤為重要。對(duì)Web進(jìn)行優(yōu)化不但可以提高其性能，同時(shí)還可以優(yōu)化視覺(jué)效果，可通過(guò)以下幾點(diǎn)對(duì)Web進(jìn)行優(yōu)化。

（一）對(duì)文件的大小進(jìn)行優(yōu)化

文件的過(guò)大將會(huì)直接導(dǎo)致網(wǎng)頁(yè)加載速度降低，并且還會(huì)提高網(wǎng)頁(yè)的響應(yīng)時(shí)間以及降低互動(dòng)性能，造成網(wǎng)絡(luò)延遲上升，嚴(yán)重時(shí)甚至?xí)霈F(xiàn)無(wú)響應(yīng)狀態(tài)，導(dǎo)致網(wǎng)頁(yè)崩潰[2]。所以，應(yīng)有效降低文件的大小。因此可刪除一些不需要的html標(biāo)簽，并且還應(yīng)壓縮JavaScript，對(duì)CSS文件以及代碼進(jìn)行優(yōu)化，有效提高其運(yùn)行效率，提高CSS文件加載速度，使網(wǎng)頁(yè)內(nèi)容能夠逐步呈現(xiàn)給客戶，與傳統(tǒng)技術(shù)條件下頁(yè)面長(zhǎng)時(shí)間處于空白的情況相比，能夠有效提升用戶的使用體驗(yàn)，使頁(yè)面加載更加合理。

（二）對(duì)DNS查詢進(jìn)行優(yōu)化

DNS查詢能夠直接影響加載速度的快慢，每當(dāng)頁(yè)面解析一次DNS少則需要20毫秒，多則需要120毫秒。所以，DNS查詢與加載速度成反比，同時(shí)在DNS解析過(guò)程中，該頁(yè)面任何信息都不能加載，只有DNS解析結(jié)束后，才能繼續(xù)加載信息[3]。因此，應(yīng)對(duì)DNS查詢進(jìn)行優(yōu)化，進(jìn)而提升加載速度，避免出現(xiàn)多次解析DNS的情況發(fā)生。

（三）降低HTTP錯(cuò)誤

出現(xiàn)HTTP錯(cuò)誤時(shí)將會(huì)導(dǎo)致頁(yè)面處于一種無(wú)響應(yīng)的狀態(tài)，造成頁(yè)面直接崩潰，這將會(huì)直接影響用戶的使用感受。HTTP錯(cuò)誤大多是因?yàn)镠TTP請(qǐng)求不能被處理以及處理時(shí)間較長(zhǎng)或頁(yè)面無(wú)法找到相應(yīng)文件所導(dǎo)致的。所以，想要提升運(yùn)行效率，減少無(wú)用相應(yīng)的產(chǎn)生，應(yīng)減少HTTP錯(cuò)誤，并對(duì)Web服務(wù)器以及頁(yè)面鏈接進(jìn)行改善，進(jìn)而減少HTTP錯(cuò)誤的產(chǎn)生。

（四）對(duì)HTTP請(qǐng)求進(jìn)行優(yōu)化

HTTP請(qǐng)求包括資源標(biāo)識(shí)符、消息首行以及DNS尋址等多個(gè)方面，所以應(yīng)對(duì)HTTP請(qǐng)求進(jìn)行優(yōu)化，進(jìn)而降低其響應(yīng)時(shí)間，降低訪問(wèn)以及資源占用時(shí)間成本。實(shí)際上，一個(gè)完整的HTTP請(qǐng)求處理過(guò)程其時(shí)間較長(zhǎng)，并且復(fù)雜程度較高。所以，假使HTTP請(qǐng)求數(shù)量較多，這將會(huì)嚴(yán)重占用寬帶資源，導(dǎo)致相應(yīng)時(shí)間上升，加載速度降低，嚴(yán)重時(shí)會(huì)造成頁(yè)面難以正常加載，造成無(wú)響應(yīng)的情況產(chǎn)生。因此，要對(duì)HTTP請(qǐng)求進(jìn)行優(yōu)化，通過(guò)合并文件以及內(nèi)聯(lián)文件的方式來(lái)降低HTTP請(qǐng)求數(shù)量。

（五）避免重定向

頁(yè)面重定向?qū)?huì)導(dǎo)致時(shí)間消耗。導(dǎo)致重定向問(wèn)題出現(xiàn)的原因眾多，重定向次數(shù)與Web請(qǐng)求次數(shù)成正比，所以需要控制重定向出現(xiàn)次數(shù)較多的問(wèn)題，可在Web站點(diǎn)子目錄后加“/”，這樣能夠有效避免重定向過(guò)多的問(wèn)題出現(xiàn)。

三、結(jié)語(yǔ)

隨著我國(guó)社會(huì)的進(jìn)步，信息技術(shù)也得到了良好的發(fā)展，信息網(wǎng)絡(luò)化技術(shù)已經(jīng)得到了良好的普及，在各個(gè)領(lǐng)域都有所應(yīng)用，發(fā)展前景良好。隨著技術(shù)的不斷應(yīng)用，許多問(wèn)題也凸顯出來(lái)，較為明顯的問(wèn)題包括使用性能、穩(wěn)定程度以及安全問(wèn)題等。應(yīng)用在Web前端開(kāi)發(fā)技術(shù)過(guò)程中，一些Web界面經(jīng)常出現(xiàn)崩盤(pán)、資源占有過(guò)大、反應(yīng)較慢的問(wèn)題。所以，應(yīng)采取相應(yīng)的措施對(duì)其現(xiàn)有的問(wèn)題進(jìn)行改善，提升用戶的使用體驗(yàn)。

參考文獻(xiàn)：

[1]周文君.基于網(wǎng)站制作的Web前端開(kāi)發(fā)技術(shù)與優(yōu)化[J].電子技術(shù)與軟件工程，2017，0（10）：60-60.

[2]江濤，謝世芳.Web前端開(kāi)發(fā)技術(shù)HTML5與CSS3的融合及未來(lái)發(fā)展趨勢(shì)[J].電腦編程技巧與維護(hù)，2019，0（4）：170-172.

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