Web前端開(kāi)發(fā)技術(shù)的分析與研究

郭栩男

（金瓜子科技發(fā)展（北京）有限公司 北京市 100000）

進(jìn)入信息化社會(huì)，很多工作都需要通過(guò)網(wǎng)絡(luò)完成，而一些重要的應(yīng)用、服務(wù)也要借助用戶訪問(wèn)網(wǎng)頁(yè)頁(yè)面、使用網(wǎng)頁(yè)頁(yè)面，使用功能和接受服務(wù)。決定網(wǎng)頁(yè)頁(yè)面性能、外觀、功能的Web前端開(kāi)發(fā)，也成為了互聯(lián)網(wǎng)企業(yè)提升競(jìng)爭(zhēng)力、優(yōu)化服務(wù)、豐富功能的重要工作。優(yōu)秀的Web前端開(kāi)發(fā)可以給客戶直觀地展現(xiàn)各種信息，方便用戶使用頁(yè)面中的功能，并保證頁(yè)面的性能，如果對(duì)頁(yè)面的優(yōu)化不足，將會(huì)導(dǎo)致重要的功能難以實(shí)現(xiàn)，影響用戶的使用體驗(yàn)，不利于產(chǎn)品和服務(wù)的推廣。因此，目前應(yīng)該保持對(duì)Web前端技術(shù)的研發(fā)，不斷優(yōu)化前端技術(shù)，提升頁(yè)面的質(zhì)量和性能。

1 Web前端開(kāi)發(fā)技術(shù)的基本工作原理及特點(diǎn)

1.1 基本原理

Web前端技術(shù)在前端開(kāi)發(fā)不斷增加的背景下得到了廣泛普及，給技術(shù)以傳統(tǒng)的網(wǎng)頁(yè)制作技術(shù)作為基礎(chǔ)，使用目前的交互設(shè)計(jì)理念進(jìn)行前端開(kāi)發(fā)設(shè)計(jì)。Web前端技術(shù)內(nèi)容比較龐大，除了常用的HTML、CSS、Javascript技術(shù)，還包括各種規(guī)范、協(xié)議，構(gòu)成了Web開(kāi)發(fā)的核心體系結(jié)構(gòu)。根據(jù)前端開(kāi)發(fā)的需要，還發(fā)展出Vue、React、Angular等框架，這些開(kāi)發(fā)框架的標(biāo)準(zhǔn)不同，但是各種框架的底層具有緊密的邏輯。用戶瀏覽網(wǎng)頁(yè)時(shí)，需要在瀏覽器中輸入網(wǎng)址，之后瀏覽器將網(wǎng)址發(fā)送給DNS服務(wù)器進(jìn)行域名解析，獲得域名相關(guān)的IP地址，獲得IP地址后，可以向?qū)?yīng)的服務(wù)器發(fā)出請(qǐng)求，服務(wù)器獲得請(qǐng)求之后，會(huì)根據(jù)統(tǒng)一資源定位器提供相應(yīng)資源，生成HTML頁(yè)面，客戶端接收HTML文件，通過(guò)解析HTML文件，以及HMTL中引用的其他文件，進(jìn)行內(nèi)容的整理和排布，顯示在用戶面前。Web前端開(kāi)發(fā)工作就是使用包括HTML、CSS、JavaScript等技術(shù)呈現(xiàn)內(nèi)容，并通過(guò)使用合理的開(kāi)發(fā)方法、技術(shù)進(jìn)行前端優(yōu)化，提升網(wǎng)頁(yè)的性能。

1.2 特點(diǎn)

相對(duì)于傳統(tǒng)的計(jì)算機(jī)編程，網(wǎng)頁(yè)前端開(kāi)發(fā)技術(shù)的學(xué)習(xí)難度很低，學(xué)習(xí)曲線更為平滑，雖然隨著后期學(xué)習(xí)難度同樣逐漸遞增，但依然比較簡(jiǎn)單。開(kāi)發(fā)人員學(xué)習(xí)Web前端開(kāi)發(fā)技術(shù)需要足夠的實(shí)踐和思考，形成扎實(shí)的專業(yè)知識(shí)儲(chǔ)備和經(jīng)驗(yàn)積累，有效控制在網(wǎng)頁(yè)前端開(kāi)發(fā)中的各種工作細(xì)節(jié)，并且時(shí)刻關(guān)注網(wǎng)頁(yè)開(kāi)發(fā)技術(shù)的更新迭代，利用全新技術(shù)優(yōu)化網(wǎng)頁(yè)性能，豐富網(wǎng)頁(yè)的功能和饑餓表現(xiàn)力。Web前端包括了兼容開(kāi)發(fā)、改善開(kāi)發(fā)、多項(xiàng)開(kāi)發(fā)三大功能，通過(guò)充分優(yōu)化，提升網(wǎng)頁(yè)的加載速度，縮短網(wǎng)頁(yè)的運(yùn)行時(shí)間和提升網(wǎng)頁(yè)的運(yùn)行效率，確保網(wǎng)頁(yè)流暢的運(yùn)行和使用體驗(yàn)。

