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

羅紅亮

摘要：隨著我國(guó)經(jīng)濟(jì)的快速發(fā)展，我國(guó)的科學(xué)技術(shù)也有了明顯的提高，特別是近些年來(lái)互聯(lián)網(wǎng)行業(yè)的發(fā)展速度非常驚人，互聯(lián)網(wǎng)已經(jīng)為人們的生活提供了非常大的便利，也逐漸的走入了人們的生活，互聯(lián)網(wǎng)技術(shù)已經(jīng)成為現(xiàn)如今人們生活不可缺少的一部分?；ヂ?lián)網(wǎng)行業(yè)要得到持續(xù)快速的發(fā)展就需要不斷地對(duì)于網(wǎng)絡(luò)進(jìn)行開(kāi)發(fā)和維護(hù)。因此本文就主要針對(duì)Web前端技術(shù)體系和相關(guān)的主要工作機(jī)制來(lái)進(jìn)行分析研究，對(duì)于整個(gè)工作流程進(jìn)行相關(guān)介紹討論，在介紹這部分內(nèi)容之后，在此基礎(chǔ)上對(duì)于現(xiàn)如今該技術(shù)環(huán)境的主要優(yōu)化工作方向進(jìn)行相關(guān)說(shuō)明。

關(guān)鍵詞：Web;前端;技術(shù);優(yōu)化

在如今的社會(huì)發(fā)展背景之下，互聯(lián)網(wǎng)技術(shù)已經(jīng)對(duì)于整個(gè)社會(huì)和人們的生活產(chǎn)生了不可磨滅的影響，甚至在一些特殊環(huán)境之下，人們已經(jīng)越來(lái)越離不開(kāi)互聯(lián)網(wǎng)技術(shù)，人們對(duì)于互聯(lián)網(wǎng)技術(shù)已經(jīng)越來(lái)越依賴(lài)。Web前段開(kāi)發(fā)是目前網(wǎng)頁(yè)呈現(xiàn)的最主要的依賴(lài)技術(shù)，因此它對(duì)于整個(gè)網(wǎng)絡(luò)環(huán)境中展示信息環(huán)節(jié)起著非常重要的作用，可以這樣認(rèn)為Web前端開(kāi)發(fā)技術(shù)影響著人們對(duì)于信息傳輸和接受的重要體驗(yàn)，如果這一環(huán)節(jié)出現(xiàn)問(wèn)題會(huì)很大程度上影響到所處于的整個(gè)信息傳輸網(wǎng)絡(luò)，甚至可能會(huì)影響到多種經(jīng)濟(jì)行業(yè)活動(dòng)的開(kāi)展。因此，我們要做好對(duì)于Web前端技術(shù)的優(yōu)化工作，不斷的提升互聯(lián)網(wǎng)用戶(hù)的使用體驗(yàn)，為推動(dòng)我國(guó)經(jīng)濟(jì)的快速發(fā)展提供強(qiáng)有力的推動(dòng)動(dòng)力。

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

眾所周知在Web前端技術(shù)體系中HTML，CSS，JavaScript已經(jīng)成為非常重要的三個(gè)支撐性質(zhì)的關(guān)鍵因素，這三種語(yǔ)言在整個(gè)前端技術(shù)體系過(guò)程中發(fā)揮著各自不同的功能同時(shí)在運(yùn)行過(guò)程中也遵守著不同標(biāo)準(zhǔn)，但是為了保證整個(gè)體系的正常三者之間又有非常重要的合作關(guān)系。我們要想真正的實(shí)現(xiàn)好Web前端技術(shù)的優(yōu)化就需要對(duì)于整個(gè)工作過(guò)程有具體詳細(xì)的認(rèn)知，對(duì)于每一個(gè)細(xì)節(jié)都有非常明確的理解，只有這樣才能夠在優(yōu)化過(guò)程中發(fā)揮良好的效果。

