Web前端開發(fā)技術(shù)和優(yōu)化措施研究

金日

（延邊職業(yè)技術(shù)學(xué)院 吉林省延吉市 1331000）

1 Web前端開發(fā)技術(shù)體系介紹與闡述

1.1 HTML

XHTML/HTML5 統(tǒng)稱為HTML，HTML 并不是編程語言，而是標(biāo)準(zhǔn)標(biāo)記語言之一，瀏覽器通過翻譯前端開發(fā)人員編寫的HTLML 語言，展示為方便用戶閱讀的信息內(nèi)容，從而使瀏覽器網(wǎng)頁正常工作，這也是HTML 標(biāo)記語言的主要功能。XHTM 和HTML 存在一定的區(qū)別，它以W3C 作為標(biāo)準(zhǔn)，對(duì)HTML 進(jìn)行了更新，具有通用性和穿插性。HTML5 是最新且使用最廣泛的標(biāo)準(zhǔn)標(biāo)記語言，可以滿足如現(xiàn)代移動(dòng)設(shè)備前端開發(fā)、RYIA 應(yīng)用前端開發(fā)等多變的發(fā)展需求，與HTML 相比，HTML5 具有更大的普適性，成為了目前最主要的前端開發(fā)應(yīng)用語言。

1.2 CSS

CSS 是文件樣式的計(jì)算機(jī)語言，也是層疊樣式表的一種，可以通過HTML 等標(biāo)記語言中的子集或應(yīng)用，以用戶友好的樣式展示到前端界面上。它可完成的功能非常多，可以對(duì)網(wǎng)頁內(nèi)容進(jìn)行分塊處理，層次分明的樣式邏輯降低了網(wǎng)頁設(shè)計(jì)的難度，同時(shí)簡化了網(wǎng)頁的格式代碼，使開發(fā)人員能夠以簡單的代碼，控制網(wǎng)頁具體樣式，其中，具體樣式又包括花式字體等細(xì)分需求，非常適合進(jìn)行個(gè)性化Web 前端網(wǎng)頁開發(fā)。CSS 以其精簡強(qiáng)大的優(yōu)勢(shì)，在提升瀏覽器運(yùn)行速度，提高前端開發(fā)工作效率，降低后期網(wǎng)頁維護(hù)難度等方面發(fā)揮著非常重要的作用。

1.2.1 CSS 相關(guān)兼容性處理方案

作為未來網(wǎng)頁前端發(fā)展必然會(huì)使用的計(jì)算機(jī)語言之一，CSS 在我國卻沒有得到大規(guī)模的瀏覽器軟件支持。比如在我國網(wǎng)絡(luò)用戶經(jīng)常使用的瀏覽器中，可以做到有效支持CSS 全部或大部分自定義屬性的很少。這樣的現(xiàn)狀，與CSS 普及范圍越來越廣的趨勢(shì)成為矛盾，會(huì)影響用戶的瀏覽體驗(yàn)。針對(duì)這樣的沖突，在當(dāng)前的Web開發(fā)環(huán)節(jié)中，應(yīng)該盡快完成 CSS 的自定義屬性樣式相關(guān)兼容處理。比如，可以通過@supports 軟件對(duì)用戶現(xiàn)在所使用的瀏覽器進(jìn)行檢測(cè)，檢測(cè)重點(diǎn)是該瀏覽器是否可以與開發(fā)中所使用的CSS 相關(guān)屬性樣式合理兼容，并通過對(duì)不兼容地方的處理，修改CSS 屬性樣式代碼，直到處理完畢，成功滿足用戶的前端網(wǎng)頁要求為止。

1.2.2 CSS 技術(shù)應(yīng)用過程

