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

陳 鯡

（大慶油田信息技術(shù)公司北京分公司，北京 100043）

在當(dāng)前信息環(huán)境之下，互聯(lián)網(wǎng)對(duì)于整個(gè)社會(huì)生產(chǎn)生活的影響都已經(jīng)到了不容忽視的地步，甚至于在某些特殊環(huán)境之下，相關(guān)活動(dòng)的展開完全會(huì)對(duì)網(wǎng)絡(luò)產(chǎn)生依賴。而作為網(wǎng)頁(yè)呈現(xiàn)的主要依賴技術(shù)，Web前端開發(fā)擔(dān)負(fù)著網(wǎng)絡(luò)環(huán)境中信息展現(xiàn)的重要職責(zé)，并且其工作狀況，直接關(guān)系到互聯(lián)網(wǎng)用戶對(duì)于信息傳輸以及獲取服務(wù)的體驗(yàn)，進(jìn)一步影響到整個(gè)信息環(huán)境的價(jià)值實(shí)現(xiàn)乃至于社會(huì)環(huán)境中諸多經(jīng)濟(jì)行動(dòng)的展開。因此Web前段技術(shù)的優(yōu)化，對(duì)于切實(shí)提升互聯(lián)網(wǎng)的使用體驗(yàn)，有著毋庸置疑的積極意義。

1 Web前端技術(shù)體系以及工作分析

Web前端技術(shù)體系中，HTML、CSS、JavaScript成為三個(gè)支撐性質(zhì)的關(guān)鍵因素，三種語(yǔ)言分別承擔(dān)不同職能，并且執(zhí)行和遵守不同標(biāo)準(zhǔn)，同時(shí)又保持著密切的合作關(guān)系。

而想要面向Web前端技術(shù)的實(shí)現(xiàn)展開良好的優(yōu)化，首先需要切實(shí)對(duì)其工作過程中的每一個(gè)細(xì)節(jié)有所了解，在此基礎(chǔ)之上，才能獲取良好效果。

當(dāng)前的網(wǎng)絡(luò)環(huán)境中廣泛采用B/S結(jié)構(gòu)，因此從客戶端的瀏覽器展開相應(yīng)的分析，無(wú)疑符合當(dāng)前的網(wǎng)絡(luò)環(huán)境技術(shù)特征。在瀏覽器對(duì)服務(wù)器展開頁(yè)面請(qǐng)求的時(shí)候，首先由用戶在瀏覽器端輸入網(wǎng)址，來(lái)實(shí)現(xiàn)對(duì)于url的請(qǐng)求，而后通過DNS服務(wù)器對(duì)域名進(jìn)行解析，獲取到該域名所對(duì)應(yīng)的頁(yè)面ip地址，該地址可以讓計(jì)算機(jī)直接實(shí)現(xiàn)訪問。在此基礎(chǔ)之上，位于客戶端的瀏覽器會(huì)面向?qū)?yīng)的服務(wù)器發(fā)送HTTP請(qǐng)求，而服務(wù)器端在接收到相應(yīng)的HTTP請(qǐng)求的時(shí)候，依據(jù)瀏覽器對(duì)應(yīng)的url請(qǐng)求來(lái)確定對(duì)應(yīng)的目標(biāo)文件。該目標(biāo)文件通常以一個(gè)頁(yè)面網(wǎng)絡(luò)地址的形式存在，諸如ASP、PHP或者JSP文件等。而Web服務(wù)器則在這個(gè)過程中負(fù)責(zé)依據(jù)相應(yīng)頁(yè)面文件的具體內(nèi)容以及url相關(guān)參數(shù)，來(lái)通過數(shù)據(jù)庫(kù)或者相關(guān)文件實(shí)現(xiàn)對(duì)于資源的調(diào)用，并且最終實(shí)現(xiàn)對(duì)于數(shù)據(jù)的組織和HTML頁(yè)面的生成。

