Web前端開發(fā)技術(shù)與研究

李幫誠

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

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

中圖分類號：TP393 文獻標識碼：A 文章編號：1009-3044（2016）29-0047-03

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

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

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

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

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

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

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

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

1.2.1XHTML

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

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

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

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

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

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

1.2.2CSS

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

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

1.2.3JavaScript

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

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

1.2.4JQuery

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

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

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

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

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

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

2.2合理分配文件大小

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

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

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

3總結(jié)

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