1.3 前端的B/S開(kāi)發(fā)模式

B/S開(kāi)發(fā)模式是一種建立在廣域網(wǎng)基礎(chǔ)上的開(kāi)發(fā)模式，即瀏覽器/服務(wù)器結(jié)構(gòu)，B指Browser客戶端或者瀏覽器。該模式下，用戶并不需要在自己的電腦、手機(jī)上安裝應(yīng)用，直接通過(guò)瀏覽器訪問(wèn)就能得到服務(wù)和享受相關(guān)功能。B/S模式開(kāi)發(fā)具有非常強(qiáng)的通用性，用戶的訪問(wèn)不會(huì)受到系統(tǒng)限制，使得Web前端開(kāi)發(fā)具有跨平臺(tái)的特征。在B/S架構(gòu)中，客戶管負(fù)責(zé)顯示信息和實(shí)現(xiàn)信息交互，數(shù)據(jù)處理工作一般由后端負(fù)責(zé)，從而降低了PC和CPU的操作系統(tǒng)壓力，能擴(kuò)大應(yīng)用的使用范圍，方便各種互聯(lián)網(wǎng)產(chǎn)品的推廣。由于具有很強(qiáng)的普適性，導(dǎo)致使用B/S開(kāi)發(fā)的應(yīng)用存在安全性不足的問(wèn)題，尤其在開(kāi)放訪問(wèn)的情況下，訪問(wèn)的客戶身份是未知的，因此必須做好對(duì)服務(wù)器的安全防護(hù)工作。但是由于B/S程序組成相對(duì)簡(jiǎn)單，系統(tǒng)升級(jí)和應(yīng)用更新也更為輕松，并且應(yīng)用投入運(yùn)營(yíng)后維護(hù)費(fèi)用相對(duì)較低，前端和后端分離的開(kāi)發(fā)模式降低了人員開(kāi)發(fā)中的負(fù)擔(dān)，讓很多全新的功能更快上線。對(duì)于網(wǎng)頁(yè)使用者而言，能更快地獲得各種功能，網(wǎng)頁(yè)的使用體驗(yàn)也明顯提升。

2 Web前端開(kāi)發(fā)技術(shù)內(nèi)容分析

2.1 超文本標(biāo)記語(yǔ)言

2.1.1 超文本標(biāo)記語(yǔ)言的內(nèi)涵

超文本標(biāo)記語(yǔ)言簡(jiǎn)稱HTML，是網(wǎng)頁(yè)的基礎(chǔ)和主體，使用標(biāo)簽將文檔格式進(jìn)行統(tǒng)一管理，讓分散的網(wǎng)頁(yè)資源構(gòu)成一個(gè)具有邏輯的統(tǒng)一整體。瀏覽器解析HTML時(shí)，會(huì)根據(jù)HTML命令生成文字、圖形、控件、動(dòng)畫(huà)、表格、鏈接等等。從本質(zhì)來(lái)講，HTML在網(wǎng)頁(yè)中發(fā)揮著組織信息的作用，根據(jù)HTML文檔，可以明確文字、圖標(biāo)、其他問(wèn)題信息之間的關(guān)聯(lián)和關(guān)系，并且利用文檔中的鏈接實(shí)現(xiàn)和其他計(jì)算機(jī)文件之間的連接。目前HTML已經(jīng)發(fā)展到HTML5，作為全新的標(biāo)準(zhǔn)，HTML5拓展了HTML原本的功能，除了傳統(tǒng)的文本內(nèi)容、圖片內(nèi)容，HTML5和CSS3之間的配合能夠給頁(yè)面增加更多的動(dòng)畫(huà)。瀏覽器解析HTML文檔時(shí)，會(huì)按照從上到下的順序進(jìn)行讀取，然后根據(jù)標(biāo)記符解釋顯示其中的內(nèi)容，在顯示過(guò)程中，并不會(huì)指出其中存在的錯(cuò)誤，發(fā)現(xiàn)錯(cuò)誤后會(huì)直接跳過(guò)錯(cuò)誤繼續(xù)進(jìn)行后續(xù)的解析工作，所以網(wǎng)頁(yè)的編寫(xiě)人員要根據(jù)顯示出來(lái)的效果確定出錯(cuò)的原因和確定出錯(cuò)的位置。不同瀏覽器對(duì)HTML的解析方式也有一定的不同，所以HTML文件在不同的瀏覽器中會(huì)解析出不同的效果。

