公務(wù)員期刊網(wǎng) 論文中心 正文

網(wǎng)站制作Web前端開發(fā)技術(shù)與優(yōu)化淺探

前言:想要寫出一篇引人入勝的文章?我們特意為您整理了網(wǎng)站制作Web前端開發(fā)技術(shù)與優(yōu)化淺探范文,希望能給你帶來靈感和參考,敬請(qǐng)閱讀。

網(wǎng)站制作Web前端開發(fā)技術(shù)與優(yōu)化淺探

摘要:本文以網(wǎng)站制作為背景,闡述web前端開發(fā)技術(shù)的基本狀況,明確其中不足之處,由此提出優(yōu)化方向,并從HTTP請(qǐng)求、文件規(guī)模、內(nèi)容、DNS查詢次數(shù)及工程師培訓(xùn)等方面進(jìn)行具體論述,旨在為網(wǎng)站優(yōu)化提供一些建設(shè)性意見。

關(guān)鍵詞:Web前端;開發(fā)技術(shù);網(wǎng)站制作;HTTP

因科學(xué)技術(shù)的良好發(fā)展,加之社會(huì)需求的不斷變化,網(wǎng)站制作規(guī)模得以擴(kuò)大,其種類與形式逐步增多。在此發(fā)展進(jìn)程中,技術(shù)的合理應(yīng)用成為網(wǎng)站制作效果的主要影響因素,也與用戶的瀏覽體驗(yàn)息息相關(guān),其中Web前端開發(fā)技術(shù)具有重要地位[1-3],該技術(shù)的出現(xiàn)改變了圖文展現(xiàn)形式,網(wǎng)站的動(dòng)態(tài)化特性更加鮮明,為網(wǎng)頁瀏覽者提供了富有趣味的體驗(yàn)。

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

從技術(shù)層面來看,Web前端開發(fā)技術(shù)的應(yīng)用效果建立在HTML、JavaScript、CSS的基礎(chǔ)上。作為典型的計(jì)算機(jī)語言,三者獨(dú)具特色,各自對(duì)應(yīng)的執(zhí)行標(biāo)準(zhǔn)存在差異。但根據(jù)Web前端開發(fā)經(jīng)驗(yàn)得知,彼此間具有緊密的關(guān)聯(lián),形成了相互促進(jìn)的關(guān)系,因此在Web前端開發(fā)技術(shù)優(yōu)化工作中必須注重三類計(jì)算機(jī)語言,其具體關(guān)系見圖1。網(wǎng)絡(luò)環(huán)境中應(yīng)用最為典型的當(dāng)屬B/S結(jié)構(gòu),其具有突出特點(diǎn)。從當(dāng)前的網(wǎng)絡(luò)環(huán)境來看,由于需求量的增加,網(wǎng)頁常伴隨有或大或小的問題,給用戶的體驗(yàn)造成不良影響。對(duì)此,以何種方式改進(jìn)并為用戶創(chuàng)造良好的網(wǎng)頁體驗(yàn)尤為關(guān)鍵,而這也正是Web前端開發(fā)技術(shù)最為根本的應(yīng)用目標(biāo)[4]。從用戶的操作習(xí)慣來看,會(huì)根據(jù)自身的需求從網(wǎng)址進(jìn)行輸入,此時(shí)將會(huì)產(chǎn)生請(qǐng)求,即對(duì)應(yīng)一個(gè)URL。在上述基礎(chǔ)上,服務(wù)器運(yùn)行,通過對(duì)域名的分析后產(chǎn)生IP地址,以此為依據(jù)令計(jì)算機(jī)訪問該地址,最終呈現(xiàn)出具體的內(nèi)容。在此過程中,瀏覽器的作用在于整理數(shù)據(jù),經(jīng)過排版后將內(nèi)容呈現(xiàn)出來,以便為用戶瀏覽。整個(gè)流程中含多個(gè)細(xì)分環(huán)節(jié),彼此間緊密關(guān)聯(lián),具體流程見圖2。Web前端開發(fā)技術(shù)具有系統(tǒng)性,其涵蓋了多方面信息和數(shù)據(jù),高效運(yùn)行的關(guān)鍵在于鏈接及數(shù)據(jù)庫的建立要在短時(shí)間內(nèi)以精準(zhǔn)的方式完成[5-6]。以Web服務(wù)器為例,其具備靈活調(diào)用資源的特點(diǎn),如URL參數(shù)等,從而產(chǎn)生組織數(shù)據(jù)并創(chuàng)建相應(yīng)的HTML頁面。多數(shù)情況下,服務(wù)器均能夠良好的服務(wù)于HTTP的請(qǐng)求,且兼具傳輸文件的功能;與之不同的是,瀏覽器的功能主要體現(xiàn)在接收文件這一層面。

