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

許含坤

（福建信息職業(yè)技術(shù)學(xué)院，福建 福州 350003）

0 引言

信息化網(wǎng)絡(luò)時(shí)代,計(jì)算機(jī)軟件系統(tǒng)的發(fā)展尤為多樣化。 計(jì)算機(jī)軟件的應(yīng)用研發(fā)環(huán)境日趨嚴(yán)峻,用戶(hù)對(duì)軟件操作流暢性的要求越來(lái)越高,并注重系統(tǒng)前端開(kāi)發(fā),關(guān)注系統(tǒng)改進(jìn)開(kāi)發(fā)和設(shè)計(jì)。 Web 系統(tǒng)前端開(kāi)發(fā)技術(shù)的應(yīng)用和分析可以更好地促進(jìn) Web 系統(tǒng)的設(shè)計(jì)和開(kāi)發(fā)。

1 Web 前端開(kāi)發(fā)技術(shù)及框架技術(shù)分析

1.1 開(kāi)發(fā)技術(shù)

1.1.1 HTML

中文名為超文本標(biāo)記語(yǔ)言,可以促使整個(gè)數(shù)據(jù)結(jié)構(gòu)現(xiàn)實(shí)的更為清晰［1］。 應(yīng)用 HTML 進(jìn)行文檔編寫(xiě),能夠?qū)⒛撤N需要表達(dá)的信息編織成HTML 文件,就可以使用瀏覽器來(lái)識(shí)別該文件。 HTML 擁有通過(guò)標(biāo)簽將圖片、視頻、文字進(jìn)行解析顯示的功能,但需要基于瀏覽器才能操作,從而在網(wǎng)絡(luò)界面上形成一個(gè)等位的閱讀效果,加強(qiáng)對(duì)某類(lèi)信息的精準(zhǔn)捕捉。 使用HTML,能夠?qū)崿F(xiàn)在不同文件間的跳轉(zhuǎn),從而在移動(dòng)設(shè)備終端進(jìn)行應(yīng)用,實(shí)現(xiàn)文本語(yǔ)言與網(wǎng)絡(luò)體系的精準(zhǔn)對(duì)接。

1.1.2 CSS

中文名為層疊樣式表,主要用于實(shí)現(xiàn)標(biāo)記語(yǔ)言分離,從而提升網(wǎng)站的獨(dú)立性,滿(mǎn)足Web 日益增長(zhǎng)的開(kāi)發(fā)需求。 隨著用戶(hù)對(duì)系統(tǒng)的需求不斷變多,導(dǎo)致HTML需要滿(mǎn)足更為復(fù)雜的功能,造成HTML 越來(lái)越臃腫,容易出現(xiàn)界面雜亂的情況。 因此,需要借助CSS 實(shí)現(xiàn)對(duì)不同像素級(jí)別的控制和支持,如對(duì)動(dòng)態(tài)類(lèi)、靜態(tài)類(lèi)信息進(jìn)行格結(jié)構(gòu)化控制,保證頁(yè)面的可編輯性。

1.1.3 JS

一種腳本語(yǔ)言,具有即時(shí)解釋的功能,能夠同時(shí)支持多種運(yùn)行風(fēng)格［2］。 JS 的解釋器是瀏覽器的重要組成部分,既能支持信息對(duì)象,又能完成函數(shù)式編程,被廣泛應(yīng)用于客戶(hù)端的相關(guān)動(dòng)態(tài)功能設(shè)計(jì)開(kāi)發(fā)。 需要注意的是,JS 在運(yùn)行過(guò)程中不能對(duì)信息代碼進(jìn)行預(yù)期解釋,并通過(guò)該方式來(lái)減輕系統(tǒng)的運(yùn)行壓力。 將其應(yīng)用到Web 前端開(kāi)發(fā)中,主要是為了實(shí)現(xiàn)HTML 網(wǎng)頁(yè)的動(dòng)態(tài)功能,有效避免頁(yè)面運(yùn)行中產(chǎn)生過(guò)多的交互行為,確保運(yùn)行數(shù)據(jù)的唯一性,從而提高信息的精準(zhǔn)度。

1.1.4 DOM

JS 的重要組成部分,中文名為文檔對(duì)象模型,是一種獨(dú)立于平臺(tái)的開(kāi)發(fā)技術(shù),能夠?qū)崿F(xiàn)對(duì)文檔結(jié)構(gòu)和內(nèi)容的修改及訪(fǎng)問(wèn),是常見(jiàn)的處理HTML 或者是XML 文檔的方法。 在計(jì)算機(jī)前端開(kāi)發(fā)初期,人們僅將其作為處理JavaScript 的重要組成部分,實(shí)現(xiàn)JS 在不同瀏覽器之間的移植。 但隨著Web 前端開(kāi)發(fā)技術(shù)應(yīng)用程度逐漸深入,DOM 有了更為寬廣的應(yīng)用范圍,能夠?qū)崿F(xiàn)對(duì)用戶(hù)頁(yè)面的動(dòng)態(tài)變化進(jìn)行監(jiān)控,增強(qiáng)Web 頁(yè)面交互性。

