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

兆 晶,楊曉宇

(石家莊理工職業(yè)學(xué)院,河北 石家莊 050000)

0 引言

隨著網(wǎng)絡(luò)的發(fā)展和信息技術(shù)的革新進(jìn)步,社會已逐漸從傳統(tǒng)型社會向互聯(lián)網(wǎng)社會轉(zhuǎn)型,人們的大部分行為活動都可以通過各種網(wǎng)站和移動應(yīng)用來實(shí)現(xiàn),日常的購物、繳費(fèi)、學(xué)習(xí)、出行、生產(chǎn)管理、交易等都被賦予了不同以往的操作行為,并且通過互聯(lián)網(wǎng)產(chǎn)生了全新的交互方式。Web前端開發(fā)為互聯(lián)網(wǎng)社會的進(jìn)步提供了基礎(chǔ)性保障,它是網(wǎng)頁開發(fā)中不可或缺的重要模塊,其核心技術(shù)和未來優(yōu)化方向是當(dāng)今網(wǎng)絡(luò)應(yīng)用的研究重點(diǎn),

1 Web前端開發(fā)的核心技術(shù)

1.1 B/S網(wǎng)站開發(fā)模式

B/S是Browser(瀏覽器)/Server(服務(wù)器)結(jié)構(gòu)的簡稱,是當(dāng)前網(wǎng)站項(xiàng)目開發(fā)中最常見的模式,也是目前網(wǎng)站應(yīng)用系統(tǒng)的主要發(fā)展方向[1]。B/S結(jié)構(gòu)是對傳統(tǒng)C/S結(jié)構(gòu)的優(yōu)化和改進(jìn)。C/S結(jié)構(gòu)是指Client(客戶機(jī))/Server(服務(wù)器)結(jié)構(gòu)[1]。在C/S結(jié)構(gòu)中,由服務(wù)器來負(fù)責(zé)網(wǎng)站數(shù)據(jù)信息的存儲和維護(hù),客戶機(jī)需要通過局域網(wǎng)連接到服務(wù)器,并負(fù)責(zé)用戶的交互行為。C/S結(jié)構(gòu)由于其組成特點(diǎn)存在兼容性差、維護(hù)管理難度大、只能面向固定用戶群體等限制性缺點(diǎn),近年來已逐步被B/S結(jié)構(gòu)取代。B/S結(jié)構(gòu)本質(zhì)上是一種三層結(jié)構(gòu)的C/S模式,通過運(yùn)行安裝在客戶端的瀏覽器向服務(wù)器發(fā)出訪問要求,在服務(wù)器端完成主要的邏輯處理后,再返回前端瀏覽器進(jìn)行少量事物處理就可以以Web頁面的形式展示出來。它是建立在廣域網(wǎng)范圍內(nèi)的結(jié)構(gòu)模式,用戶只需要通過互聯(lián)網(wǎng)和瀏覽器軟件就可以訪問數(shù)據(jù)平臺,打破了C/S結(jié)構(gòu)下的訪問環(huán)境限制,并且為用戶提供了較為統(tǒng)一的操作界面和交互形式。

1.2 HTML語言組成的頁面

HTML是一種超文本標(biāo)記語言,由一系列的標(biāo)簽組成,最終的呈現(xiàn)形式是在瀏覽器中看到的頁面,即通常所說的網(wǎng)頁。通過HTML語言可以在網(wǎng)頁中添加文字、表格、圖片、視頻、音頻和超鏈接等元素內(nèi)容,它定義了網(wǎng)頁的布局結(jié)構(gòu)和最終呈現(xiàn)形式。在前端開發(fā)中,如果將前端項(xiàng)目比作是一棟大廈,那HTML就好比是這棟大廈的主體結(jié)構(gòu),是瀏覽器用戶可以直接接觸到的文件。HTML最初由Tim Berners-Lee發(fā)明制定,經(jīng)過多年的更新迭代,目前主要使用的是HTML5版本,相較于歷史版本HTML5新增了canvas(繪畫)、video(視頻)、audio(音頻)等標(biāo)簽元素,更好地支持了瀏覽器的本地離線存儲功能,并且增加了全新的表單控件,比如表單類型中的date,time,email,url,number,search等。HTML頁面還在服務(wù)器端和瀏覽器端擔(dān)負(fù)著傳輸HTTP請求的重要任務(wù)。HTTP的全稱是超文本傳輸協(xié)議,負(fù)責(zé)向服務(wù)器請求資源鏈接,瀏覽器在收到對應(yīng)的腳本文件時(shí)再進(jìn)行解析執(zhí)行,從而形成了瀏覽器網(wǎng)頁中數(shù)據(jù)的動態(tài)獲取和更新[2]。

