Web前端開發技術以及優化方向分析

兆 晶,楊曉宇

(石家莊理工職業學院,河北 石家莊 050000)

0 引言

隨著網絡的發展和信息技術的革新進步,社會已逐漸從傳統型社會向互聯網社會轉型,人們的大部分行為活動都可以通過各種網站和移動應用來實現,日常的購物、繳費、學習、出行、生產管理、交易等都被賦予了不同以往的操作行為,并且通過互聯網產生了全新的交互方式。Web前端開發為互聯網社會的進步提供了基礎性保障,它是網頁開發中不可或缺的重要模塊,其核心技術和未來優化方向是當今網絡應用的研究重點,

1 Web前端開發的核心技術

1.1 B/S網站開發模式

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

1.2 HTML語言組成的頁面

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

1.3 CSS樣式表

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

1.4 JavaScript語言及其衍生

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

2 Web前端開發的優化方向

2.1 頁面元素結構的語義化

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

2.2 MVVM開發模式

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

2.3 提高網頁的綜合性能

2.3.1 減少網頁的HTTP請求數量

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

2.3.2 壓縮資源文件的大小

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

3 結語

Web前端開發技術目前以HTML,CSS,JavaScript三者為主要組成,通過這3種技術對頁面的結構布局、樣式表現和業務邏輯進行編程開發,并采用B/S結構來適應當下的網絡環境特點。在之后的Web前端開發趨勢上,應更加關注HTML頁面的語義化結構,采用更加可靠、便捷的MVVM前端開發模式,從多方面改進提升網頁的運行性能,從而不斷推進前端技術的發展和優化。