2.1.2 HTML的特點(diǎn)

HTML功能已經(jīng)十分強(qiáng)大，但是并不復(fù)雜，其中可以嵌入不同格式的文件，進(jìn)一步豐富了HTML的功能。目前HTML的升級(jí)使用了超集方式，因此升級(jí)比較的靈活方便，有利于技術(shù)人員的項(xiàng)目遷移和對(duì)不同版本的兼容性。超文本標(biāo)記語(yǔ)言的拓展性很強(qiáng)，并且具有可嵌入的特點(diǎn)，所以具有極強(qiáng)的可拓展性，給系統(tǒng)不斷豐富和拓展功能帶來(lái)了保證。由于HTML文件直接通過(guò)瀏覽器解析，使得其具有非常強(qiáng)的拓展性，得到了各個(gè)平臺(tái)的廣泛應(yīng)用，

2.2 腳本語(yǔ)言

Web前端開(kāi)發(fā)使用Javascript這一腳本語(yǔ)言，是一種基于對(duì)象和事件驅(qū)動(dòng)的腳本語(yǔ)言，有函數(shù)優(yōu)先的輕量級(jí)特點(diǎn)，屬于解釋型或者即時(shí)編譯型的編程語(yǔ)言。既滿足傳統(tǒng)高級(jí)計(jì)算機(jī)語(yǔ)言的特點(diǎn)，也具有學(xué)習(xí)簡(jiǎn)單、編寫(xiě)高效、簡(jiǎn)潔的優(yōu)勢(shì)，所以廣泛應(yīng)用于互聯(lián)網(wǎng)開(kāi)發(fā)中。所有現(xiàn)代HTML界面都是用Javascript開(kāi)發(fā)，隨著技術(shù)發(fā)展，Javascript功能也日趨完善，被大量應(yīng)用在非瀏覽器環(huán)境中。目前JavaScript支持面向?qū)ο?、命令式、聲明式、函?shù)式編程范式。

在Web前端界面中，JavaScript能嵌入HTML頁(yè)面中，通過(guò)DOM讀寫(xiě)頁(yè)面中的HTML元素，對(duì)鼠標(biāo)點(diǎn)擊等事件做出反應(yīng)，和瀏覽器進(jìn)行交互。驗(yàn)證向服務(wù)器提交的數(shù)據(jù)。發(fā)展出的Node.js技術(shù)能用于服務(wù)器環(huán)境編程，擴(kuò)大了JavaScript的應(yīng)用范圍。JavaScript具有跨平臺(tái)的特性，所以在瀏覽器的支持下，就能在不同平臺(tái)上運(yùn)行。作為一種動(dòng)態(tài)性的語(yǔ)言，JavaScript依靠事件驅(qū)動(dòng)，能在不經(jīng)過(guò)服務(wù)器的情況下直接對(duì)用戶的輸入作出反應(yīng)。

2.3 層疊樣式表

2.3.1 層疊樣式表的內(nèi)涵

層疊樣式表Cascading Style Sheets，簡(jiǎn)稱CSS，其中存儲(chǔ)的數(shù)據(jù)描述了在屏幕、紙張、媒體上顯示的CSS元素。CSS是一種用來(lái)表現(xiàn)HTML或者XML等文件樣式的計(jì)算機(jī)語(yǔ)言，可以靜態(tài)修飾網(wǎng)頁(yè)，發(fā)展到CSS3后，已經(jīng)可以較好地描述網(wǎng)頁(yè)中的動(dòng)態(tài)內(nèi)容。利用JavaScript通過(guò)修改CSS就能改變網(wǎng)頁(yè)中元素的樣式，豐富網(wǎng)頁(yè)的內(nèi)容和提升網(wǎng)頁(yè)的表現(xiàn)性。使用CSS能對(duì)網(wǎng)頁(yè)中的所有元素位置和排版進(jìn)行精確控制，包括改變字體、字號(hào)、顏色、背景等等，可以對(duì)網(wǎng)頁(yè)對(duì)象和模型的樣式進(jìn)行編輯。

2.3.2 層疊樣式表的原理

CSS是一種定義樣式結(jié)構(gòu)的方式，能夠定義字體、顏色、位置等語(yǔ)言，可以用于描述網(wǎng)頁(yè)上的格式和顯示方式。利用CSS樣式能儲(chǔ)存HTML網(wǎng)頁(yè)或者單獨(dú)的樣式文件，定義指定元素的顯示規(guī)則。CSS作為一種格式化的指令，其樣式規(guī)則能夠使用在一個(gè)或者多個(gè)元素中，具有一定的層次結(jié)構(gòu)。