2Web前端優(yōu)化

網(wǎng)頁是實(shí)現(xiàn)信息傳遞的載體,能夠契合于用戶所提出的具體要求[7]。在互聯(lián)網(wǎng)環(huán)境中,影響用戶瀏覽體驗(yàn)的影響因素較多,主要體現(xiàn)在信息獲取效率低(獲取時(shí)間長)、呈現(xiàn)效果欠佳兩個(gè)方面。而從提供信息的角度來看,信息價(jià)值并未得到充分的體現(xiàn);但就獲取信息層面而言,諸如信息獲取效率低等問題都將破壞信息對(duì)稱環(huán)境,嚴(yán)重時(shí)其影響還會(huì)擴(kuò)展至社會(huì)行為層面。因此,基于Web前端開發(fā)技術(shù)的深度優(yōu)化極具必要性。

3基于網(wǎng)站制作的Web前端開發(fā)技術(shù)與優(yōu)化

網(wǎng)站制作Web前端開發(fā)技術(shù)與優(yōu)化措施許躍穎(北京師范大學(xué)珠海分校廣東省珠海市519000)Web技術(shù)開發(fā)工作中,主要任務(wù)在于“完善”。然而,盡管網(wǎng)頁的完善是重要的內(nèi)容,但僅憑此項(xiàng)工作依然難以滿足現(xiàn)代社會(huì)對(duì)于網(wǎng)站使用的需求。針對(duì)此問題,應(yīng)當(dāng)對(duì)技術(shù)采取深度的優(yōu)化措施。

3.1針對(duì)HTTP請(qǐng)求的優(yōu)化

信息實(shí)現(xiàn)傳遞并展現(xiàn)給用戶的關(guān)鍵載體在于網(wǎng)頁,而這也直接表明了網(wǎng)頁的價(jià)值所在,基于網(wǎng)頁的形式,用戶可獲得滿足自身所需的信息。置身于互聯(lián)網(wǎng)大環(huán)境下,信息的體量較大,其具備實(shí)時(shí)更新的特點(diǎn),因此對(duì)于信息獲取的時(shí)間提出更高的要求,其需要控制在最佳值內(nèi),從而達(dá)到吸引更多用戶的效果,此時(shí)用戶才能夠快速瀏覽信息。網(wǎng)頁僅發(fā)揮出信息傳遞的作用,但信息所具備的價(jià)值則無法基于網(wǎng)頁的途徑而體現(xiàn)。若從獲取信息的角度來看,此時(shí)信息的性質(zhì)發(fā)生變化,它將對(duì)社會(huì)行為帶來影響?;诖颂攸c(diǎn),我們可以對(duì)HTTP請(qǐng)求的優(yōu)化形成更準(zhǔn)確的認(rèn)知,可將其視為Web前端開發(fā)技術(shù)優(yōu)化中的重要組成部分。作為完整的HTTP請(qǐng)求,它涵蓋的內(nèi)容較為寬泛,體現(xiàn)在數(shù)據(jù)發(fā)送、建立瀏覽器鏈接等多個(gè)層面。而伴隨環(huán)境的改變,HTTP請(qǐng)求所對(duì)應(yīng)的時(shí)間各不相同,當(dāng)各請(qǐng)求的時(shí)間發(fā)生疊加后,則會(huì)帶來時(shí)間成本增多的情況,此情況下網(wǎng)絡(luò)資源未得到充分的利用,存在極為明顯的資源浪費(fèi)現(xiàn)象。因此在HTTP請(qǐng)求優(yōu)化中,其核心內(nèi)容則指的是對(duì)時(shí)間使用的優(yōu)化,且最為關(guān)鍵的切入點(diǎn)則是對(duì)請(qǐng)求數(shù)量的控制。關(guān)于時(shí)間的優(yōu)化,可通過合并文件的途徑而完成,當(dāng)實(shí)現(xiàn)對(duì)時(shí)間的控制后,圖片則采取的是鏈接映射至特定區(qū)域的方式,此時(shí)Web前端開發(fā)技術(shù)的優(yōu)化將摘要:本文以網(wǎng)站制作為背景,闡述Web前端開發(fā)技術(shù)的基本狀況,明確其中不足之處,由此提出優(yōu)化方向,并從HTTP請(qǐng)求、文件規(guī)模、取得更為顯著的成果。但在此技術(shù)優(yōu)化工作中,應(yīng)高度注重內(nèi)聯(lián)圖像,需以合理的方式對(duì)其進(jìn)行優(yōu)化,基本目標(biāo)則是確保文本與圖片能夠在某一時(shí)段內(nèi)達(dá)到同時(shí)下載的效果,解決信息呈現(xiàn)遲滯的問題,從而給用戶創(chuàng)造更優(yōu)良的瀏覽體驗(yàn)。應(yīng)當(dāng)說,圖像和文本同時(shí)下載的水平將在很大程度上反映網(wǎng)站的開發(fā)質(zhì)量,所以在此方面的優(yōu)化至關(guān)重要。

