李幫誠

摘要：互聯(lián)網(wǎng)技術(shù)早已滲透我們生活中，隨著社會(huì)信息化的不斷推進(jìn)，Web2.0時(shí)代也悄悄到來。Web前端承擔(dān)著用戶與服務(wù)器信息交互的重任，網(wǎng)頁也絕不僅僅只停留在靜態(tài)圖片和文字的堆疊階段，媒體信息爆炸式增長(zhǎng)以及人們對(duì)用戶體驗(yàn)的更高要求也促使Web技術(shù)不斷發(fā)展。闡述了主流的Web前端開發(fā)模式和技術(shù)語言，并提出優(yōu)化開發(fā)效率的技術(shù)手段。

關(guān)鍵詞：Web前端；開發(fā)模式；技術(shù)語言；優(yōu)化方法

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2016）29-0047-03

互聯(lián)網(wǎng)已深入我們生活方方面面，人們對(duì)互聯(lián)網(wǎng)需求也產(chǎn)生了新的變化。當(dāng)今以計(jì)算機(jī)數(shù)據(jù)傳輸和處理技術(shù)為基礎(chǔ)的信息化社會(huì)已被公眾所認(rèn)可，生活中充斥著各種各樣的信息?；ヂ?lián)網(wǎng)對(duì)社會(huì)生產(chǎn)活動(dòng)的推動(dòng)作用不言而喻，許多關(guān)系經(jīng)濟(jì)命脈的重要行業(yè)和關(guān)乎人民生命安全的關(guān)鍵活動(dòng)對(duì)互聯(lián)網(wǎng)的依賴更是強(qiáng)烈。

Web前端是指以瀏覽器為解析工具，為用戶呈現(xiàn)信息的交互媒介的頁面。Web開發(fā)具體涉及整個(gè)頁面圖片、文字、廣告以及flash的編輯設(shè)計(jì)，其主要設(shè)計(jì)模塊有Web頁面的結(jié)構(gòu)、外觀視覺表現(xiàn)及信息的交互實(shí)現(xiàn)等。作為互聯(lián)網(wǎng)信息的主要載體以及用戶與服務(wù)器交互媒介，網(wǎng)頁的用戶體驗(yàn)與運(yùn)行穩(wěn)定性直接影響到用戶對(duì)該站點(diǎn)資源的信息獲取，進(jìn)而關(guān)系到整個(gè)數(shù)據(jù)環(huán)境價(jià)值的實(shí)現(xiàn)乃至一項(xiàng)新技術(shù)的傳播開展，Web前端開發(fā)的重要性早已被人們所認(rèn)可，許多高效的開發(fā)技術(shù)也應(yīng)運(yùn)而生。目前Web前端開發(fā)技術(shù)呈多樣化發(fā)展，其技術(shù)革新日新月異，不同的技術(shù)手段有著不同的適用場(chǎng)合。Web2.0時(shí)代下用戶對(duì)網(wǎng)頁動(dòng)態(tài)信息和高度人機(jī)交互的需求愈發(fā)強(qiáng)烈，探討Web前端開發(fā)技術(shù)尤為必要。

1前端核心技術(shù)分析

Web2.0技術(shù)背景下的開發(fā)交互性已經(jīng)有了很大的增強(qiáng)，HTML、CSS和JavaScript作為Web前端開發(fā)中的支柱型設(shè)計(jì)語言分別具有各自的特點(diǎn)以及代碼的質(zhì)量標(biāo)準(zhǔn)，其優(yōu)點(diǎn)和重要性毋庸置疑。三者在開發(fā)中雖然承擔(dān)著不同的任務(wù)，各自的運(yùn)行標(biāo)準(zhǔn)和設(shè)計(jì)方法也不一樣，但卻是相互交織內(nèi)嵌，合作完成整個(gè)Web項(xiàng)目的開發(fā)。除了這三種核心技術(shù)語言外，延伸出的諸如JQuery、Bootstrap、Ajax之類的技術(shù)框架和插件工具在Web前端開發(fā)中應(yīng)用也十分廣泛。此外，Web前端開也有不同的模式，當(dāng)今主流為B/S架構(gòu)模式。截至目前，搜狐、新浪等門戶網(wǎng)站以及許多視頻站點(diǎn)的Web前端架構(gòu)均涉及了上述技術(shù)。下面將分別對(duì)目前廣泛使用到的Web前端開發(fā)技術(shù)做闡述。

1.1前端B/S開發(fā)模式