1.2 框架技術(shù)分析

1.2.1 jQuery

JS 的工具箱,擁有多種前端開(kāi)發(fā)工具類(lèi)型,設(shè)計(jì)者可以結(jié)合具體開(kāi)發(fā)需求合理使用jQuery,從而能夠快速構(gòu)建一個(gè)優(yōu)秀的JavaScript 框架。 使用jQuery 的過(guò)程中,會(huì)對(duì)JS 的功能代碼產(chǎn)生一定影響,只能完成較為簡(jiǎn)便的JS 設(shè)計(jì)開(kāi)發(fā)模式,提高系統(tǒng)的事件處理效率和動(dòng)畫(huà)設(shè)計(jì)。 jQuery 具有高效靈活的CSS 選擇器、獨(dú)特的鏈?zhǔn)秸Z(yǔ)法及多功能接口,能夠滿(mǎn)足對(duì)CSS 選擇器的擴(kuò)展,完成相關(guān)插件拓展,提升頁(yè)面動(dòng)態(tài)效果。

1.2.2 Angular JS

一種基于Google 開(kāi)發(fā)的框架技術(shù),能夠起到改進(jìn)和維護(hù) JavaScript 的作用［3］。 構(gòu)建 Angular JS 框架能夠拓展傳統(tǒng)HTML 代碼,提高頁(yè)面元素與動(dòng)態(tài)內(nèi)容的聯(lián)系,促使兩者完成雙向綁定。 在Web 前端開(kāi)發(fā)中構(gòu)建Angular JS 框架,能夠獨(dú)立于其他JavaScript 框架,直接通過(guò)Angular JS 框架就能完成Web 相關(guān)應(yīng)用構(gòu)建,實(shí)現(xiàn)端對(duì)端的完整對(duì)接。

2 Web 前端開(kāi)發(fā)技術(shù)優(yōu)化分析

2.1 優(yōu)化HTML 頁(yè)面

HTML 頁(yè)面的效果將直接影響到Web 前端開(kāi)發(fā)質(zhì)量,要想實(shí)現(xiàn)Web 前端開(kāi)發(fā)技術(shù)優(yōu)化,首要是對(duì)HTML頁(yè)面進(jìn)行優(yōu)化。 在系統(tǒng)中,HTML 頁(yè)面是瀏覽器運(yùn)行的關(guān)鍵技術(shù),如果能夠優(yōu)化HTML 頁(yè)面,就能提升網(wǎng)頁(yè)加載速度并優(yōu)化瀏覽器視覺(jué)效果,進(jìn)而為瀏覽器用戶(hù)提供更加優(yōu)質(zhì)的服務(wù)。 因此,注重對(duì)HTML 頁(yè)面進(jìn)行優(yōu)化,可以有效提高用戶(hù)的滿(mǎn)意度,避免用戶(hù)在過(guò)長(zhǎng)的等待時(shí)間中產(chǎn)生逆反心理,或是在雜亂無(wú)章的網(wǎng)頁(yè)中心煩意亂。 在進(jìn)行HTML 頁(yè)面具體優(yōu)化時(shí),要注意減少過(guò)于復(fù)雜的代碼和過(guò)多的頁(yè)面跳轉(zhuǎn)次數(shù),盡量避免頁(yè)面因?yàn)榧虞d內(nèi)容過(guò)多或負(fù)載過(guò)大而產(chǎn)生問(wèn)題,提升用戶(hù)的瀏覽體驗(yàn)感。

2.2 控制申請(qǐng)頻率

2.2.1 控制URL 申請(qǐng)次數(shù)

在瀏覽器運(yùn)行過(guò)程中,HTML 頁(yè)面會(huì)收到多次URL 申請(qǐng),一旦申請(qǐng)頻率過(guò)密,就會(huì)導(dǎo)致HTML 頁(yè)面負(fù)載過(guò)大,進(jìn)而影響頁(yè)面的加載效率和加載速度。 因此,相關(guān)設(shè)計(jì)人員需要優(yōu)化頁(yè)面跳轉(zhuǎn)頻率,保障用戶(hù)瀏覽速度,避免由于跳轉(zhuǎn)不及時(shí)而導(dǎo)致用戶(hù)產(chǎn)生的逆反心理。

2.2.2 控制DNS 查詢(xún)頻率

DNS 查詢(xún)頻率也會(huì)對(duì)瀏覽器頁(yè)面加載速度造成影響,在瀏覽器運(yùn)行過(guò)程中,需要對(duì)每個(gè)DNS 查詢(xún)進(jìn)行解析,一旦DNS 查詢(xún)頻率過(guò)多,就會(huì)消耗大量時(shí)間來(lái)完成DNS 解析操作,進(jìn)而影響網(wǎng)頁(yè)的加載速度。 就瀏覽器來(lái)說(shuō),必須在完成DNS 解析后才能開(kāi)展加載工作,這樣就會(huì)影響服務(wù)器和瀏覽器的運(yùn)行效率,控制DNS 查詢(xún)頻率就能有效保障兩者的運(yùn)行效率,進(jìn)而為用戶(hù)提供優(yōu)質(zhì)服務(wù)。