3.2針對(duì)文件規(guī)模的優(yōu)化

文件規(guī)模表現(xiàn)出較強(qiáng)的復(fù)雜性,因此在此方面的優(yōu)化難度較大,且內(nèi)容較為瑣碎,若要?jiǎng)?chuàng)建優(yōu)化方案并非易事[8]。根據(jù)經(jīng)驗(yàn),優(yōu)化文件規(guī)模的主要切入點(diǎn)有CSS、JavaScript文件,但這并不能代表文件規(guī)模優(yōu)化的所有內(nèi)容,事實(shí)上優(yōu)化工作還體現(xiàn)在諸多方面,如代碼的優(yōu)化等。文件涵蓋的信息極為豐富,其是影響用戶瀏覽體驗(yàn)的重要因素,因此針對(duì)文件規(guī)模的優(yōu)化具有必要性[9]。若要實(shí)現(xiàn)對(duì)文件規(guī)模的合理優(yōu)化,最為關(guān)鍵的是結(jié)合HTML標(biāo)簽,這是實(shí)現(xiàn)文件規(guī)模優(yōu)化中必須高度關(guān)注的要點(diǎn),實(shí)際優(yōu)化手段較多,如通過剔除標(biāo)簽的方式可以避免內(nèi)聯(lián)式的出現(xiàn)。優(yōu)化工作中,HTML標(biāo)簽的剔除最為關(guān)鍵的是遵循合理性原則,這也啟示我們在Web前端開發(fā)技術(shù)優(yōu)化工作中,必須要避免矯枉過正的情況,即HTML標(biāo)簽的剔除應(yīng)強(qiáng)調(diào)對(duì)“度”的控制,需在合理的范圍內(nèi)完成。此外,還要加強(qiáng)對(duì)CSS代碼的優(yōu)化。

3.3針對(duì)內(nèi)容的優(yōu)化

網(wǎng)站制作是當(dāng)前較為主流的一項(xiàng)工作,與之相關(guān)的Web前端開發(fā)技術(shù)優(yōu)化中尤為關(guān)鍵的是加強(qiáng)對(duì)內(nèi)容的優(yōu)化,其與網(wǎng)頁的運(yùn)行具有密切關(guān)聯(lián)。從實(shí)際工作中,應(yīng)準(zhǔn)確認(rèn)識(shí)到內(nèi)容優(yōu)化的特殊性,應(yīng)將目光放眼至各個(gè)方面。此處則從兩個(gè)角度切入,提出相適應(yīng)的優(yōu)化方式。在內(nèi)容優(yōu)化工作中,應(yīng)當(dāng)注重樣式表的問題,若將其置于頂部,此情況下底部則對(duì)應(yīng)的是script。還有就是CSS的優(yōu)化,其特殊之處表現(xiàn)在覆蓋疊層上,因此在優(yōu)化工作中則要緊密結(jié)合該特點(diǎn),采取合理的優(yōu)化措施。根據(jù)日常經(jīng)驗(yàn)可以得知,瀏覽器在運(yùn)行時(shí)首先會(huì)加載所有信息,在此基礎(chǔ)上對(duì)網(wǎng)頁內(nèi)容加以渲染,從而展現(xiàn)出生動(dòng)的內(nèi)容,為用戶提供更優(yōu)質(zhì)的瀏覽體驗(yàn)。從這一角度來看,在內(nèi)容優(yōu)化過程中,需要高度關(guān)注對(duì)CSS加載層面的優(yōu)化。前述提到的script通常會(huì)被置于底部,此方式下若要有效的提高加載效率,其基本前提在于控制腳本的影響范圍,避免其對(duì)頁面帶來消極影響,若達(dá)到上述要求,此時(shí)則能夠解決組件下載速度慢、頁面加載耗時(shí)長等一系列影響用戶體驗(yàn)的情況。簡言之,內(nèi)容的優(yōu)化要顧全大局,需從細(xì)節(jié)入手,全面考慮對(duì)整體帶來的影響,不可出現(xiàn)顧此失彼的情況。