2.3.3 層疊樣式表的優(yōu)勢(shì)

CSS的出現(xiàn)將網(wǎng)頁(yè)樣式設(shè)計(jì)從傳統(tǒng)網(wǎng)頁(yè)設(shè)計(jì)中獨(dú)立出來(lái)，提升了設(shè)計(jì)工作的效率，是Web前端設(shè)計(jì)理念的突破，通過(guò)修改CSS樣式，能更快、更簡(jiǎn)潔地設(shè)計(jì)網(wǎng)頁(yè)中的所有元素。CSS擁有豐富的樣式定義功能，根據(jù)元素的class、id，CSS可以選擇性地進(jìn)行定義和描述元素的外觀。設(shè)計(jì)時(shí)，可以使用CSS是創(chuàng)建元素的邊框、元素之間的距離、元素位置，并且能改變文本的大小，以及文本的修飾方式。

目前的網(wǎng)頁(yè)設(shè)計(jì)中，CSS定義在HTML元素的style屬性或者文檔的header部分，很多更為復(fù)雜和精美的界面，會(huì)專門(mén)編寫(xiě)CSS文件，通過(guò)HTML引用。這種設(shè)計(jì)模式讓網(wǎng)頁(yè)的樣式得到統(tǒng)一存放和統(tǒng)一管理，對(duì)同一種樣式的元素進(jìn)行歸類、樣式管理，也降低了網(wǎng)頁(yè)的維護(hù)難度，只要修改CSS文件，就能快速完成對(duì)相應(yīng)格式的修改工作。同一個(gè)網(wǎng)站的多個(gè)界面都可以引用同一個(gè)CSS文件，不僅降低了設(shè)計(jì)難度，還能快速實(shí)現(xiàn)網(wǎng)站風(fēng)格的統(tǒng)一。

CSS中的疊層是指對(duì)一個(gè)元素多次設(shè)置同一方面樣式時(shí)，會(huì)使用最后一次設(shè)置的屬性值。比如一個(gè)網(wǎng)頁(yè)應(yīng)用了多個(gè)CSS文件，可能會(huì)出現(xiàn)多個(gè)CSS文件同時(shí)對(duì)某個(gè)或者某類元素設(shè)置樣式的情況，每一次設(shè)置都會(huì)重寫(xiě)元素的樣式，直到完成最后一次重寫(xiě)，所以瀏覽器界面提供的是最后一次設(shè)置界面的效果。過(guò)去的HTML網(wǎng)頁(yè)編寫(xiě)中，需要重復(fù)性地進(jìn)行頁(yè)面樣式的設(shè)置，在CSS使用后，有效壓縮了頁(yè)面的體積，能減少下載時(shí)間和降低網(wǎng)絡(luò)負(fù)載。

2.4 Ajax技術(shù)

Ajax技術(shù)使用異步方式進(jìn)行交互，在用戶和服務(wù)器之間引入了中間媒介，改變了過(guò)去“處理-等待-處理”的網(wǎng)頁(yè)交互模式。目前的Chrome、Safari、Edge、Firefox瀏覽器都有安裝Ajax引擎。Ajax引擎使用Javascript語(yǔ)言，在頁(yè)面的隱藏框架中，負(fù)責(zé)轉(zhuǎn)發(fā)用戶界面和服務(wù)器之間的內(nèi)容，改變頁(yè)面中的部分元素，從而實(shí)現(xiàn)頁(yè)面和服務(wù)器之間的交互。Ajax技術(shù)的關(guān)鍵在于實(shí)現(xiàn)了網(wǎng)頁(yè)和服務(wù)器之間的異步交互，獨(dú)立于用戶和Web服務(wù)器之間。開(kāi)發(fā)中，使用Javascript就可以調(diào)用Ajax引擎向服務(wù)器發(fā)送請(qǐng)求，直接對(duì)頁(yè)面進(jìn)行數(shù)據(jù)編輯、頁(yè)面導(dǎo)航、驗(yàn)證等操作，而不是需要重新進(jìn)行頁(yè)面的加載。使用Ajax技術(shù)在豐富頁(yè)面功能的同時(shí)，也降低了由于訪問(wèn)所帶來(lái)的帶寬占用，通過(guò)改變部分頁(yè)面內(nèi)容，可以實(shí)現(xiàn)按需請(qǐng)求數(shù)據(jù)，降低了冗余訪問(wèn)和請(qǐng)求，并且有效降低了頁(yè)面訪問(wèn)對(duì)服務(wù)器造成的負(fù)擔(dān)，利用客戶端的閑置能力，也可以有效減輕帶寬和節(jié)約運(yùn)營(yíng)成本。