1.3 CSS樣式表

CSS指的是層疊樣式表,主要作用是定義HTML元素的表現(xiàn)樣式,可以指定元素的背景顏色、內(nèi)容所占位置、邊框形式、陰影情況等相關(guān)的樣式和布局描述[2]。目前,CSS技術(shù)已經(jīng)升級到CSS3版本,也是現(xiàn)下主流的開發(fā)版本,新增了一些特殊效果比如元素的圓角效果、漸變效果和透明效果等;利用彈性盒模型簡化實(shí)現(xiàn)了網(wǎng)頁的彈性布局,使網(wǎng)頁的響應(yīng)式開發(fā)更加輕松;新增了過渡屬性和動畫屬性,使CSS可以實(shí)現(xiàn)一些簡單的動畫效果和復(fù)雜樣式的交互;CSS3中的媒體查詢可以根據(jù)不同設(shè)備的分辨率自主定義不同的樣式布局,使得同一網(wǎng)站可以適應(yīng)不同尺寸設(shè)備的使用。

1.4 JavaScript語言及其衍生

JavaScript是一種解釋型的腳本,該語言最初的使用目的是處理表單的輸入驗(yàn)證。隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展流行,JavaScript語言逐漸擁有了可以處理復(fù)雜業(yè)務(wù)和運(yùn)算的能力,成為網(wǎng)站前端開發(fā)中必需的手段和技術(shù)。如今的JavaScript核心內(nèi)容主要包括ECMAScript,DOM和BOM,其中ECMAScript是JavaScript語言的語法標(biāo)準(zhǔn)和核心內(nèi)容。JavaScript具備讀取HTML頁面元素的能力,可以將文本動態(tài)地嵌入到HTML頁面中,不僅實(shí)現(xiàn)了表單數(shù)據(jù)提交前在瀏覽器端進(jìn)行驗(yàn)證操作的功能,還可以控制瀏覽器cookies的寫入和修改。在實(shí)際開發(fā)中可以通過直接方式或引用方式將JavaScript語言加入到網(wǎng)頁中。近年來,隨著Web前端的發(fā)展進(jìn)步,Web開發(fā)者搭建開發(fā)了多個(gè)JavaScript的庫和框架,例如早年流行的jQuery庫是一個(gè)基于JavaScript的封裝庫,通過封裝原生JavaScript語法大大簡化了前端開發(fā)的編程模式,其主要實(shí)現(xiàn)思路是通過操作DOM來實(shí)現(xiàn)業(yè)務(wù)邏輯。近幾年,開發(fā)者比較喜歡Angular,Vue和React框架。此類框架都是通過操作虛擬DOM以及數(shù)據(jù)驅(qū)動的理念來實(shí)現(xiàn)的[3]。JavaScript的庫和框架給前端開發(fā)者提供了新的編程模式,使得前端項(xiàng)目開發(fā)更加簡潔、高效。

2 Web前端開發(fā)的優(yōu)化方向

2.1 頁面元素結(jié)構(gòu)的語義化

首先,語義化是指HTML頁面內(nèi)容結(jié)構(gòu)語義化,結(jié)構(gòu)的語義化可以幫助用戶理解頁面層次,即使在失去CSS樣式的情況下也可以清楚判斷出頁面的整體結(jié)構(gòu)和大致內(nèi)容布局。其次,語義化還代表著需要開發(fā)者選擇使用語義化的標(biāo)簽。標(biāo)簽的語義化可以幫助網(wǎng)站的搜索引擎優(yōu)化,也更有利于在團(tuán)隊(duì)開發(fā)過程中的維護(hù)。最新的HTML5技術(shù)標(biāo)準(zhǔn)規(guī)范中新增了大量的語義標(biāo)簽,例如header,footer,main,nav,article等標(biāo)簽,使用此類標(biāo)簽可以清楚地區(qū)分頁面的頭部、底部、主要內(nèi)容、超鏈接區(qū)域、引用部分等布局結(jié)構(gòu),方便其他特殊設(shè)備的解析和識別,使得頁面代碼可讀性更強(qiáng)、標(biāo)簽使用更加規(guī)范。

2.2 MVVM開發(fā)模式

