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

王赫

摘 要 信息社會(huì)的發(fā)展，互聯(lián)網(wǎng)的普及，要求其快捷便利服務(wù)于人類社會(huì)生產(chǎn)活動(dòng)中，這就要求互聯(lián)網(wǎng)的技術(shù)人員，要針對Web前端技術(shù)體系進(jìn)行不斷的優(yōu)化，對用戶在獲得信息前所需要等待的時(shí)間來進(jìn)行減少，本文簡單的分析了Web前端技術(shù)體系及其工作原理，針對可以優(yōu)化的幾個(gè)方面做了詳細(xì)的敘述。希望可以對從事Web前端技術(shù)體系優(yōu)化的技術(shù)人員有一定的幫助。

關(guān)鍵詞 Web前端；開發(fā)技術(shù)；優(yōu)化方向

中圖分類號(hào) TP3 文獻(xiàn)標(biāo)識(shí)碼 A 文章編號(hào) 1674-6708（2016）161-0070-01

1 Web前端技術(shù)的體系和其工作性質(zhì)分析

在Web前端技術(shù)相關(guān)的體系中有3個(gè)具有支柱性質(zhì)的關(guān)鍵性因素，分別是CSS、JavaScript和HTML。這3種語言在Web前端技術(shù)構(gòu)成中所扮演的角色是不同的，雖然這3種語言解決的問題是不一樣的，但是它們之間還有著密不可分的聯(lián)系。

想要針對Web前端技術(shù)進(jìn)行優(yōu)化，并且確保優(yōu)化后的Web前端技術(shù)能夠更好的展開，首先是需要相關(guān)工作者對Web前端的工作過程中涉及到的所有細(xì)節(jié)都需要詳細(xì)了解，只有在充分的了解的基礎(chǔ)上，才能夠?qū)eb前端進(jìn)行優(yōu)化，并取得良好的效果。

現(xiàn)階段的網(wǎng)絡(luò)環(huán)境中，大多數(shù)都是B/S結(jié)構(gòu)，所以應(yīng)把任務(wù)重心放在對用戶瀏覽器進(jìn)行有關(guān)的分析，是最為貼近現(xiàn)階段的互聯(lián)網(wǎng)網(wǎng)絡(luò)環(huán)境特征的。用戶獲取信息的過程，一般情況下是，在瀏覽器上對服務(wù)器進(jìn)行頁面展開請求，然后輸入用戶想進(jìn)入的網(wǎng)址，通過DNS服務(wù)器對輸入的域名進(jìn)行解析，最后進(jìn)入網(wǎng)址，以便解決用戶對訪問的要求。在這些基本的操作基礎(chǔ)上，用戶的瀏覽器向服務(wù)器進(jìn)行相關(guān)的HTTP的請求，服務(wù)器接收到HTTP的請求時(shí)，會(huì)依據(jù)請求來確定對應(yīng)的文件信息。而Web服務(wù)器在當(dāng)前的過程中依據(jù)相對應(yīng)的內(nèi)容和相關(guān)的URL參數(shù)，對數(shù)據(jù)庫的相關(guān)文件實(shí)現(xiàn)使用，并最終滿足用戶的最終需求。

HTML形式的文件在瀏覽器生成之后，服務(wù)器會(huì)執(zhí)行用戶對于瀏覽器的相關(guān)請求然后將完成，有效的HTML形式文件傳送到用戶使用的瀏覽器當(dāng)中，同時(shí)瀏覽器也會(huì)接受服務(wù)器中的有效文件。在這一系列的操作中，不論是用戶對網(wǎng)址的輸入，還是DNS的每次請求，都勢必會(huì)花費(fèi)用戶的時(shí)間，而技術(shù)人員進(jìn)行優(yōu)化的最終目的就是使用戶的體驗(yàn)滿意度增加，那么，在輸入網(wǎng)址到獲得信息中間的各個(gè)過程都是技術(shù)人員可以考慮進(jìn)行優(yōu)化的地方[ 1 ]。

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

傳遞消費(fèi)者所需要的信息，以此來滿足消費(fèi)者的需求，是頁面存在的核心價(jià)值，在當(dāng)今互聯(lián)網(wǎng)的大環(huán)境下，如果消費(fèi)用戶獲取需求信息和等待信息呈現(xiàn)的用時(shí)過多，或者所需信息的展開效果不夠好，這就必然會(huì)對消費(fèi)者的體驗(yàn)產(chǎn)生影響。而從互聯(lián)網(wǎng)網(wǎng)絡(luò)提供信息這一角度來分析，這就是沒有將信息本身具有的高效性進(jìn)行良好的體現(xiàn)，從客戶對于提取的信息角度來看，這種獲得信息的狀態(tài)會(huì)對信息對稱環(huán)境造成不良影響，如果情況相比較嚴(yán)重可能還會(huì)影響到這些信息在相關(guān)社會(huì)行為的使用。

根據(jù)以上出現(xiàn)的問題，對于Web前端技術(shù)進(jìn)行相關(guān)的優(yōu)化和互聯(lián)網(wǎng)頁面信息展開的體驗(yàn)進(jìn)行切實(shí)的提升，從而實(shí)現(xiàn)信息的價(jià)值?？偠灾嚓P(guān)工作人員可以從以下幾個(gè)方面對Web前端進(jìn)行更新，更新技術(shù)人員應(yīng)將以下幾點(diǎn)當(dāng)作更新目標(biāo)，將Web前段進(jìn)行更好的優(yōu)化。

2.1 關(guān)于HTTP優(yōu)化的請求