2.5 DOM

Ajax使用DOM實(shí)現(xiàn)動(dòng)態(tài)顯示和實(shí)現(xiàn)瀏覽器交互，使用DOM技術(shù)可以給Web端提供標(biāo)準(zhǔn)的API，將XML文件轉(zhuǎn)化為節(jié)點(diǎn)構(gòu)成的樹(shù)形數(shù)據(jù)結(jié)構(gòu)，提升頁(yè)面的交互性，給異步訪問(wèn)帶來(lái)?xiàng)l件。Web開(kāi)發(fā)人員也能利用DOM進(jìn)行對(duì)象的設(shè)計(jì)，明確各種對(duì)象之間的關(guān)系。

3 目前Web前端開(kāi)發(fā)技術(shù)運(yùn)用情況

3.1 網(wǎng)頁(yè)內(nèi)容和網(wǎng)頁(yè)跳轉(zhuǎn)問(wèn)題

在使用Web技術(shù)過(guò)程中，網(wǎng)頁(yè)需要根據(jù)瀏覽者的不同需求跳轉(zhuǎn)網(wǎng)頁(yè)內(nèi)容，滿足瀏覽者的使用需求，因此技術(shù)人員需要優(yōu)化跳轉(zhuǎn)方式和跳轉(zhuǎn)技術(shù)。很多網(wǎng)頁(yè)相應(yīng)速度比較慢就來(lái)自于網(wǎng)頁(yè)跳轉(zhuǎn)優(yōu)化比較差，前端和后端的信息交互存在明顯的問(wèn)題。很多開(kāi)發(fā)者在進(jìn)行前端開(kāi)發(fā)時(shí)，往往都僅僅考慮前端內(nèi)容的呈現(xiàn)，對(duì)前端和后端的交互分析相對(duì)較少，導(dǎo)致網(wǎng)頁(yè)很難快速給客戶呈現(xiàn)內(nèi)容。因此，Web前端開(kāi)發(fā)時(shí)，仍然需要進(jìn)一步進(jìn)行深度優(yōu)化，滿足游戲、購(gòu)物、娛樂(lè)、瀏覽信息等方面的體驗(yàn)。

3.2 國(guó)內(nèi)與國(guó)外前端開(kāi)發(fā)技術(shù)的差距明顯

目前國(guó)內(nèi)的前端開(kāi)發(fā)大多使用Vue、React這類國(guó)外框架，自主研究的框架應(yīng)用較少，所以很難控制Web前端開(kāi)發(fā)標(biāo)準(zhǔn)，會(huì)一定程度上影響開(kāi)發(fā)工作的效率。很多網(wǎng)站、應(yīng)用也開(kāi)始輕視對(duì)Web端的設(shè)計(jì)，極為看重在APP端的功能開(kāi)發(fā)，導(dǎo)致一些網(wǎng)頁(yè)存在功能的缺陷，根本無(wú)法滿足用戶的使用需求。一些網(wǎng)頁(yè)仍然使用相對(duì)落后的Flash技術(shù)，不僅運(yùn)行速度較慢，而且會(huì)占據(jù)大量資源，并且在技術(shù)革新的情況下并不具備拓展性。

3.3 瀏覽器的結(jié)構(gòu)限制以及二連接受限

使用HTTP協(xié)議的內(nèi)容可以實(shí)現(xiàn)服務(wù)器端到客戶端之間的連接和約束，單一客戶端和服務(wù)器所建立起的長(zhǎng)期連接也要保持兩個(gè)月內(nèi)的穩(wěn)定。使用該技術(shù)可以防止絕大多數(shù)服務(wù)器出現(xiàn)堵塞的情況，但是由于用戶瀏覽網(wǎng)頁(yè)過(guò)程中，可能會(huì)觸發(fā)多個(gè)異步的XML請(qǐng)求或者Javascript請(qǐng)求，會(huì)造成服務(wù)器的負(fù)載過(guò)高，造成后續(xù)的HTTP請(qǐng)求堵塞。建立Web前端瀏覽器/服務(wù)器結(jié)構(gòu)限值時(shí)，需要在用戶使用瀏覽器并在瀏覽器的地址欄中輸入網(wǎng)址獲取網(wǎng)頁(yè)。整個(gè)過(guò)程存在著地質(zhì)輸入、IP地質(zhì)解析、請(qǐng)求命令等多個(gè)環(huán)節(jié)，結(jié)構(gòu)優(yōu)化的工作中有很多難點(diǎn)。

