Web前端開發(fā)技術及其優(yōu)化研究

黃偉

摘要：目前，我國網(wǎng)絡技術突飛猛進，Web前端開發(fā)技術已經(jīng)十分成熟，但因為現(xiàn)代網(wǎng)絡傳輸數(shù)據(jù)量增大、惡意攻擊頻繁等問題，用戶在使用網(wǎng)頁時的安全性、體驗感不斷下降，說明當前Web前端開發(fā)技術需要得到優(yōu)化。在這一基ze_h，本文首先分析了現(xiàn)代Web前端開發(fā)技術體系，對其中各技術語言的應用性能進行了闡述，其次針對現(xiàn)代Web前端開發(fā)的問題，提出了相關的優(yōu)化建議。

關鍵詞：Web前端開發(fā);技術;優(yōu)化

中圖分類號：TP311 文獻標識碼：A

文章編號：1009-3044（2019）30-0257-02

早期我國對于Web前端開發(fā)的認知主要在于“網(wǎng)頁制作”，即通過語言變成制作一些靜態(tài)功能，將其放置于Web當中供用戶使用，因此Web作為用戶使用網(wǎng)絡的基本窗口，其靜態(tài)的變化培養(yǎng)了當時網(wǎng)絡用戶瀏覽網(wǎng)頁的習慣。但隨著技術發(fā)展，我國現(xiàn)已步入了Web2.0時代，在這一基礎上網(wǎng)絡用戶的網(wǎng)頁瀏覽需求變得多元化，早期Web前端開發(fā)防滲方式并不滿足當下要求，說明其有優(yōu)化的必要。

1Web前端開發(fā)技術體系

我國Web前端開發(fā)技術中最常用的技術有三，即HTML、CSS、JavaScript，三者分別代表了一種開發(fā)語言，在代碼質(zhì)量要求、程式等方面有較大差別，但在實際開發(fā)工作當中，因為不同開發(fā)要求，也可以將三者聯(lián)合使用，說明它們相互之間也存在聯(lián)系。下文將對HTML、CSS、JavaScript在開發(fā)工作中的常見技術應用進行分析。

（1）HTML

HTML是XHTML/HTML5的統(tǒng)稱，但三者之間也存在差異，其中HTML（文本標記語言）是一種網(wǎng)頁創(chuàng)建當中的標準標記語言，其并不屬于編程語言，主要功能在于支撐網(wǎng)頁瀏覽器運作，且由瀏覽器對該語言進行翻譯，以供用戶進行閱讀;XHTMU可擴展標識語言）源自W3C的最新的HTML標準，是Web功能變成語言，在Web開發(fā)當中起到實現(xiàn)功能構件的作用;HTML5f超文本標記語言）是HTML基礎上的新一代標準標記語言，在Web當中同樣值得重視。應用上現(xiàn)代Web前端開發(fā)，主要采用HT-ML5語言，此舉可以使開發(fā)結(jié)構更加清晰，較于傳統(tǒng)HTML語言在當前用戶需求基礎上更具適用性，可以將內(nèi)容與展示相互分割，使得網(wǎng)頁結(jié)構更加簡潔，有利于管理工作。此外，在現(xiàn)代移動設備普及條件下，HTML并不能實現(xiàn)移動設備Web開發(fā)，而HTML5可以避免這一點，更適合如Web操作系統(tǒng)一類的RIA應用的前端開發(fā)。對比之下說明HTML5更具優(yōu)勢，同時XHTML通用于HTML、HTML5之間，這一點并沒有改變，利用XHTML進行開發(fā)，可以使Web兼容各類瀏覽器要求，例如pc端瀏覽器、手機端瀏覽器、PAD。

（2）CSS