B/S（Browser/Server）是一種建立在廣域網(wǎng)的基礎(chǔ)上三層架構(gòu)，即瀏覽器/服務(wù)器結(jié)構(gòu)。Browser是指客戶端，此模式下不需要在每臺(tái)Pc上安裝定制的App，便于產(chǎn)品推廣和用戶使用。B/S架構(gòu)對(duì)系統(tǒng)要求很低，不需要安裝指定的操作系統(tǒng)，只需要有Web瀏覽器即可。

B/S架構(gòu)中，客戶端負(fù)責(zé)顯示及信息交互，數(shù)據(jù)和事務(wù)處理的壓力留給了后端服務(wù)器，因此這樣就避免了龐大的客戶端程序，減少了PC機(jī)CPU以及操作系統(tǒng)的壓力。B/S模式以廣域網(wǎng)為基礎(chǔ)，不需要專一的網(wǎng)絡(luò)環(huán)境，一般只需操作系統(tǒng)和瀏覽器便可運(yùn)行。由于應(yīng)用的普適性，Bs模式對(duì)安全機(jī)制相對(duì)較弱，其面向的用戶群體是不可知的。B/S程序由構(gòu)件組成，構(gòu)件的更換方便，利于系統(tǒng)的無縫升級(jí)，能夠把后期維護(hù)的預(yù)算減到最小，且B/S模式建立在瀏覽器上，用戶交流更為靈活，使用者從網(wǎng)上自己下載安裝就可以實(shí)現(xiàn)產(chǎn)品升級(jí)，方便快捷，對(duì)于開發(fā)人員來說可以減輕后臺(tái)處理邏輯的負(fù)擔(dān)，對(duì)于使用者來說，網(wǎng)頁的瀏覽速度和交互能力得到顯著改善，相應(yīng)的用戶體驗(yàn)也大大提高。目前B/S技術(shù)正朝著更加成熟的方向發(fā)展。

1.2Web開發(fā)技術(shù)

1.2.1XHTML

XHTML是在HTML語言基礎(chǔ)上延伸發(fā)展而來。HTML（Hypeflext Markup Language，超級(jí)文本標(biāo)記語言）是標(biāo)準(zhǔn)通用標(biāo)記語言分支下的一個(gè)應(yīng)用，同時(shí)也是一種網(wǎng)頁開發(fā)的規(guī)范標(biāo)準(zhǔn)，它通過對(duì)標(biāo)簽符號(hào)的使用來實(shí)現(xiàn)對(duì)網(wǎng)頁各個(gè)元素的編輯展示。Web2.0背景下出現(xiàn)的XHTML在原有HTML語言的基礎(chǔ)上引進(jìn)了許多新的結(jié)構(gòu)元素，這些新的元素利于跨平臺(tái)、跨分辨率設(shè)計(jì)，且版本控制簡(jiǎn)單，與舊版HTML相比在終端上擁有許多優(yōu)勢(shì)。由于HTML語言規(guī)則較為松散，技術(shù)開發(fā)者具有很高的自由度，這對(duì)于代碼編寫人來說是很大的便利，相對(duì)的，機(jī)器解析難度也大，尤其在許多諸如智能手機(jī)等移動(dòng)設(shè)備上，因此便出現(xiàn)了語法要求較為嚴(yán)格的XHTML。

XHTML是在XML基礎(chǔ)上發(fā)展而來的可擴(kuò)展超文本標(biāo)記語言，具備了HTML和XML雙重功能，同時(shí)也是一個(gè)過渡性的技術(shù)。此外XHML是一種增強(qiáng)型的可擴(kuò)展的HTML，擁有更為強(qiáng)大的靈活性與可擴(kuò)展性。與HMTL相比XHTML具有如下優(yōu)勢(shì)：

1）降低了瀏覽器兼容性要求。根據(jù)XHTML規(guī)則編寫的頁面均不需要測(cè)試調(diào)整就可直接用于各種類型的瀏覽器解析，降低了瀏覽器兼容性要求。

2）XHTML具有更好的跨平臺(tái)交互性，具有和其他基于XML的開發(fā)語言交互的能力，一定程度擴(kuò)展了其應(yīng)用范圍。

作為HTML語言的加強(qiáng)版，XHTML有許多特點(diǎn)，比如它對(duì)語法和邏輯要求更為嚴(yán)格（例如在XHTML文件中規(guī)定標(biāo)簽必須采用小寫字母等等）。此外，與HTML相比，XHTML語言提高了瀏覽器的解析能力，具有更高的普適性。HTML代碼量相對(duì)較多且規(guī)范性較差，在解析能力上對(duì)瀏覽器要求也高，所以在某些應(yīng)用網(wǎng)絡(luò)設(shè)備上不能運(yùn)行HTML編寫的應(yīng)用，而XHT-ML很好地解決了這個(gè)問題。