3.4針對(duì)DNS的查詢次數(shù)的優(yōu)化

網(wǎng)頁時(shí)間成本增加現(xiàn)象的出現(xiàn)還與DNS有密切關(guān)聯(lián),所以針對(duì)DNS的優(yōu)化也具有必要性,實(shí)際優(yōu)化工作中則要重點(diǎn)圍繞DNS的查詢次數(shù)而展開。通常而言,DNS完成單次解析所持續(xù)的時(shí)間普遍在20ms至120ms不等,此時(shí)如果解析請(qǐng)求過于頻繁,則會(huì)帶來網(wǎng)頁反應(yīng)速度遲緩的問題,并伴隨有時(shí)間成本的持續(xù)性疊加,在長期的影響下,信息傳輸?shù)乃俣却蠓陆?,也難以及時(shí)呈現(xiàn)。除此之外,根據(jù)DNS查詢請(qǐng)求的性質(zhì)可以得知,其本質(zhì)上是瀏覽器基礎(chǔ)內(nèi)容中的組成部分。淺顯來說,在查詢請(qǐng)求結(jié)束之前,該域名中的各項(xiàng)內(nèi)容都將維持原狀,即并不會(huì)出現(xiàn)任何下載行為。針對(duì)此項(xiàng)現(xiàn)象,從Web前端開發(fā)技術(shù)優(yōu)化的角度來看,應(yīng)當(dāng)加強(qiáng)對(duì)DNS查詢請(qǐng)求的優(yōu)化,此舉對(duì)于提高整體水平將起到推動(dòng)性作用。此外,還需要關(guān)注重定向問題,這也是引發(fā)時(shí)間成本增加的關(guān)鍵原因。當(dāng)然,重定向所涵蓋的影響因素較多,在優(yōu)化工作中應(yīng)加強(qiáng)對(duì)細(xì)節(jié)的處理,較為可行的方式有添加“/”,從而達(dá)到縮減時(shí)間成本的效果。

3.5注重對(duì)工程師進(jìn)行技術(shù)培訓(xùn)

工程師是網(wǎng)頁管理活動(dòng)的重要參與者,根據(jù)當(dāng)前的社會(huì)資源構(gòu)成情況來看,Web工程師的總量較多,但水平參差不齊,效果差強(qiáng)人意[10]。實(shí)際上有很大一部分都未經(jīng)過系統(tǒng)性訓(xùn)練,這種自學(xué)成才的方式雖然無可厚非,但前期學(xué)習(xí)過于簡單,缺乏扎實(shí)的理論基礎(chǔ),整體技術(shù)框架不夠牢固。從實(shí)際工作來看,在面對(duì)高難度設(shè)計(jì)項(xiàng)目時(shí),則會(huì)因?yàn)楦魇礁鳂拥膯栴}而出現(xiàn)無從下手的情況,甚至?xí)霈F(xiàn)一系列淺顯的問題,最終Web設(shè)計(jì)質(zhì)量難以得到保障。針對(duì)此現(xiàn)象,必須要加強(qiáng)對(duì)Web技術(shù)人員的培訓(xùn),通過系統(tǒng)性的技術(shù)培訓(xùn),使其夯實(shí)理論基礎(chǔ),提高技術(shù)水平,在面對(duì)技術(shù)優(yōu)化工作時(shí)能夠以正確的心態(tài)、合理技術(shù)手段應(yīng)對(duì),從而提高Web設(shè)計(jì)質(zhì)量,切實(shí)做好網(wǎng)站制作工作。

4結(jié)束語

綜上所述,網(wǎng)頁制作是當(dāng)前社會(huì)發(fā)展的必然需求之一,Web前端開發(fā)技術(shù)則是重要的支持,在當(dāng)前信息大幅增多的背景下,人們的需求正發(fā)生變化。此時(shí),為提高網(wǎng)頁制作的整體品質(zhì),有必要針對(duì)該技術(shù)采取優(yōu)化措施。本文則從HTTP請(qǐng)求、DNS、文件規(guī)模等角度切入,根據(jù)其特點(diǎn)提出一些優(yōu)化思路。而在實(shí)際工作中,還要加強(qiáng)對(duì)Web技術(shù)人員的培訓(xùn),提高整體的技術(shù)水平。當(dāng)然,Web前端開發(fā)技術(shù)依然有較大的進(jìn)步空間,值得相關(guān)人員付出更多的努力,同時(shí)要從國際上汲取經(jīng)驗(yàn),為網(wǎng)站制作提供更可靠的技術(shù)支持。

作者:許躍穎 單位:北京師范大學(xué)珠海分校