CSS（層疊樣式表）是一種可以展示HTML、XML中某個應用或者子集的文件樣式計算機語言，在Web前端開發(fā)當中起到了至關重要的作用，主要具有控制網(wǎng)頁樣式、允許網(wǎng)頁內(nèi)容與對應樣式信息分割的功能。利用CSS進行前端開發(fā)，可以使瀏覽器的運作速度、維護難度得到優(yōu)化，原理上CSS可以有效簡化傳統(tǒng)網(wǎng)頁格式代碼，使得代碼被層疊，但代碼的外部樣式表依舊被保存在瀏覽器緩存當中，這一表現(xiàn)使得Web下載顯示速度得到優(yōu)化、上傳代碼的數(shù)量減少，說明網(wǎng)頁瀏覽速度增強，同時在協(xié)議特點上，CSS具有易于使用和修改的特點，即接組合HT-ML元素當中的style屬性，CSS可以將樣式定義保存在該屬性當中，或者將其歸于header部分，這些表現(xiàn)均可以直接被HTML頁面引用，使得用戶可以對此進行逐項修改，易于管理嘲。

（3）JavaScript

JavaScript是一種直譯式腳本語言，具有多種形態(tài)，例如動態(tài)類型、弱類型、基于原型，該語言的翻譯器設計取自瀏覽器的引擎，因此也被稱為JavaScript引擎。作為開發(fā)語言的一種，Ja-vaScfipt在開發(fā)初期就應用于Wen前端開發(fā)升級當中，其可以在傳統(tǒng)HTML靜態(tài)網(wǎng)頁基礎上實現(xiàn)動態(tài)功能，在這一條件下Ja-vaScript依舊廣泛應用于現(xiàn)代Web前端開發(fā)當中，例如當前流行的Ajax就是在JavaScript基礎上實現(xiàn)的。

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

關于Web前端開發(fā)優(yōu)化的方向有很多，本文主要列舉了六大方向，即HTML、CSS、JavaScript優(yōu)化;減少HTTP的錯誤;DNS查詢優(yōu)化;減少HTTP請求;文件夾大小控制;底部script。

2.1HTML、CSS、JavaScript優(yōu)化

HTML、CSS、JavaScript作為Web開發(fā)的主要技術語言，在優(yōu)化中自然是首當其沖的目標，各技術語言的優(yōu)化內(nèi)容見下文。

（1）HTML優(yōu)化

在開發(fā)過程當中，如果將HTML作為主要組織語言，結(jié)合現(xiàn)代要求就要從五個角度上實現(xiàn)目的，即實現(xiàn)HTML的語義化，可簡化、清晰代碼;減少DOM節(jié)點，可提高頁面渲染速度;減少頁面重繪，以防頁面縮放問題;避免空屬性、標簽不閉合的現(xiàn)象，以防措施解析;針對Web頁頭、頁尾要放置jS。

（2）CSS優(yōu)化

針對CSS要從四個角度上來實現(xiàn)優(yōu)化目的，即為了簡化開發(fā)流程，在開發(fā)過程當中要盡可能減少CSSExpressions、CSSE-Fulter的使用;盡可能使用CSS縮寫，同時刪除重復代碼、減少總體代碼量;要減少CSS符層級的使用;如果開發(fā)中使用了CLASS、ID，則要將YAG標簽刪除。

（3）JavaScript優(yōu)化

因為JavaScript的動態(tài)性特征，使其在前端開發(fā)當中具有多功能表現(xiàn)，所以優(yōu)化面積較大，具體方向有五項：要盡可能降低全局變量次數(shù);盡可能減少重繪、回流次數(shù);盡可能減少針對目標、作用域鏈的查找次數(shù);盡可能不使用with、eval、function，尤其是eval、function最好不使用;如果存在重復的JS要刪除。

2.2減少HTTP的錯誤

HTTP的錯誤現(xiàn)象是網(wǎng)頁瀏覽當中常見的問題，但此類問題如果反復出現(xiàn)，就會導致用戶瀏覽體驗下降，因此在優(yōu)化當中，要盡可能地降低HTTP的錯誤概率。在錯誤原因上，一般當用戶輸入關鍵詞進行搜索時，Web無法從搜索頁面中找到對應的文件，隨之在長時間搜索下就會出現(xiàn)頁面崩潰等錯誤表現(xiàn)，而要消除這一問題，主要需加強Web服務器與頁面之間的聯(lián)系，提升服務器對頁面搜索請求的相應速度，由此可以在一定程度上避免HTTP錯誤。

2.3 DNS查詢優(yōu)化