在生成了HTML文件之后，服務(wù)器執(zhí)行來(lái)自于客戶端瀏覽器的HTTP請(qǐng)求，將生成的HTML文件發(fā)送給瀏覽器，而瀏覽器則負(fù)責(zé)接收來(lái)自于服務(wù)器的HTML文件。隨后，瀏覽器會(huì)針對(duì)HTML文件展開解析，并且進(jìn)一步面向服務(wù)器請(qǐng)求其中的鏈接資源文件，諸如JavaScript、CSS、多媒體資源、內(nèi)嵌網(wǎng)頁(yè)等。服務(wù)器會(huì)接到瀏覽器對(duì)于資源文件的HTTP請(qǐng)求，并且將對(duì)應(yīng)的資源文件通過網(wǎng)絡(luò)發(fā)送給客戶端瀏覽器。瀏覽器在接到這些資源文件之后，進(jìn)行整理并且依據(jù)規(guī)則呈現(xiàn)到頁(yè)面環(huán)境中，同時(shí)承擔(dān)對(duì)相應(yīng)資源的展現(xiàn)方式實(shí)現(xiàn)重新排版的職能。在這個(gè)過程中，瀏覽器會(huì)自上而下執(zhí)行HTML文檔，當(dāng)遇到相應(yīng)的頁(yè)面腳本的時(shí)候，會(huì)對(duì)腳本進(jìn)行分析，并解釋執(zhí)行相應(yīng)的腳本代碼。當(dāng)執(zhí)行腳本時(shí)，將阻塞之后的鏈接文件的加載。

2 Web前端技術(shù)優(yōu)化工作重點(diǎn)分析

對(duì)于頁(yè)面的存在而言，其核心價(jià)值在于傳遞相應(yīng)的信息并且通過信息的呈現(xiàn)滿足信息消費(fèi)者的相應(yīng)需求，在互聯(lián)網(wǎng)的整體環(huán)境之下，如果這個(gè)信息獲取和呈現(xiàn)的過程時(shí)間過長(zhǎng)或者展開形式不佳，必然會(huì)影響到用戶的信息消費(fèi)過程體驗(yàn)。從信息提供的角度看，是沒有實(shí)現(xiàn)信息本身的價(jià)值，而從信息獲取的角度看，這種狀態(tài)則有可能影響到信息對(duì)稱環(huán)境的產(chǎn)生，嚴(yán)重的情況下甚至?xí)绊懙秸５纳鐣?huì)行為。

基于這樣的考慮，有必要針對(duì)Web前端技術(shù)展開對(duì)應(yīng)的優(yōu)化，切實(shí)提升頁(yè)面對(duì)于信息呈現(xiàn)的綜合體驗(yàn)，實(shí)現(xiàn)信息自身價(jià)值?？偨Y(jié)而言，有如下幾個(gè)主要的優(yōu)化方面，可以作為當(dāng)前的優(yōu)化工作重點(diǎn)對(duì)待。

2.1 HTTP請(qǐng)求優(yōu)化

針對(duì)HTTP請(qǐng)求展開優(yōu)化，減少不必要的請(qǐng)求，是切實(shí)提升整個(gè)Web前段技術(shù)體系的首要職責(zé)與工作重點(diǎn)。一個(gè)完整的HTTP請(qǐng)求包括多個(gè)方面，諸如DNS尋址、建立瀏覽器與服務(wù)器之間的連接、雙方數(shù)據(jù)的發(fā)送、瀏覽器等到服務(wù)器展開數(shù)據(jù)的傳輸?shù)榷鄠€(gè)環(huán)節(jié)。而這些環(huán)境中的每一個(gè)，都必然會(huì)占用一定的時(shí)間，將多個(gè)細(xì)節(jié)時(shí)間進(jìn)行累加，必然會(huì)形成用戶端的時(shí)間成本，同時(shí)也會(huì)消費(fèi)掉整個(gè)數(shù)據(jù)通路商的帶寬資源。因此想要從時(shí)間上實(shí)現(xiàn)優(yōu)化，實(shí)現(xiàn)用戶體驗(yàn)的提升，HTTP請(qǐng)求數(shù)量的控制必不可少。常規(guī)的做法包括將多個(gè)CSS文件或JavaScript文件合并成一個(gè)，確保其能夠在一次請(qǐng)求下加以實(shí)現(xiàn)；在圖片地圖的優(yōu)化方面，則應(yīng)當(dāng)考慮在一個(gè)圖像上劃分不同區(qū)域映射不同的鏈接；而對(duì)于內(nèi)聯(lián)圖像，則應(yīng)當(dāng)注意保持圖像與文本一同實(shí)現(xiàn)下載和顯示。

