Web 前端開發(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)峻,用戶對(duì)軟件操作流暢性的要求越來越高,并注重系統(tǒng)前端開發(fā),關(guān)注系統(tǒng)改進(jìn)開發(fā)和設(shè)計(jì)。 Web 系統(tǒng)前端開發(fā)技術(shù)的應(yīng)用和分析可以更好地促進(jìn) Web 系統(tǒng)的設(shè)計(jì)和開發(fā)。

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

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

1.1.1 HTML

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

1.1.2 CSS

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

1.1.3 JS

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

1.1.4 DOM

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

1.2 框架技術(shù)分析

1.2.1 jQuery

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

1.2.2 Angular JS

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

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

2.1 優(yōu)化HTML 頁面

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

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

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

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

2.2.2 控制DNS 查詢頻率

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

2.2.3 控制訪問請(qǐng)求鏈接數(shù)量

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

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

文件的大小和數(shù)量會(huì)對(duì)瀏覽器的運(yùn)行速度造成影響,如果文件過大或數(shù)量過多,就會(huì)給系統(tǒng)運(yùn)行增加負(fù)擔(dān),影響網(wǎng)頁運(yùn)行效率和機(jī)人交互效果［4］。 當(dāng)文件過大時(shí),會(huì)造成用戶在該頁面停留的時(shí)間較長,進(jìn)而影響網(wǎng)頁運(yùn)行效率。 而文件數(shù)量過多,也會(huì)造成系統(tǒng)內(nèi)存消耗過大。 因此需要嚴(yán)格控制文件大小,加大對(duì)文件的整合力度,將重復(fù)信息刪減。 具體的優(yōu)化方式為文件壓縮、優(yōu)化文本語言、優(yōu)化文件代碼等,可以通過多種方式結(jié)合來有效保證網(wǎng)頁運(yùn)行效率。 例如,通過優(yōu)化CSS,JS 等文本語言來優(yōu)化計(jì)算機(jī)設(shè)備信息；或者通過HTML 標(biāo)簽來提高設(shè)備界面與用戶的交互度,并對(duì)系統(tǒng)內(nèi)部信息進(jìn)行處理,減少重復(fù)或無效信息,優(yōu)化整體系統(tǒng)的內(nèi)存,從而提高網(wǎng)站瀏覽器的運(yùn)行速度。 在實(shí)踐優(yōu)化過程中,需要結(jié)合數(shù)據(jù)信息的運(yùn)行狀態(tài)及大小來進(jìn)行優(yōu)化,保證界面交互能力的同時(shí)提高系統(tǒng)應(yīng)用性能,避免占用過多網(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)行的目的是滿足用戶需求,優(yōu)質(zhì)的服務(wù)才能提高用戶滿意度。 因此,需要提高網(wǎng)站的時(shí)效性和穩(wěn)定性,結(jié)合系統(tǒng)實(shí)現(xiàn)機(jī)理及當(dāng)前網(wǎng)絡(luò)運(yùn)行環(huán)境進(jìn)行前端開發(fā)技術(shù)選用。 例如,優(yōu)化CSS 需要從它的特性出發(fā),結(jié)合網(wǎng)站來正確界定語言呈現(xiàn)效果,進(jìn)而通過整合CSS 來提高結(jié)構(gòu)優(yōu)化的可行性,實(shí)現(xiàn)網(wǎng)絡(luò)內(nèi)容有效調(diào)整。 另外,加強(qiáng)對(duì)Web 技術(shù)工程師的培養(yǎng),提高開發(fā)設(shè)計(jì)人才質(zhì)量,才能在實(shí)際開發(fā)中完成難度較高的設(shè)計(jì),實(shí)現(xiàn)技術(shù)創(chuàng)新,有效提升Web 前端開發(fā)質(zhì)量。

3 結(jié)語

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