4 未來(lái)Web前端開(kāi)發(fā)技術(shù)的優(yōu)化

4.1 云端技術(shù)

Web前端開(kāi)發(fā)是一種計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)優(yōu)化工作，因此目前出現(xiàn)了很多優(yōu)化前端開(kāi)發(fā)工作的工具，方便開(kāi)發(fā)人員減少bug和提升軟件的運(yùn)行效率，云端技術(shù)也成為了開(kāi)發(fā)的重要技術(shù)之一。云端技術(shù)是近年來(lái)新興的計(jì)算機(jī)軟件技術(shù)，該技術(shù)以云技術(shù)作為基礎(chǔ)，互聯(lián)網(wǎng)作為傳播媒介，能夠?qū)嫶蟮拈_(kāi)發(fā)項(xiàng)目進(jìn)行拆解和分發(fā)管理，分解出多個(gè)計(jì)算單元，然后通過(guò)服務(wù)器群組組成的系統(tǒng)處理運(yùn)算單元，之后將處理結(jié)果返回給用戶。使用這一技術(shù)，可以充分利用云端計(jì)算機(jī)優(yōu)秀的性能，而且處理結(jié)果也能實(shí)時(shí)返回本地。除運(yùn)算之外，云端計(jì)算技術(shù)可以給Web前端開(kāi)發(fā)提供云端備份、編程建模、統(tǒng)計(jì)圖等滿足開(kāi)發(fā)者的個(gè)性化需求，更方便團(tuán)隊(duì)不同成員共同完成項(xiàng)目開(kāi)發(fā)，優(yōu)化了開(kāi)發(fā)工作和項(xiàng)目管理。也提升了前端開(kāi)發(fā)的信息分析和處理效率，完善了對(duì)人員的管理。

在云技術(shù)快速發(fā)展的背景下，目前出現(xiàn)了云原生技術(shù)，可以是新云平臺(tái)的彈性和分布式優(yōu)勢(shì)。該技術(shù)使用開(kāi)源堆棧進(jìn)行容器化，根據(jù)微服務(wù)架構(gòu)保證平臺(tái)的靈活性和可維護(hù)性，使用敏捷方法開(kāi)發(fā)，能夠持續(xù)進(jìn)行迭代和實(shí)現(xiàn)運(yùn)維自動(dòng)化，而且使用云平臺(tái)設(shè)施，可以實(shí)現(xiàn)應(yīng)用的彈性伸縮和動(dòng)態(tài)角度，從而保證資源的優(yōu)化利用率。云原生模式下，應(yīng)用的搭建速度更快，可以輕松部署，并且應(yīng)用可以按照需求伸縮，比傳統(tǒng)的Web框架、IT模式效率更高。

4.2 虛擬化技術(shù)

虛擬化技術(shù)是一種資源管理技術(shù)，通過(guò)將服務(wù)器系統(tǒng)進(jìn)行虛擬化，讓服務(wù)器在沒(méi)有硬件升級(jí)換代的情況下，不受外部制約地運(yùn)行兩個(gè)或者兩個(gè)以上不同應(yīng)用或者操作系統(tǒng)，比如虛擬機(jī)技術(shù)就是虛擬化技術(shù)的重要應(yīng)用。虛擬化技術(shù)在Web前端開(kāi)發(fā)中使用可以優(yōu)化系統(tǒng)應(yīng)用，提升Web前端開(kāi)發(fā)和服務(wù)器系統(tǒng)之間的整合，提升對(duì)資源的高效利用，更好地實(shí)現(xiàn)不同硬件之間對(duì)項(xiàng)目開(kāi)發(fā)的協(xié)同化處理，解決運(yùn)行障礙，同時(shí)滿足服務(wù)器優(yōu)化和協(xié)同運(yùn)作的要求，提升了前端開(kāi)發(fā)對(duì)服務(wù)器的優(yōu)化和軟件的利用效率?？傮w而言，虛擬化技術(shù)具有較強(qiáng)的整合能力，在前端開(kāi)發(fā)中發(fā)揮了十分重要的作用，尤其強(qiáng)化了Web應(yīng)用的多線程能力，而且能保證服務(wù)器的使用效率。

4.3 身份鑒別技術(shù)