2.2 優(yōu)化文件規(guī)模

對(duì)于這一方面而言，其工作相對(duì)較為瑣碎，主要工作內(nèi)容包括針對(duì)JavaScript和CSS文件以及對(duì)應(yīng)的代碼展開優(yōu)化。優(yōu)化工作重點(diǎn)主要有針對(duì)不必要的html標(biāo)簽進(jìn)行剔除優(yōu)化，以及避免內(nèi)聯(lián)式樣式存在，此外，對(duì)于CSS代碼優(yōu)化同樣也是這一方面工作的重點(diǎn)內(nèi)容。

2.3 內(nèi)容優(yōu)化

對(duì)于這一方面的工作主要可以考慮從兩個(gè)角度出發(fā)，即將樣式表放在頂部同時(shí)將script放在底部。CSS本身具有覆蓋層疊的特征，因此瀏覽器通常會(huì)考慮在完全加載完成之后再展開渲染工作，因此如果想要實(shí)現(xiàn)Web優(yōu)化，則可以考慮從CSS本身的加載著手實(shí)現(xiàn)。而對(duì)于將script放在底部這一做法，則主要是防止script腳本的執(zhí)行阻塞頁(yè)面的下載，從而造成頁(yè)面組件下載速度不足，頁(yè)面加載時(shí)間過長(zhǎng)等問題的發(fā)生。

2.4 減少DNS查詢次數(shù)

DNS是另一個(gè)造成等待的因素，通常一次DNS解析20-120毫秒時(shí)間，如果頻繁發(fā)出DNS解析請(qǐng)求，必然會(huì)導(dǎo)致信息傳輸體驗(yàn)的降低。更為重要的在于，DNS的查詢本身是瀏覽器進(jìn)一步工作的基礎(chǔ)，在完成查詢之前，瀏覽器不會(huì)下載該域名之下的任何相關(guān)內(nèi)容，因此控制DNS查詢請(qǐng)求的次數(shù)，對(duì)于Web前端優(yōu)化工作而言至關(guān)重要。

2.5 避免重定向

這同樣是造成等待時(shí)間過長(zhǎng)的因素之一，其形成原因相對(duì)復(fù)雜，從根本上看，每一次重定向都會(huì)增加一次Web請(qǐng)求。對(duì)于這一方面，可以考慮在Web 站點(diǎn)子目錄的后面添加“/”，實(shí)現(xiàn)有效避免一次重定向的目標(biāo)。

3 結(jié)論

Web前端開發(fā)技術(shù)的優(yōu)化水平，直接關(guān)系到用戶體驗(yàn)，因此必須予以重視。針對(duì)這一問題，只有在實(shí)際工作中不斷深入學(xué)習(xí)相關(guān)領(lǐng)域經(jīng)驗(yàn)和技術(shù)，并且多展開對(duì)于頁(yè)面展開狀態(tài)的觀察，有的放矢展開優(yōu)化，才能取得良好效果。

[1]曹劉陽(yáng).編寫高質(zhì)量代碼：Web前端開發(fā)修煉之道[M].北京：機(jī)械工業(yè)出版社，2010.

[2]鄧小善，龍艷軍.高訪問量網(wǎng)站性能監(jiān)測(cè)與優(yōu)化的設(shè)計(jì)與實(shí)現(xiàn)[J].現(xiàn)代計(jì)算機(jī)：專業(yè)版，2009（2）.

[3]李強(qiáng)，楊巋，吳天吉.基于Asp_net的網(wǎng)站開發(fā)前端技術(shù)優(yōu)化研究[J].軟件導(dǎo)刊，2013，12（5）.