在前端開發(fā)過程中，應(yīng)該以用戶的使用體驗(yàn)作為開發(fā)是否合格的標(biāo)準(zhǔn)，而CSS 豐富的屬性樣式，使得它可以完成用戶個(gè)性化的需求，能夠根據(jù)用戶的要求隨時(shí)做出多樣化的改變。同時(shí)，在瀏覽器客戶端的支持下，CSS 可以使用高度的自定義屬性，將數(shù)據(jù)加載存儲(chǔ)在本地。此處以通過修改CSS 代碼，調(diào)整網(wǎng)絡(luò)頁面顏色為實(shí)例，第一步需要設(shè)定自定義屬性-fontColor，-fontColor 的值就是目前前端背景字體的顏色。第二步，等到前端網(wǎng)頁加載完成，瀏覽器無需等待時(shí)間，可以直接拿到儲(chǔ)存在本地的，關(guān)于字體以及背景顏色的數(shù)據(jù)，在設(shè)定-fontColor 參數(shù)的時(shí)候，只要沒有其他數(shù)據(jù)項(xiàng)出現(xiàn)，網(wǎng)頁都會(huì)選擇初始值。第三步，開發(fā)人員需要建立顏色選擇框，避免亂碼，設(shè)置為txt 模式，添加相應(yīng)的指令，將需要修改的顏色儲(chǔ)存到本地，這時(shí)-fontColor 的原值會(huì)被刷新，后期修改維護(hù)完成。修改頁面顏色只是一個(gè)簡單的功能，在實(shí)際CSS 開發(fā)中，還有更多的功能可以被實(shí)現(xiàn)、修改與維護(hù)，可以滿足更多的用戶需求。在未來的CSS 開發(fā)過程中，本地存儲(chǔ)或許會(huì)成為數(shù)據(jù)存儲(chǔ)的限制，當(dāng)與云計(jì)算結(jié)合在一起之后，CSS 可以利用不同的數(shù)據(jù)樣式，展現(xiàn)豐富多變的主題，減小對(duì)網(wǎng)站性能與存儲(chǔ)地點(diǎn)的依賴，發(fā)揮更大的作用。

1.3 DOM 技術(shù)

與CSS 技術(shù)一樣，虛擬DOM 技術(shù)在網(wǎng)頁前端開發(fā)中同樣具有不可小覷的地位。DOM 技術(shù)的主要優(yōu)勢(shì)是大大增強(qiáng)了頁面的交互性，通過把XML 文件抽象整理為樹形的數(shù)據(jù)結(jié)構(gòu)，數(shù)據(jù)結(jié)構(gòu)都由一個(gè)個(gè)單獨(dú)的小節(jié)點(diǎn)構(gòu)成，可以為前端頁面提供所需的API。由虛擬DOM 的主要功能可以看出，該技術(shù)的核心思想，是把新舊兩種頁面的不同之處剝離出來，并將這種不同在舊的頁面里體現(xiàn)出來，由此可以從以下三個(gè)方面來看待這項(xiàng)技術(shù)。

1.3.1 經(jīng)過 JS 模擬 DOM

相比于建立真實(shí)的DOM 節(jié)點(diǎn)，使用JS 對(duì)象可以以一種成本更低的方式，表示DOM 構(gòu)造的數(shù)據(jù)結(jié)構(gòu)的不同節(jié)點(diǎn)，而且節(jié)點(diǎn)的類型信息、層次關(guān)系與其它基本屬性可以得到有效的保留，而真實(shí)DOM 包含的信息不會(huì)有遺漏，所以這種方法在開發(fā)中的性價(jià)比更高。使用JS 對(duì)象構(gòu)建虛擬DOM 樹的關(guān)鍵技術(shù)流程如下：程序開發(fā)準(zhǔn)備就緒后，獲取需要?jiǎng)?chuàng)建DOM 元素的屬性值、層次關(guān)系等其它屬性，然后創(chuàng)建JS 對(duì)象，創(chuàng)建完畢后需要判斷是否含有子元素，若有則返回獲取到屬性的步驟，如果沒有則創(chuàng)建結(jié)束。

1.3.2 DOM-Diff算法的研究

DOM 樹的數(shù)據(jù)結(jié)構(gòu)在前端網(wǎng)頁開發(fā)過程中不會(huì)受到太大的影響，尤其是跨級(jí)別的DOM 元素，很少會(huì)出現(xiàn)需要移動(dòng)的情況，所以無論頁面是否發(fā)生變更，大部分的層級(jí)結(jié)構(gòu)狀態(tài)基本都會(huì)保持原來的位置固定不變。通過對(duì)DOM-Diff算法進(jìn)行研究分析，可以發(fā)現(xiàn)該算法主要包括兩個(gè)方面的內(nèi)容。