技術(shù)人員針對HTTP的請求進(jìn)行優(yōu)化，主要是針對不必要的、消耗時(shí)間的請求應(yīng)當(dāng)進(jìn)行減少，這是可以提高全部的Web前端技術(shù)體系的工作重點(diǎn)和首要的職業(yè)。一個(gè)完整的HTTP的請求，其中包括很多方面，比如，DNS尋址、雙方間數(shù)據(jù)的傳送、服務(wù)器與瀏覽器之間創(chuàng)建連接等等許多環(huán)節(jié)。而這許多環(huán)節(jié)中的每一個(gè)，必然都會(huì)需要一定的時(shí)間來完成，每一個(gè)細(xì)節(jié)所需要的時(shí)間進(jìn)行相加，就是消費(fèi)者在展開信息前所需要的時(shí)間，這些時(shí)間會(huì)成為用戶端的時(shí)間成本，同時(shí)也是對數(shù)據(jù)通路商的寬帶資源的一個(gè)消耗。因此對時(shí)間上進(jìn)行的優(yōu)化是無需質(zhì)疑的，那么技術(shù)人員對HTTP請求時(shí)的數(shù)量就必須進(jìn)行有效的控制。常用的做法是將多個(gè)的CSS文件和JavaScript文件集合成一個(gè)有效文件，確保在一次操作下對多個(gè)文件進(jìn)行打開；同時(shí)也要在圖片地圖方面進(jìn)行優(yōu)化，技術(shù)人員可以考慮，在圖像上的不同區(qū)域注入不同映射的連接；而對于網(wǎng)頁中需要的內(nèi)聯(lián)圖像，要盡可能的保持圖像能夠與文本一同下載并顯示出來。

2.2 對其文件的規(guī)模上進(jìn)行優(yōu)化

針對文件的規(guī)模這一方面進(jìn)行優(yōu)化，技術(shù)人員需要進(jìn)行的工作是較為瑣碎的，其中主要的工作內(nèi)容是CSS文件和JavaScript文件他們所涉及的代碼進(jìn)行展開相應(yīng)的優(yōu)化，其所開展的工作主要是對一些可以不用存在的HTML標(biāo)簽進(jìn)行相對應(yīng)的刪除，以避免其存在聯(lián)式或是樣式這兩方面，以達(dá)到優(yōu)化的效果，除此之外，另外還有一項(xiàng)不能忽略的工作就是對CSS的研究。

2.3 對其內(nèi)容上進(jìn)行優(yōu)化

對于內(nèi)容的更新，工作人員主要可以從樣式表和Script開始著手，可以將樣式表放在頂部，同時(shí)將Script放在底部。因?yàn)镃SS具有層疊性和覆蓋性的特征，所以通常的情況下，瀏覽器會(huì)在對所需文件加載完成后，再來考慮進(jìn)行工作渲染。所以想要實(shí)現(xiàn)對于Web客戶端的更新，可以從CSS本身加載方面來考慮。另一方面，將Script放在底部的主要原因，是為了防止Script腳本在執(zhí)行期間對當(dāng)前頁面產(chǎn)生了阻礙導(dǎo)致下載速度的緩慢，進(jìn)而使頁面及其相關(guān)組件下載速度過慢，頁面加載的時(shí)間過長，等等問題的產(chǎn)生[ 2 ]。

2.4 最大程度的減少DNS的使用次數(shù)

DNS是導(dǎo)致消費(fèi)用戶等待時(shí)間過長的另一大原因，通常解析一次DNS大概需要20ms～120ms的時(shí)間，如果DNS的解析請求過去頻繁，就會(huì)導(dǎo)致消費(fèi)者等待的時(shí)間變長，降低信息傳輸?shù)馁|(zhì)量。更重要的是，DNS查詢本身就是瀏覽器可以進(jìn)一步完成工作的基礎(chǔ)，所以，技術(shù)人員針對DNS查詢請求次數(shù)要進(jìn)行有效的控制，對于Web前端技術(shù)來說，對其的優(yōu)化的作用也是十分關(guān)鍵的。

2.5 對重定向的有效避免

這個(gè)也是造成消費(fèi)用戶等待的時(shí)間太長的原因之一，導(dǎo)致它產(chǎn)生的原因比起其他幾個(gè)原因相對復(fù)雜一些。每一次的重定向都會(huì)導(dǎo)致頁面增加一次對Web請求。針對這一原因，技術(shù)人員可以考慮一下在Web目錄后面添加“/”，保證對重定向的有效避免[3]。

3 結(jié)論

Web前端的技術(shù)開發(fā)的優(yōu)化水平，這是影響消費(fèi)用戶的自身體驗(yàn)的關(guān)鍵，所以這需要引起運(yùn)營商對此的重視和注意。此外還需要對這些已經(jīng)出現(xiàn)的問題，進(jìn)行有針對性改進(jìn)和優(yōu)化。只有技術(shù)人員不斷的在實(shí)踐工作中對相關(guān)領(lǐng)域進(jìn)行學(xué)習(xí)，同時(shí)根據(jù)實(shí)際情況積累經(jīng)驗(yàn)和技術(shù)，并且對頁面的工作狀態(tài)進(jìn)行觀察，從多個(gè)角度入手，才可以達(dá)到Web前段技術(shù)優(yōu)化能夠取得良好的效果。

參考文獻(xiàn)

[1]陳鯡.Web前端開發(fā)技術(shù)以及優(yōu)化方向分析[J].新媒體研究，2015（7）：39-40.

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

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