MVVM是指Model-View-ViewModel(模型-視圖-視圖模型),在本質(zhì)上是基于MVC框架的升級和改進(jìn)。此種開發(fā)模式的設(shè)計(jì)主旨是將網(wǎng)頁中的View(視圖)邏輯和業(yè)務(wù)邏輯各自分離出來,然后通過將數(shù)據(jù)與視圖綁定的方式由業(yè)務(wù)邏輯來驅(qū)動更新視圖邏輯[3]。MVVM的開發(fā)模式可以將頁面UI與邏輯處理有效解耦,增加邏輯代碼和視圖代碼的重復(fù)利用率;將頁面視圖的開發(fā)和業(yè)務(wù)邏輯開發(fā)抽離獨(dú)立出來,細(xì)化網(wǎng)頁開發(fā)者的工作內(nèi)容,比如可以明確頁面的設(shè)計(jì)由專業(yè)設(shè)計(jì)人員完成,而邏輯層的處理交由其他開發(fā)者進(jìn)行;在測試環(huán)節(jié)也可以針對ViewModel(視圖模型)層面來編寫,改善解決以往界面測試中遇到的難點(diǎn)。

2.3 提高網(wǎng)頁的綜合性能

2.3.1 減少網(wǎng)頁的HTTP請求數(shù)量

HTTP請求可以獲取、傳遞瀏覽器與服務(wù)器之間的信息和數(shù)據(jù),是影響頁面渲染速度的關(guān)鍵因素,對于HTTP請求的優(yōu)化是加快網(wǎng)頁打開速度、提高網(wǎng)頁響應(yīng)效率的根本途徑。一個(gè)完整的HTTP請求需要經(jīng)過如下步驟:(1)瀏覽器根據(jù)網(wǎng)頁的域名解析出IP地址;(2)瀏覽器和服務(wù)器建立TCP的3次握手;(3)瀏覽器給服務(wù)器發(fā)送HTTP請求;(4)服務(wù)器相應(yīng)HTTP請求;(5)瀏覽器收到返回的數(shù)據(jù)信息,并在瀏覽器端的頁面進(jìn)行處理,最后渲染出用戶所看到的界面[4]。在網(wǎng)頁中通常包含大量的HTTP請求,每一個(gè)HTTP請求都需要花費(fèi)瀏覽器的請求時(shí)間以及服務(wù)器的響應(yīng)時(shí)間,因此減少HTTP的請求數(shù)量是最簡單、最直接的性能優(yōu)化方式,例如可以采用CSS技術(shù)中的Image Maps(圖像地圖)技術(shù)把原本多個(gè)圖片資源HTTP請求放到一個(gè)HTTP請求上,大大降低了頁面HTTP請求的數(shù)量,提高了網(wǎng)頁的渲染速度[4]。

2.3.2 壓縮資源文件的大小

網(wǎng)頁加載的速度與其關(guān)聯(lián)的資源大小有著密切的關(guān)系,在同等網(wǎng)絡(luò)條件情況下大型文件會比小型文件占用更多的加載時(shí)間,為了提高網(wǎng)頁的運(yùn)行速度和反應(yīng)能力,開發(fā)者在項(xiàng)目中要丟棄一些不必要的資源文件,及時(shí)清理過期、無效的資源鏈接;在代碼編寫時(shí)要盡量降低代碼的重復(fù)性,對代碼進(jìn)行整合引用;在調(diào)用一些外部資源庫時(shí)可以選擇壓縮版本或者引入局部功能來減少文件的加載時(shí)間,比如說在使用Element-UI的庫時(shí)可以局部引入組件,只在項(xiàng)目中加載用到的組件可以大大減少第三方庫的帶寬占用。

3 結(jié)語

Web前端開發(fā)技術(shù)目前以HTML,CSS,JavaScript三者為主要組成,通過這3種技術(shù)對頁面的結(jié)構(gòu)布局、樣式表現(xiàn)和業(yè)務(wù)邏輯進(jìn)行編程開發(fā),并采用B/S結(jié)構(gòu)來適應(yīng)當(dāng)下的網(wǎng)絡(luò)環(huán)境特點(diǎn)。在之后的Web前端開發(fā)趨勢上,應(yīng)更加關(guān)注HTML頁面的語義化結(jié)構(gòu),采用更加可靠、便捷的MVVM前端開發(fā)模式,從多方面改進(jìn)提升網(wǎng)頁的運(yùn)行性能,從而不斷推進(jìn)前端技術(shù)的發(fā)展和優(yōu)化。