現(xiàn)如今我國(guó)網(wǎng)絡(luò)環(huán)境中大多都采用B/S結(jié)構(gòu)，因此如果我們能夠?qū)τ诳蛻?hù)端的瀏覽器來(lái)進(jìn)行相應(yīng)的分析就能夠最大程度上符合如今的網(wǎng)絡(luò)環(huán)境技術(shù)特點(diǎn)。如果瀏覽器要對(duì)于服務(wù)器來(lái)提出展開(kāi)請(qǐng)求，那么一般來(lái)說(shuō)首先是由使用的用戶(hù)在瀏覽器的端位輸入對(duì)應(yīng)的網(wǎng)址，這樣也就實(shí)現(xiàn)了對(duì)于URL的請(qǐng)求，之后DNS服務(wù)器對(duì)于有關(guān)的域名來(lái)進(jìn)行分析就可以得出域名所處于的ip地址，在確定地址之后就可以控制計(jì)算機(jī)直接實(shí)現(xiàn)訪問(wèn)的目的。

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

頁(yè)面存在的主要作用是傳遞對(duì)應(yīng)的信息并且通過(guò)將信息呈現(xiàn)出來(lái)來(lái)達(dá)到信息消費(fèi)者的使用要求，在現(xiàn)如今整體互聯(lián)網(wǎng)的環(huán)境之下，如果信息傳遞的過(guò)慢或呈現(xiàn)出來(lái)的時(shí)間過(guò)長(zhǎng)或者說(shuō)展開(kāi)形式不適宜，那么就會(huì)很大程度上造成消費(fèi)用戶(hù)的用戶(hù)體驗(yàn)下降。如果我們從信息提供的角度來(lái)進(jìn)行分析，可以理解為沒(méi)有充分的保證信息本身的價(jià)值實(shí)現(xiàn)。而從于信息獲取的角度來(lái)分析很有可能會(huì)導(dǎo)致信息獲取過(guò)程出現(xiàn)問(wèn)題而導(dǎo)致非常嚴(yán)重的社會(huì)后果。因此，我們可以看出Web前端技術(shù)優(yōu)化工序是非常重要的，做好技術(shù)優(yōu)化工作，能夠很大程度上確保信息發(fā)揮其自身價(jià)值，同時(shí)還為社會(huì)的發(fā)展做出非常巨大的貢獻(xiàn)。

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

要想提高Web前端技術(shù)體系我們必須要對(duì)于HTTP來(lái)進(jìn)行優(yōu)化，減少不必要的請(qǐng)求。一般來(lái)說(shuō)，我們認(rèn)為一個(gè)非常完整的HTTP請(qǐng)求包括以下多個(gè)方面，比如DNS尋址、瀏覽器與服務(wù)器之間的連接建立以及雙方發(fā)送數(shù)據(jù)等多個(gè)環(huán)節(jié)，上述所提到的每一個(gè)環(huán)節(jié)都會(huì)占用一定的時(shí)間，而如果將這些環(huán)節(jié)所使用的時(shí)間累計(jì)疊加在一起，那么就會(huì)形成用戶(hù)端的時(shí)間成本，因此，從節(jié)約用戶(hù)時(shí)間成本的角度來(lái)分析，我們必須要對(duì)于HTTP請(qǐng)求數(shù)量進(jìn)行嚴(yán)格的控制。一般來(lái)說(shuō)，我們通常將多個(gè)CSS文件或者在JavaScript文件進(jìn)行合并來(lái)確保在一次請(qǐng)求的情況之下得到實(shí)現(xiàn)。而做好圖片地址的優(yōu)化工作，需要著重考慮將一個(gè)圖像上劃分為多個(gè)區(qū)域來(lái)映射多個(gè)鏈接。對(duì)于內(nèi)聯(lián)圖像來(lái)說(shuō)，我們需要考慮到圖像與文本同時(shí)進(jìn)行下載和顯示。

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