魯花已種植了十幾萬畝高油酸品種的花生。從試種情況看，魯花高油酸花生的油酸含量已達(dá)80%，而且產(chǎn)量也提高了30%以上。2017年9月，魯花嶄新的高油酸花生油已投入生產(chǎn)并銷往市場(chǎng)，因其香味濃郁、營養(yǎng)價(jià)值更高，深受消費(fèi)者青睞。

（1）在某個(gè)單一的節(jié)點(diǎn)被刪除后，該節(jié)點(diǎn)下的子節(jié)點(diǎn)也會(huì)被刪除，而且被刪除的節(jié)點(diǎn)不會(huì)再進(jìn)行差異的比對(duì)，這是建立在不考慮其他可變或不可變的因素，只是對(duì)比DOM 樹形數(shù)據(jù)結(jié)構(gòu)中層級(jí)節(jié)點(diǎn)不同的情況。

（2）如果是對(duì)屬于同一層組的子節(jié)點(diǎn)進(jìn)行增刪查改各項(xiàng)操作，查找每個(gè)節(jié)點(diǎn)各異的Key 值可以成為進(jìn)行定位尋找的方式，在操作完成后可以明確新元素的位置順序并成功恢復(fù)DOM 元素[1]。

1.3.3 實(shí)現(xiàn)DOM 算法的路經(jīng)

在DOM 算法下，每一個(gè)節(jié)點(diǎn)都有自己唯一的用來辨識(shí)身份的Key，由此可以得出以下三種實(shí)現(xiàn)路經(jīng)。

（1）遍歷循環(huán)全部節(jié)點(diǎn)，用Key 判斷是否存在相同的節(jié)點(diǎn)；

（2）遍歷循環(huán)之后會(huì)產(chǎn)生兩種情況，如果沒有發(fā)現(xiàn)相同的節(jié)點(diǎn)，那可以直接移動(dòng)；如果使用Key 尋找到了完全相同的節(jié)點(diǎn)，需要首先獲取舊節(jié)點(diǎn)的位置，然后獲取已經(jīng)被訪問過的節(jié)點(diǎn)的位置，兩個(gè)位置進(jìn)行比對(duì)，進(jìn)行移動(dòng)節(jié)點(diǎn)的操作；

1.3.4 將差異補(bǔ)丁應(yīng)用到舊頁面上

對(duì)DOM 元素做增刪改查等操作后，通過差異補(bǔ)丁的更新，核對(duì)補(bǔ)丁是否應(yīng)用完畢，網(wǎng)頁頁面刷新，完成修改。而在舊頁面上應(yīng)用差異補(bǔ)丁，作為DOM 技術(shù)中最重要的環(huán)節(jié)之一，可以根據(jù)系統(tǒng)遍歷后得到的不同差異類型進(jìn)行修改與調(diào)整，調(diào)整后可以成功應(yīng)用在網(wǎng)頁頁面上。

2 Web前端的優(yōu)化思路

2.1 針對(duì)HTTP請(qǐng)求的優(yōu)化

網(wǎng)頁承擔(dān)著網(wǎng)站與用戶信息交流互動(dòng)的作用，能成功實(shí)現(xiàn)信息交互的功能，也是實(shí)現(xiàn)網(wǎng)頁價(jià)值的重要體現(xiàn)。因此，如何根據(jù)不同的網(wǎng)頁類型與形式，為用戶動(dòng)態(tài)地提供獲取信息數(shù)據(jù)的不同方式，也應(yīng)該成為開發(fā)人員考慮的問題。無論數(shù)據(jù)的體量如何發(fā)展與增加，網(wǎng)頁始終需要找到可以實(shí)現(xiàn)最大化吸引用戶的途徑，過濾有效信息，屏蔽無效信息，都是網(wǎng)頁在設(shè)計(jì)開發(fā)時(shí)需要做到的任務(wù)。為了保持網(wǎng)頁的最大吸引力，需要對(duì)復(fù)雜的HTTP 請(qǐng)求進(jìn)行優(yōu)化處理。