前端開(kāi)發(fā)不僅要實(shí)現(xiàn)簡(jiǎn)單的交互功能，也要滿足安全功能的要求，確保網(wǎng)頁(yè)的安全性，因此信息安全同樣是重要的前端開(kāi)發(fā)工作內(nèi)容之一。信息安全技術(shù)要保證信息的真實(shí)性、保密性、完整性，以及系統(tǒng)的安全性，可以延伸出計(jì)算機(jī)安全操作系統(tǒng)、各種安全機(jī)制、安全協(xié)議等等，所保護(hù)的對(duì)象也包括軟件、硬件、數(shù)據(jù)、信息、服務(wù)器等等，以避免數(shù)據(jù)被人員篡改，防止關(guān)鍵的數(shù)據(jù)信息出現(xiàn)泄露和破壞，確保服務(wù)器可以穩(wěn)定運(yùn)行。在所有安全技術(shù)中，最重要的是身份驗(yàn)證技術(shù)，通過(guò)身份驗(yàn)證能篩選合法訪問(wèn)信息，根據(jù)用戶的級(jí)別控制用戶權(quán)限，監(jiān)控用戶的訪問(wèn)，發(fā)現(xiàn)用戶的行為異常，從而保證系統(tǒng)的安全。

身份鑒別技術(shù)會(huì)在前端頁(yè)面中設(shè)計(jì)身份驗(yàn)證程序，程序可以和后端數(shù)據(jù)庫(kù)進(jìn)行交互，實(shí)現(xiàn)身份信息的識(shí)別，對(duì)通過(guò)信息識(shí)別的人員開(kāi)發(fā)一定的數(shù)據(jù)和功能。常用的技術(shù)包括兩類，一種是端口計(jì)算機(jī)訪問(wèn)鑒別，另一種是計(jì)算機(jī)訪問(wèn)鑒別，兩種鑒別方式使用HTTP打開(kāi)對(duì)應(yīng)的鏈接，使用網(wǎng)絡(luò)連接賬號(hào)和密碼登錄，確定賬號(hào)和密碼匹配之后才能進(jìn)行訪問(wèn)，由于訪問(wèn)過(guò)程中存在著身份信息被捕捉的風(fēng)險(xiǎn)，因此所有的賬號(hào)密碼都會(huì)儲(chǔ)存在服務(wù)器的隱藏文件中，避免賬號(hào)密碼被盜取。在軟件工程中利用身份鑒別技術(shù)能夠保障用戶的賬戶安全，有效防止賬戶中重要信息被竊取，更能防止不法分子通過(guò)前端進(jìn)入服務(wù)器獲取內(nèi)部資料，在保證保密性的同時(shí)，也能確保數(shù)據(jù)傳遞效果和提升安全性。

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

5.1 頁(yè)面設(shè)計(jì)優(yōu)化

網(wǎng)站的網(wǎng)頁(yè)設(shè)計(jì)好壞是決定流量的重要因素之一，優(yōu)秀的網(wǎng)頁(yè)設(shè)計(jì)由于能抓住用戶的眼球，能讓客戶更傾向于實(shí)驗(yàn)網(wǎng)頁(yè)中的各種功能，十分有利于網(wǎng)站、應(yīng)用、服務(wù)的推廣。但是很多網(wǎng)頁(yè)目前并沒(méi)有進(jìn)行合理的UI設(shè)計(jì)和UX設(shè)計(jì)，很難滿足用戶體驗(yàn)的要求，使得一些人進(jìn)入頁(yè)面后，也缺少瀏覽、使用頁(yè)面的欲望。出現(xiàn)這種情況的原因，在于很多前端設(shè)計(jì)人員、開(kāi)發(fā)人員并沒(méi)有形成全新的思想理念，對(duì)信息排列、功能設(shè)置等關(guān)鍵設(shè)計(jì)內(nèi)容都使用陳舊的方法進(jìn)行。還有些網(wǎng)頁(yè)雖然設(shè)計(jì)效果較好，但是沒(méi)有合理進(jìn)行網(wǎng)頁(yè)功能的排布，導(dǎo)致用戶很難找到網(wǎng)頁(yè)中的關(guān)鍵功能。為此，設(shè)計(jì)人員應(yīng)該提升UI和UX設(shè)計(jì)的重視，尤其在UX設(shè)計(jì)上，必須充分考慮用戶的使用習(xí)慣；UI設(shè)計(jì)中，應(yīng)針對(duì)目標(biāo)用戶的視覺(jué)習(xí)慣進(jìn)行分析，合理進(jìn)行頁(yè)面配色和字體設(shè)計(jì)，確保頁(yè)面設(shè)計(jì)所具有的美觀性和實(shí)用性。最后，設(shè)計(jì)過(guò)程中也要盡可能精簡(jiǎn)頁(yè)面，通過(guò)簡(jiǎn)化頁(yè)面的內(nèi)容提升各種信息的直觀性，方便客戶快速找到想要的內(nèi)容。

5.2 合理控制文件大小