2.2.3 控制訪(fǎng)問(wèn)請(qǐng)求鏈接數(shù)量

當(dāng)網(wǎng)頁(yè)存在某個(gè)協(xié)議響應(yīng)時(shí)間過(guò)長(zhǎng)時(shí),就會(huì)出現(xiàn)自動(dòng)發(fā)送某類(lèi)請(qǐng)求協(xié)議的行為,這樣的現(xiàn)象會(huì)在一定程度上加大系統(tǒng)的運(yùn)行負(fù)載,影響到系統(tǒng)運(yùn)行速度。

2.3 優(yōu)化文件大小

文件的大小和數(shù)量會(huì)對(duì)瀏覽器的運(yùn)行速度造成影響,如果文件過(guò)大或數(shù)量過(guò)多,就會(huì)給系統(tǒng)運(yùn)行增加負(fù)擔(dān),影響網(wǎng)頁(yè)運(yùn)行效率和機(jī)人交互效果［4］。 當(dāng)文件過(guò)大時(shí),會(huì)造成用戶(hù)在該頁(yè)面停留的時(shí)間較長(zhǎng),進(jìn)而影響網(wǎng)頁(yè)運(yùn)行效率。 而文件數(shù)量過(guò)多,也會(huì)造成系統(tǒng)內(nèi)存消耗過(guò)大。 因此需要嚴(yán)格控制文件大小,加大對(duì)文件的整合力度,將重復(fù)信息刪減。 具體的優(yōu)化方式為文件壓縮、優(yōu)化文本語(yǔ)言、優(yōu)化文件代碼等,可以通過(guò)多種方式結(jié)合來(lái)有效保證網(wǎng)頁(yè)運(yùn)行效率。 例如,通過(guò)優(yōu)化CSS,JS 等文本語(yǔ)言來(lái)優(yōu)化計(jì)算機(jī)設(shè)備信息；或者通過(guò)HTML 標(biāo)簽來(lái)提高設(shè)備界面與用戶(hù)的交互度,并對(duì)系統(tǒng)內(nèi)部信息進(jìn)行處理,減少重復(fù)或無(wú)效信息,優(yōu)化整體系統(tǒng)的內(nèi)存,從而提高網(wǎng)站瀏覽器的運(yùn)行速度。 在實(shí)踐優(yōu)化過(guò)程中,需要結(jié)合數(shù)據(jù)信息的運(yùn)行狀態(tài)及大小來(lái)進(jìn)行優(yōu)化,保證界面交互能力的同時(shí)提高系統(tǒng)應(yīng)用性能,避免占用過(guò)多網(wǎng)絡(luò)資源。 對(duì)數(shù)據(jù)文本進(jìn)行整合,能夠提升文本處理效率,進(jìn)而提高網(wǎng)絡(luò)的運(yùn)行速度。

2.4 調(diào)整網(wǎng)絡(luò)內(nèi)容

網(wǎng)站運(yùn)行的目的是滿(mǎn)足用戶(hù)需求,優(yōu)質(zhì)的服務(wù)才能提高用戶(hù)滿(mǎn)意度。 因此,需要提高網(wǎng)站的時(shí)效性和穩(wěn)定性,結(jié)合系統(tǒng)實(shí)現(xiàn)機(jī)理及當(dāng)前網(wǎng)絡(luò)運(yùn)行環(huán)境進(jìn)行前端開(kāi)發(fā)技術(shù)選用。 例如,優(yōu)化CSS 需要從它的特性出發(fā),結(jié)合網(wǎng)站來(lái)正確界定語(yǔ)言呈現(xiàn)效果,進(jìn)而通過(guò)整合CSS 來(lái)提高結(jié)構(gòu)優(yōu)化的可行性,實(shí)現(xiàn)網(wǎng)絡(luò)內(nèi)容有效調(diào)整。 另外,加強(qiáng)對(duì)Web 技術(shù)工程師的培養(yǎng),提高開(kāi)發(fā)設(shè)計(jì)人才質(zhì)量,才能在實(shí)際開(kāi)發(fā)中完成難度較高的設(shè)計(jì),實(shí)現(xiàn)技術(shù)創(chuàng)新,有效提升Web 前端開(kāi)發(fā)質(zhì)量。

3 結(jié)語(yǔ)

綜上所述,Web 前端開(kāi)發(fā)技術(shù)已經(jīng)成為改進(jìn)和維護(hù)瀏覽器運(yùn)行質(zhì)量的重要技術(shù),對(duì)系統(tǒng)交互、調(diào)節(jié)有著重要意義。 因此,需要對(duì)Web 開(kāi)發(fā)技術(shù)進(jìn)行優(yōu)化,可從優(yōu)化頁(yè)面、控制申請(qǐng)頻次、優(yōu)化文件等方面出發(fā),對(duì)Web 前端開(kāi)發(fā)技術(shù)進(jìn)行深入分析和優(yōu)化。