2.2 針對(duì)文件的優(yōu)化

文件規(guī)模的優(yōu)化是一個(gè)更為復(fù)雜的問題，CSS 文件可以實(shí)現(xiàn)文件優(yōu)化的功能，但并不能做到徹底的優(yōu)化，豐富多樣的文件包含著復(fù)雜的信息，如果不能做到徹底優(yōu)化，會(huì)非常影響用戶的體驗(yàn)，可以利用為HTML加標(biāo)簽、代碼壓縮、服務(wù)器壓縮、Cookie優(yōu)化等方法，將重復(fù)不合理內(nèi)容隱去，有效控制文件規(guī)模。

2.3 針對(duì)內(nèi)容的優(yōu)化

在前端的網(wǎng)頁制作中，內(nèi)容的優(yōu)化同樣重要，精簡的內(nèi)容可以讓網(wǎng)頁減少出錯(cuò)概率，后期運(yùn)行更加穩(wěn)定，需要重點(diǎn)關(guān)注。在內(nèi)容優(yōu)化方面，網(wǎng)站運(yùn)行過程中的重定向問題無法完全避免，但仍然需要想辦法盡量減少這種情況的發(fā)生。除了盡量避免重定向，還有實(shí)現(xiàn)Ajax 的可緩存、使用懶加載等方法實(shí)現(xiàn)內(nèi)容的優(yōu)化[3]。

2.4 使用內(nèi)容分發(fā)網(wǎng)絡(luò)（CDN）

使用內(nèi)容分發(fā)網(wǎng)絡(luò)的好處，是可以減少浪費(fèi)資源的現(xiàn)象，使用戶下載數(shù)據(jù)和信息的速度大大加快。因?yàn)闉g覽器緩存數(shù)據(jù)資源的方式是根據(jù)域來進(jìn)行判斷是否有相同的域，如果域不同，哪怕資源相同也要重復(fù)下載造成本地空間和網(wǎng)絡(luò)貸款的浪費(fèi)。因此，CDN 可以使用以下幾種方式來運(yùn)用在前端的性能優(yōu)化。

（1）和用戶距離較近的CDN 節(jié)點(diǎn)負(fù)責(zé)獲取緩存的靜態(tài)資源；

（2）當(dāng)用戶根據(jù)所需的不同資源獲取不同的CDN 節(jié)點(diǎn)時(shí)，判斷緩存資源是否可用的工作由CDN 進(jìn)行，由此用戶可直接獲取對(duì)應(yīng)資源，大大提高效率。

3 總結(jié)

作為網(wǎng)絡(luò)的發(fā)展窗口，Web 始終能直觀地代表用戶的瀏覽習(xí)慣，這又促使網(wǎng)絡(luò)技術(shù)必須不斷更新發(fā)展，才能滿足多方面多方向的需求。同時(shí)，初期的Web 開發(fā)滲透方式盡管在早期可以很好地完成任務(wù)，但在網(wǎng)絡(luò)技術(shù)高速發(fā)展的今天，已經(jīng)明顯地顯示出了不足之處，需要更新的技術(shù)解決更多的問題。盡管當(dāng)前互聯(lián)網(wǎng)的發(fā)展趨勢(shì)突飛猛進(jìn)，新技術(shù)層出不窮，但前端網(wǎng)頁的設(shè)計(jì)開發(fā)作為與用戶直接溝通的橋梁，承擔(dān)著非常重要的作用，Web 前端開發(fā)在網(wǎng)頁制造中也是非常值得關(guān)注的。隨著技術(shù)的推廣與用戶新需求的不斷增多，舊技術(shù)的不足開始逐漸顯現(xiàn)出來，技術(shù)開發(fā)人員應(yīng)該隨時(shí)關(guān)注技術(shù)前沿，針對(duì)不同客戶的差異化需求，選取最適合的技術(shù)開發(fā)方式，解決緊要信息傳輸加載慢，后臺(tái)數(shù)據(jù)庫響應(yīng)時(shí)間長等問題，優(yōu)化網(wǎng)頁前端質(zhì)量，提升開發(fā)質(zhì)量與用戶瀏覽體驗(yàn)感。