近年來，隨著Web開發(fā)版本的不斷更新XHTML的應(yīng)用也越來越廣泛，它在Web開發(fā)領(lǐng)域所表現(xiàn)出的強(qiáng)大優(yōu)勢(shì)也慢慢得到重視，實(shí)現(xiàn)了網(wǎng)頁標(biāo)準(zhǔn)化開發(fā)技術(shù)的一次飛躍。隨著前端開發(fā)技術(shù)的進(jìn)步，XHTML也朝著協(xié)議更為標(biāo)準(zhǔn)化、跨瀏覽器兼容性更好和更為穩(wěn)定的方向發(fā)展。

1.2.2CSS

CSS（Cascading Style Sheets，級(jí)聯(lián)樣式表）是一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語言，它能夠用于增強(qiáng)網(wǎng)頁樣式控制，并且CSS允許將網(wǎng)頁的樣式信息與內(nèi)容信息分離。相對(duì)于基于傳統(tǒng)HTML技術(shù)的網(wǎng)頁設(shè)計(jì)方法，CSS技術(shù)可以精確控制HTML標(biāo)簽對(duì)象在網(wǎng)頁中的位置、排版和樣式等元素。CSS代碼的編寫規(guī)范有嚴(yán)格的要求，基層開發(fā)人員雖然能很快把握技術(shù)要領(lǐng)，但若要深入學(xué)習(xí)CSS并且進(jìn)一步了解跨瀏覽器兼容和進(jìn)行交互設(shè)計(jì)時(shí)，CSS便會(huì)體現(xiàn)出其博大精深的特點(diǎn)。CSS是當(dāng)今網(wǎng)頁設(shè)計(jì)領(lǐng)域最優(yōu)秀、應(yīng)用最廣泛的樣式設(shè)計(jì)語言。CSS的語法較為靈活，對(duì)于很多屬性，均擁有簡(jiǎn)化的代碼編寫方法，并且代碼的可讀性較高。內(nèi)嵌CSS技術(shù)的Web開發(fā)能更好地幫助開發(fā)人員實(shí)現(xiàn)內(nèi)容和頁面分離，特別是以CSS+DIV為特色的布局技術(shù)已經(jīng)在各大門戶網(wǎng)站得到應(yīng)用，這將大大提高站點(diǎn)后期維護(hù)效率。

目前最新版本CSS3更是添加了許多強(qiáng)大的屬性，例如polyfiH的提出彌合了功能較弱的瀏覽器與功能較強(qiáng)的瀏覽器之間的差異，canvas繪制2D圖形，逐像素進(jìn)行渲染，可以通過多種方法使用canvas元素繪制路徑、矩形、圓形、字符以及添加圖像。它通常依托JavaScript實(shí)現(xiàn)，為弱功能的瀏覽器提供一定程度的對(duì)XHTML和CSS3的API和屬性的支持。漸變背景也是CSS3中的新特性，還有諸如用來加載字體樣式的Font-face、對(duì)文字更深層次的渲染text-decoration等等。這些最新的屬性在當(dāng)今web前端開發(fā)中已經(jīng)被廣泛運(yùn)用，其強(qiáng)大的功能也在人機(jī)交互領(lǐng)域被展現(xiàn)出來。

1.2.3JavaScript

隨著JavaScript技術(shù)的出現(xiàn)，Web前端開發(fā)便進(jìn)入了高速發(fā)展時(shí)期。JavaScript是由網(wǎng)景公司提出，基于瀏覽器的web開發(fā)應(yīng)用最廣泛的腳本語言，具有事件響應(yīng)和面向?qū)ο蟮奶攸c(diǎn)。通常會(huì)用于為HTML網(wǎng)頁添加動(dòng)態(tài)功能，例如響應(yīng)用戶的各種操作、flash動(dòng)畫切換等等。

JavaScript能夠?qū)崿F(xiàn)復(fù)雜的前端邏輯和混合應(yīng)用開發(fā)，是唯一能在所有主流平臺(tái)被原生支持的編程語言，故廣泛被技術(shù)人員青睞。JavaScript采用的是對(duì)象事件觸發(fā)機(jī)制，為元素設(shè)置監(jiān)聽事件，當(dāng)監(jiān)聽到某個(gè)元素的某個(gè)事件觸發(fā)時(shí)便會(huì)調(diào)用相應(yīng)的事件處理函數(shù)來執(zhí)行處理事件，處理完成后將結(jié)果返回函數(shù)調(diào)用元素。隨著web前端開發(fā)技術(shù)的不斷進(jìn)步，JavaScnpt在其他領(lǐng)域也開始發(fā)揮作用，例如在非瀏覽器端和服務(wù)器端編程，Ja-vaScript也慢慢煥發(fā)了新的生命力。

