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

許躍穎

（北京師范大學(xué)珠海分校 廣東省珠海市 519000）

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

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

從技術(shù)層面來(lái)看，Web 前端開(kāi)發(fā)技術(shù)的應(yīng)用效果建立在HTML、JavaScript、CSS 的基礎(chǔ)上。作為典型的計(jì)算機(jī)語(yǔ)言，三者獨(dú)具特色，各自對(duì)應(yīng)的執(zhí)行標(biāo)準(zhǔn)存在差異。但根據(jù)Web 前端開(kāi)發(fā)經(jīng)驗(yàn)得知，彼此間具有緊密的關(guān)聯(lián)，形成了相互促進(jìn)的關(guān)系，因此在Web 前端開(kāi)發(fā)技術(shù)優(yōu)化工作中必須注重三類(lèi)計(jì)算機(jī)語(yǔ)言，其具體關(guān)系見(jià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)境來(lái)看，由于需求量的增加，網(wǎng)頁(yè)常伴隨有或大或小的問(wèn)題，給用戶的體驗(yàn)造成不良影響。對(duì)此，以何種方式改進(jìn)并為用戶創(chuàng)造良好的網(wǎng)頁(yè)體驗(yàn)尤為關(guān)鍵，而這也正是Web 前端開(kāi)發(fā)技術(shù)最為根本的應(yīng)用目標(biāo)[4]。從用戶的操作習(xí)慣來(lái)看，會(huì)根據(jù)自身的需求從網(wǎng)址進(jìn)行輸入，此時(shí)將會(huì)產(chǎn)生請(qǐng)求，即對(duì)應(yīng)一個(gè)URL。在上述基礎(chǔ)上，服務(wù)器運(yùn)行，通過(guò)對(duì)域名的分析后產(chǎn)生IP 地址，以此為依據(jù)令計(jì)算機(jī)訪問(wèn)該地址，最終呈現(xiàn)出具體的內(nèi)容。在此過(guò)程中，瀏覽器的作用在于整理數(shù)據(jù)，經(jīng)過(guò)排版后將內(nèi)容呈現(xiàn)出來(lái)，以便為用戶瀏覽。整個(gè)流程中含多個(gè)細(xì)分環(huán)節(jié)，彼此間緊密關(guān)聯(lián)，具體流程見(jiàn)圖2。

Web 前端開(kāi)發(fā)技術(shù)具有系統(tǒng)性，其涵蓋了多方面信息和數(shù)據(jù)，高效運(yùn)行的關(guān)鍵在于鏈接及數(shù)據(jù)庫(kù)的建立要在短時(shí)間內(nèi)以精準(zhǔn)的方式完成[5-6]。以Web 服務(wù)器為例，其具備靈活調(diào)用資源的特點(diǎn)，如URL 參數(shù)等，從而產(chǎn)生組織數(shù)據(jù)并創(chuàng)建相應(yīng)的HTML 頁(yè)面。多數(shù)情況下，服務(wù)器均能夠良好的服務(wù)于HTTP 的請(qǐng)求，且兼具傳輸文件的功能；與之不同的是，瀏覽器的功能主要體現(xiàn)在接收文件這一層面。

2 Web前端優(yōu)化

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

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

圖1：Web 前端

圖2：瀏覽器排版處理形式

Web 技術(shù)開(kāi)發(fā)工作中，主要任務(wù)在于“完善”。然而，盡管網(wǎng)頁(yè)的完善是重要的內(nèi)容，但僅憑此項(xiàng)工作依然難以滿足現(xiàn)代社會(huì)對(duì)于網(wǎng)站使用的需求。針對(duì)此問(wèn)題，應(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)頁(yè)，而這也直接表明了網(wǎng)頁(yè)的價(jià)值所在，基于網(wǎng)頁(yè)的形式，用戶可獲得滿足自身所需的信息。置身于互聯(lián)網(wǎng)大環(huán)境下，信息的體量較大，其具備實(shí)時(shí)更新的特點(diǎn)，因此對(duì)于信息獲取的時(shí)間提出更高的要求，其需要控制在最佳值內(nèi)，從而達(dá)到吸引更多用戶的效果，此時(shí)用戶才能夠快速瀏覽信息。網(wǎng)頁(yè)僅發(fā)揮出信息傳遞的作用，但信息所具備的價(jià)值則無(wú)法基于網(wǎng)頁(yè)的途徑而體現(xiàn)。若從獲取信息的角度來(lái)看，此時(shí)信息的性質(zhì)發(fā)生變化，它將對(duì)社會(huì)行為帶來(lái)影響?；诖颂攸c(diǎn)，我們可以對(duì)HTTP 請(qǐng)求的優(yōu)化形成更準(zhǔn)確的認(rèn)知，可將其視為Web 前端開(kāi)發(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ì)帶來(lái)時(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)化，可通過(guò)合并文件的途徑而完成，當(dāng)實(shí)現(xiàn)對(duì)時(shí)間的控制后，圖片則采取的是鏈接映射至特定區(qū)域的方式，此時(shí)Web 前端開(kāi)發(fā)技術(shù)的優(yōu)化將取得更為顯著的成果。但在此技術(shù)優(yōu)化工作中，應(yīng)高度注重內(nèi)聯(lián)圖像，需以合理的方式對(duì)其進(jìn)行優(yōu)化，基本目標(biāo)則是確保文本與圖片能夠在某一時(shí)段內(nèi)達(dá)到同時(shí)下載的效果，解決信息呈現(xiàn)遲滯的問(wèn)題，從而給用戶創(chuàng)造更優(yōu)良的瀏覽體驗(yàn)。應(yīng)當(dāng)說(shuō)，圖像和文本同時(shí)下載的水平將在很大程度上反映網(wǎng)站的開(kāi)發(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)化手段較多，如通過(guò)剔除標(biāo)簽的方式可以避免內(nèi)聯(lián)式的出現(xiàn)。優(yōu)化工作中，HTML 標(biāo)簽的剔除最為關(guān)鍵的是遵循合理性原則，這也啟示我們?cè)赪eb 前端開(kāi)發(fā)技術(shù)優(yōu)化工作中，必須要避免矯枉過(guò)正的情況，即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 前端開(kāi)發(fā)技術(shù)優(yōu)化中尤為關(guān)鍵的是加強(qiáng)對(duì)內(nèi)容的優(yōu)化，其與網(wǎng)頁(yè)的運(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)注重樣式表的問(wèn)題，若將其置于頂部，此情況下底部則對(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)頁(yè)內(nèi)容加以渲染，從而展現(xiàn)出生動(dòng)的內(nèi)容，為用戶提供更優(yōu)質(zhì)的瀏覽體驗(yàn)。從這一角度來(lái)看，在內(nèi)容優(yōu)化過(guò)程中，需要高度關(guān)注對(duì)CSS 加載層面的優(yōu)化。前述提到的script 通常會(huì)被置于底部，此方式下若要有效的提高加載效率，其基本前提在于控制腳本的影響范圍，避免其對(duì)頁(yè)面帶來(lái)消極影響，若達(dá)到上述要求，此時(shí)則能夠解決組件下載速度慢、頁(yè)面加載耗時(shí)長(zhǎng)等一系列影響用戶體驗(yàn)的情況。簡(jiǎn)言之，內(nèi)容的優(yōu)化要顧全大局，需從細(xì)節(jié)入手，全面考慮對(duì)整體帶來(lái)的影響，不可出現(xiàn)顧此失彼的情況。

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