文件的大小會(huì)影響Web端的加載速度，導(dǎo)致網(wǎng)頁(yè)的性能降低，互動(dòng)性變差，影響網(wǎng)頁(yè)瀏覽者、使用者的體驗(yàn)。如果控件文件過(guò)多或者過(guò)大，網(wǎng)頁(yè)響應(yīng)會(huì)占據(jù)大量的資源，網(wǎng)頁(yè)延遲會(huì)增加，也會(huì)影響用戶的電腦、手機(jī)、平板的運(yùn)行速度，造成網(wǎng)頁(yè)的直接崩潰，或者出現(xiàn)網(wǎng)頁(yè)不能響應(yīng)的情況。為此，應(yīng)該加強(qiáng)對(duì)網(wǎng)頁(yè)文件大小的控制，提升網(wǎng)頁(yè)用戶體驗(yàn)。不僅需要壓縮JavaScript文件，也要優(yōu)化算法和代碼，降低文件的內(nèi)存使用量；對(duì)HTML文件，應(yīng)該去除多余的HTML標(biāo)簽；對(duì)CSS文件需要提升文件的邏輯性和降低文件大小提升運(yùn)行速度，減少內(nèi)聯(lián)樣式的使用，確保所有文件都可以快速加載，將部分頁(yè)面的內(nèi)容快速向用戶呈現(xiàn)，解決過(guò)去頁(yè)面加載時(shí)間過(guò)長(zhǎng)以及存在空白的問(wèn)題?？刂莆募笮〔粌H可以優(yōu)化用戶的體驗(yàn)，更能降低服務(wù)器對(duì)帶寬的需求，減少對(duì)網(wǎng)絡(luò)的占用。

5.3 合理控制HTTP請(qǐng)求

HTTP請(qǐng)求過(guò)多是目前很多服務(wù)器負(fù)載過(guò)高的關(guān)鍵原因，包括使用協(xié)議、資源請(qǐng)求方法、資源標(biāo)識(shí)符、首行消息、DNS尋址等等都屬于HTTP請(qǐng)求。減少HTTP請(qǐng)求可以提升網(wǎng)頁(yè)的反應(yīng)速度，降低服務(wù)器負(fù)載，以及降低訪問(wèn)對(duì)貸款的使用。目前常見(jiàn)的方式包括合并文件、內(nèi)聯(lián)文件等方法，通過(guò)單次完成大量信息的傳輸，方便減少訪問(wèn)次數(shù)。另一方面，也可以利用瀏覽器緩存，這樣在訪問(wèn)一個(gè)URL時(shí)，可以直接將瀏覽器緩存中的內(nèi)容呈現(xiàn)給用戶，降低網(wǎng)絡(luò)負(fù)載，也能提升頁(yè)面的加載速度。

5.4 降低HTTP錯(cuò)誤

HTTP錯(cuò)誤會(huì)導(dǎo)致頁(yè)面不能響應(yīng)，并且造成頁(yè)面崩潰，將會(huì)嚴(yán)重降低用戶的體驗(yàn)。很多HTTP錯(cuò)誤來(lái)自于頁(yè)面不能被找到，或者頁(yè)面的HTTP請(qǐng)求不能被及時(shí)處理，由于消耗時(shí)間過(guò)長(zhǎng)，導(dǎo)致HTTP錯(cuò)誤出現(xiàn)。降低HTTP錯(cuò)誤的思路也在于減少無(wú)用響應(yīng)，并且合理設(shè)置Web服務(wù)器和頁(yè)面之間的連接，達(dá)到控制HTTP錯(cuò)誤的目的。

6 結(jié)語(yǔ)

在技術(shù)快速發(fā)展的背景下，人們的生活方式、獲取信息的方式已經(jīng)完全改變，數(shù)字化時(shí)代讓人們更加依賴網(wǎng)絡(luò)解決生活和工作需求，因此面向用戶、呈現(xiàn)功能和內(nèi)容的Web前端開(kāi)發(fā)，就成為了解決人們生活、工作需求的關(guān)鍵。對(duì)于前端開(kāi)發(fā)人員，應(yīng)該加強(qiáng)對(duì)重要前端技術(shù)、全新開(kāi)發(fā)標(biāo)準(zhǔn)的學(xué)習(xí)，適應(yīng)技術(shù)發(fā)展，豐富前端功能。企業(yè)也應(yīng)擁抱新技術(shù)，充分利用云原生等技術(shù)優(yōu)化開(kāi)發(fā)模式，提升開(kāi)發(fā)效率和改善用戶體驗(yàn)，保證Web前端頁(yè)面的性能，減少不必要的資源占用，滿足人們對(duì)完善Web界面的需求。