DNS查詢是用戶進行網(wǎng)絡瀏覽時最常使用到的功能，在功能運作條件下，DNS的查詢耗時會對網(wǎng)頁響應時間造成一定影響，但一般情況下只會出現(xiàn)毫秒級別的延時，而隨著用戶長期使用，使得瀏覽器內(nèi)保存的緩存增多，會導致DNS查詢時間變慢，相應網(wǎng)頁響應速度也會下降，嚴重時還會導致網(wǎng)頁內(nèi)部分顯示無法被正常加載，因此有必要對DNS查詢進行優(yōu)化。在方法上，因為DNS查詢延時影響的根本原因在于緩存增多，所以在Web前端開發(fā)過程當中，建議先控制網(wǎng)頁重復DNS查詢的次數(shù)，同時設計緩存自動清理功能，由此實現(xiàn)優(yōu)化目的。

2.4減少HTTP請求

HTTP請求具有多種表現(xiàn)形式，例如使用協(xié)議、對資源的請求、資源識別符號等，這些請求往往同時存在，會導致網(wǎng)頁運作流程延長，連帶運作速度下降，原因在于每當一個HTTP請求產(chǎn)生，其內(nèi)部都存在大量數(shù)據(jù)，在運作過程當中每項數(shù)據(jù)都必然侵占一定的網(wǎng)絡資源，介于網(wǎng)絡資源的有限性，當數(shù)據(jù)量大于瀏覽器的網(wǎng)絡資源，就會導致卡頓、崩潰等問題，因此在優(yōu)化目標下，應當通過減少HTTP請求的方式來進行前端開發(fā)工作。具體方法上，本文建議采用合并文件、CSSSprites以及內(nèi)聯(lián)圖像等方法，這些方法可以有效壓縮、打包HTTP請求，表層上減少HTTP請求，內(nèi)層請求則被分化為另一隊列，本質(zhì)上并不會造成請求數(shù)量減少。

2.5文件夾大小控制

文件夾是Web數(shù)據(jù)傳輸中常見的數(shù)據(jù)打包形式，其內(nèi)部文件數(shù)據(jù)越多，就代表自身“體積”越大，這一點符合正常邏輯，但在現(xiàn)代海量數(shù)據(jù)傳輸條件下，用戶在使用文件夾進行數(shù)據(jù)傳輸時，常常會遇到文件夾過大的現(xiàn)象，嚴重影響了傳輸速度、文件加載速度，同時對網(wǎng)頁響應速度、交互性能也有影響，嚴重時也會導致網(wǎng)頁崩潰，因此在前端開發(fā)工作中應當對文件夾大小進行合理控制。在方法上，本文建議采用文件夾壓縮方法來實現(xiàn)，即現(xiàn)代壓縮包技術十分成熟，可以將大量文件夾封裝于一個“包裹”當中，大大減小了文件夾的大小，同時還可以對文件夾內(nèi)多余的標簽進行刪除，采用CSS文件、代碼處理方法來實現(xiàn)優(yōu)化目的。

2.6底部script

在本質(zhì)上，script可以被定義為一種同時具有批量處理文件、純文本保護功能的腳本程序，是一種功能上的延伸，在正常條件下script可以對網(wǎng)頁中的請求進行分析實現(xiàn)邏輯分支，但在邏輯分支過程當中，會產(chǎn)生很多“詢問”流程，同時分支過多也會影響網(wǎng)頁性能，因此在早期Web開發(fā)過程當中，因為開發(fā)人員通常不會刻意將script放置于底部，所以導致script腳本經(jīng)常對網(wǎng)頁下載頁面加載進行阻礙，長時間無法得到響應，說明有必要對這種script開發(fā)方式進行優(yōu)化。而將script放置于底部，可以很好地化解這一問題，有效提升頁面組件下載速度、減少頁面加載時間，提高網(wǎng)站前端性能。

3結(jié)束語

本文主要對Web前端開發(fā)技術及其優(yōu)化進行了研究工作，通過研究了解到當前Web前端開發(fā)技術主要包括HTML、CSS、JavaScript，三者之間存在一定差異，但在開發(fā)過程當中也可以聯(lián)合應用;就現(xiàn)代Web前端開發(fā)方式來看，其還存在很多不足點，因此提出了六項優(yōu)化策略，主要對各項策略對應的問題、影響以及策略應用方法進行了分析，通過各項策略的應用可以有效提高開發(fā)質(zhì)量。