1.2.4JQuery

JQuery由John Resig于2006年創(chuàng)建，是一個(gè)的輕量級(jí)Ja-vaScfipt庫。JQuery框架的引進(jìn)會(huì)使開發(fā)效率大大提高，開發(fā)人員可以很便捷的實(shí)現(xiàn)文檔對(duì)象操作、DOM元素選擇、動(dòng)畫效果制作等等其他操作。目前應(yīng)用廣泛的JavaScript框架有許多，例如Prototype、Dojo、ExtJS等，但JQuery框架的使用率是最高的。

JQuery借鑒了HTML和CSS結(jié)構(gòu)中的很多優(yōu)點(diǎn)，能夠方便地實(shí)現(xiàn)動(dòng)畫效果，并且可以為網(wǎng)站提供AJAX交互。它使用了對(duì)稱性和一致性設(shè)計(jì)原則，語法簡(jiǎn)介明了且擁有很好的平臺(tái)兼容性，可以簡(jiǎn)化JavaScript的各種操作以及解決各種瀏覽器之間的兼容性問題。JQuery在互聯(lián)網(wǎng)尤其是web開發(fā)中得到了廣泛的應(yīng)用。

2Web應(yīng)用的優(yōu)化方法

高效為用戶提供所需信息并且快速實(shí)現(xiàn)用戶與后端服務(wù)器數(shù)據(jù)傳遞是一個(gè)優(yōu)秀Web頁面的價(jià)值所在，同時(shí)也是前端開發(fā)人員所追求的目標(biāo)。若用戶獲取信息的等待時(shí)間過長(zhǎng)，或者網(wǎng)頁運(yùn)行不穩(wěn)定甚至出現(xiàn)崩潰，這樣輕則影響用戶體驗(yàn)，造成用戶對(duì)該站點(diǎn)不良的印象，重則會(huì)導(dǎo)致重要數(shù)據(jù)丟失，給人們帶來重大財(cái)產(chǎn)損失。作為一名Web前端開發(fā)人員，除了要實(shí)現(xiàn)網(wǎng)頁的基本功能，優(yōu)化Web前端也是十分重要的，下面將常見的Web優(yōu)化方法做逐一闡述。

2.1合理設(shè)置HTTP請(qǐng)求次數(shù)

在進(jìn)行web開發(fā)時(shí)，開發(fā)人員往往會(huì)更加傾向于使用很多圖片，以達(dá)到使頁面更加華麗的目的，然而在實(shí)際運(yùn)行時(shí)整個(gè)頁面的加載速度會(huì)被過多的跳轉(zhuǎn)環(huán)節(jié)將拖慢。所以，對(duì)于不同內(nèi)容的網(wǎng)頁應(yīng)該在保證其腳本功能的基礎(chǔ)上，使頁面盡可能簡(jiǎn)潔大方，避免使用過多的圖片，減少頁面上不必要的跳操作，來減少HTTP的請(qǐng)求速度，使整個(gè)網(wǎng)頁能更快速運(yùn)行。

2.2合理分配文件大小

文件大小會(huì)影響到網(wǎng)頁加載速度和寬帶資源的占用，編寫簡(jiǎn)潔的代碼以減小相應(yīng)文件大小，對(duì)于加快網(wǎng)頁運(yùn)行速度，釋放有用資源十分重要。

2.3優(yōu)化DNS查詢方法

DNS查詢的每一次解析會(huì)耗費(fèi)一定時(shí)間，并且在DNS查詢過程中相關(guān)站點(diǎn)將被占用。過于繁瑣的DNS查詢十分影響網(wǎng)頁加載速度，用戶體驗(yàn)也會(huì)下降，因此，合理設(shè)置DNS的查詢時(shí)間，減少資源占用，來滿足用戶體驗(yàn)效果。

3總結(jié)

Web前端開發(fā)技術(shù)發(fā)展迅速，技術(shù)手段也日新月異，這要求我們時(shí)刻保持敏銳的技術(shù)嗅覺。精通Web前端開發(fā)不僅僅是熟練使用各種技術(shù)語言和開發(fā)模式，更重要的是能夠掌握這些技術(shù)的適用范圍、整體構(gòu)架和功能分類等，合理利用這些技術(shù)，用最科學(xué)的方法去解決實(shí)際項(xiàng)目開發(fā)中的各個(gè)問題。Web前端開發(fā)技術(shù)的優(yōu)化既可以加快網(wǎng)頁加載速度，提高用戶體驗(yàn)和站點(diǎn)工作效率，又能夠解除不必要的資源占用，保證資源利用效率和使用價(jià)值，這也是一名前端開發(fā)技術(shù)人員必須要考慮的問題。