做好Web前端開(kāi)發(fā)技術(shù)的優(yōu)化工作，我們還需要將文件的規(guī)模來(lái)進(jìn)行進(jìn)一步的優(yōu)化。一般來(lái)說(shuō)優(yōu)化文件規(guī)模有關(guān)工作相對(duì)比較雜，小且瑣碎，主要的工作內(nèi)容包括了對(duì)于JavaScript以及CSS文件和對(duì)應(yīng)的代碼展開(kāi)做好優(yōu)化工作。在進(jìn)行文件規(guī)模優(yōu)化時(shí)，應(yīng)當(dāng)重點(diǎn)針對(duì)不重要的HTML標(biāo)簽來(lái)進(jìn)行剔除，只有做好剔除優(yōu)化工作才能夠確保文件規(guī)模進(jìn)一步優(yōu)化，此外，我們還應(yīng)當(dāng)有效地避免內(nèi)聯(lián)式樣式存在，在做好文件規(guī)模優(yōu)化工作過(guò)程中還需要對(duì)于CSS代碼來(lái)進(jìn)行優(yōu)化。

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

內(nèi)容優(yōu)化對(duì)于Web前端開(kāi)發(fā)技術(shù)也有著非常重要的作用，一般來(lái)說(shuō)，針對(duì)內(nèi)容優(yōu)化的工作我們可以從兩個(gè)方面來(lái)進(jìn)行考慮也就是在頂部放置樣式表，在底部放置script。一般來(lái)說(shuō)，CSS本身就具備一定的覆蓋層疊的特征，因此瀏覽器一般會(huì)在完全加載之后再開(kāi)展渲染工作。因此，做好Web優(yōu)化工作，我們還需要考慮CSS本身的加載問(wèn)題。同時(shí)將script放在底部具有非常大的作用，它能夠有效地達(dá)到script腳本的執(zhí)行阻礙頁(yè)面的下載阻礙作用，從而有效地避免了頁(yè)面組件下載過(guò)程中下載速度過(guò)慢和頁(yè)面加載時(shí)間超長(zhǎng)的現(xiàn)象出現(xiàn)。

2.4 減少DNS查詢(xún)的次數(shù)

要想提高Web前端開(kāi)發(fā)技術(shù)，提高用戶(hù)的體驗(yàn)，加快網(wǎng)頁(yè)信息的傳遞速度，我們還需要有效地控制DNS的查詢(xún)次數(shù)。除了上述的其他因素以外，DNS也是造成網(wǎng)頁(yè)加載速度過(guò)慢的一個(gè)因素，一般來(lái)說(shuō)一次DNS的解析時(shí)間為20到120毫秒，那么如果DNS的解析請(qǐng)求發(fā)出數(shù)量過(guò)多那么就很容易會(huì)導(dǎo)致信息在傳輸過(guò)程中時(shí)間延長(zhǎng)。此外，更加重要的是DNS的查詢(xún)本身也就是瀏覽器進(jìn)行工作的基礎(chǔ)，一般來(lái)說(shuō)在查詢(xún)?nèi)蝿?wù)結(jié)束之前，瀏覽器是不會(huì)對(duì)于所處于域名之下的所有相關(guān)內(nèi)容進(jìn)行下載的。由此可見(jiàn)有效地控制DNS的查詢(xún)次數(shù)對(duì)Web前端優(yōu)化的重要性是非常大的。

2.5 避免重定向

重定向的現(xiàn)象發(fā)生也是導(dǎo)致頁(yè)面加載過(guò)程中時(shí)間延長(zhǎng)的一個(gè)重要因素，重定向的形成原因非常復(fù)雜。從根本上來(lái)進(jìn)行分析可以得知每一次重定向都會(huì)使得Web的請(qǐng)求次數(shù)增加。對(duì)于這方面的問(wèn)題，我們一般可以選擇在Web站點(diǎn)子目錄的后面來(lái)添加“/”，這樣就能夠有效地避免了重定向的目標(biāo)。

3 結(jié)語(yǔ)

提高Web前端開(kāi)發(fā)技術(shù)水平很大程度上能夠提升用戶(hù)在使用過(guò)程中的體驗(yàn)與感受，因此我們必須要重視優(yōu)化工作。要想有效地實(shí)現(xiàn)好優(yōu)化工作，我們就必須要在實(shí)際工作過(guò)程中總結(jié)經(jīng)驗(yàn)，做好多方面的觀察，只有這樣才能夠有目的性的來(lái)進(jìn)行優(yōu)化工作。

參考文獻(xiàn)：

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

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

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

（作者單位：四川輕化工大學(xué)）