網(wǎng)頁(yè)時(shí)間成本增加現(xiàn)象的出現(xiàn)還與DNS 有密切關(guān)聯(lián)，所以針對(duì)DNS 的優(yōu)化也具有必要性，實(shí)際優(yōu)化工作中則要重點(diǎn)圍繞DNS的查詢次數(shù)而展開(kāi)。通常而言，DNS 完成單次解析所持續(xù)的時(shí)間普遍在20ms 至120ms 不等，此時(shí)如果解析請(qǐng)求過(guò)于頻繁，則會(huì)帶來(lái)網(wǎng)頁(yè)反應(yīng)速度遲緩的問(wèn)題，并伴隨有時(shí)間成本的持續(xù)性疊加，在長(zhǎng)期的影響下，信息傳輸?shù)乃俣却蠓陆?，也難以及時(shí)呈現(xiàn)。除此之外，根據(jù)DNS 查詢請(qǐng)求的性質(zhì)可以得知，其本質(zhì)上是瀏覽器基礎(chǔ)內(nèi)容中的組成部分。淺顯來(lái)說(shuō)，在查詢請(qǐng)求結(jié)束之前，該域名中的各項(xiàng)內(nèi)容都將維持原狀，即并不會(huì)出現(xiàn)任何下載行為。針對(duì)此項(xiàng)現(xiàn)象，從Web 前端開(kāi)發(fā)技術(shù)優(yōu)化的角度來(lái)看，應(yīng)當(dāng)加強(qiáng)對(duì)DNS 查詢請(qǐng)求的優(yōu)化，此舉對(duì)于提高整體水平將起到推動(dòng)性作用。此外，還需要關(guān)注重定向問(wè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)頁(yè)管理活動(dòng)的重要參與者，根據(jù)當(dāng)前的社會(huì)資源構(gòu)成情況來(lái)看，Web 工程師的總量較多，但水平參差不齊，效果差強(qiáng)人意[10]。實(shí)際上有很大一部分都未經(jīng)過(guò)系統(tǒng)性訓(xùn)練，這種自學(xué)成才的方式雖然無(wú)可厚非，但前期學(xué)習(xí)過(guò)于簡(jiǎn)單，缺乏扎實(shí)的理論基礎(chǔ)，整體技術(shù)框架不夠牢固。從實(shí)際工作來(lái)看，在面對(duì)高難度設(shè)計(jì)項(xiàng)目時(shí)，則會(huì)因?yàn)楦魇礁鳂拥膯?wèn)題而出現(xiàn)無(wú)從下手的情況，甚至?xí)霈F(xiàn)一系列淺顯的問(wèn)題，最終Web 設(shè)計(jì)質(zhì)量難以得到保障。針對(duì)此現(xiàn)象，必須要加強(qiáng)對(duì)Web 技術(shù)人員的培訓(xùn)，通過(guò)系統(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é)束語(yǔ)

綜上所述，網(wǎng)頁(yè)制作是當(dāng)前社會(huì)發(fā)展的必然需求之一，Web 前端開(kāi)發(fā)技術(shù)則是重要的支持，在當(dāng)前信息大幅增多的背景下，人們的需求正發(fā)生變化。此時(shí)，為提高網(wǎng)頁(yè)制作的整體品質(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前端開(kāi)發(fā)技術(shù)依然有較大的進(jìn)步空間，值得相關(guān)人員付出更多的努力，同時(shí)要從國(guó)際上汲取經(jīng)驗(yàn)，為網(wǎng)站制作提供更可靠的技術(shù)支持。