Web前端開發技術和優化措施研究

金日

（延邊職業技術學院 吉林省延吉市 1331000）

1 Web前端開發技術體系介紹與闡述

1.1 HTML

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

1.2 CSS

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

1.2.1 CSS 相關兼容性處理方案

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

1.2.2 CSS 技術應用過程

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

1.3 DOM 技術

與CSS 技術一樣，虛擬DOM 技術在網頁前端開發中同樣具有不可小覷的地位。DOM 技術的主要優勢是大大增強了頁面的交互性，通過把XML 文件抽象整理為樹形的數據結構，數據結構都由一個個單獨的小節點構成，可以為前端頁面提供所需的API。由虛擬DOM 的主要功能可以看出，該技術的核心思想，是把新舊兩種頁面的不同之處剝離出來，并將這種不同在舊的頁面里體現出來，由此可以從以下三個方面來看待這項技術。

1.3.1 經過 JS 模擬 DOM

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

1.3.2 DOM-Diff算法的研究

DOM 樹的數據結構在前端網頁開發過程中不會受到太大的影響，尤其是跨級別的DOM 元素，很少會出現需要移動的情況，所以無論頁面是否發生變更，大部分的層級結構狀態基本都會保持原來的位置固定不變。通過對DOM-Diff算法進行研究分析，可以發現該算法主要包括兩個方面的內容。

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

（1）在某個單一的節點被刪除后，該節點下的子節點也會被刪除，而且被刪除的節點不會再進行差異的比對，這是建立在不考慮其他可變或不可變的因素，只是對比DOM 樹形數據結構中層級節點不同的情況。

（2）如果是對屬于同一層組的子節點進行增刪查改各項操作，查找每個節點各異的Key 值可以成為進行定位尋找的方式，在操作完成后可以明確新元素的位置順序并成功恢復DOM 元素[1]。

1.3.3 實現DOM 算法的路經

在DOM 算法下，每一個節點都有自己唯一的用來辨識身份的Key，由此可以得出以下三種實現路經。

（1）遍歷循環全部節點，用Key 判斷是否存在相同的節點；

（2）遍歷循環之后會產生兩種情況，如果沒有發現相同的節點，那可以直接移動；如果使用Key 尋找到了完全相同的節點，需要首先獲取舊節點的位置，然后獲取已經被訪問過的節點的位置，兩個位置進行比對，進行移動節點的操作；

1.3.4 將差異補丁應用到舊頁面上

對DOM 元素做增刪改查等操作后，通過差異補丁的更新，核對補丁是否應用完畢，網頁頁面刷新，完成修改。而在舊頁面上應用差異補丁，作為DOM 技術中最重要的環節之一，可以根據系統遍歷后得到的不同差異類型進行修改與調整，調整后可以成功應用在網頁頁面上。

2 Web前端的優化思路

2.1 針對HTTP請求的優化

網頁承擔著網站與用戶信息交流互動的作用，能成功實現信息交互的功能，也是實現網頁價值的重要體現。因此，如何根據不同的網頁類型與形式，為用戶動態地提供獲取信息數據的不同方式，也應該成為開發人員考慮的問題。無論數據的體量如何發展與增加，網頁始終需要找到可以實現最大化吸引用戶的途徑，過濾有效信息，屏蔽無效信息，都是網頁在設計開發時需要做到的任務。為了保持網頁的最大吸引力，需要對復雜的HTTP 請求進行優化處理。

2.2 針對文件的優化

文件規模的優化是一個更為復雜的問題，CSS 文件可以實現文件優化的功能，但并不能做到徹底的優化，豐富多樣的文件包含著復雜的信息，如果不能做到徹底優化，會非常影響用戶的體驗，可以利用為HTML加標簽、代碼壓縮、服務器壓縮、Cookie優化等方法，將重復不合理內容隱去，有效控制文件規模。

2.3 針對內容的優化

在前端的網頁制作中，內容的優化同樣重要，精簡的內容可以讓網頁減少出錯概率，后期運行更加穩定，需要重點關注。在內容優化方面，網站運行過程中的重定向問題無法完全避免，但仍然需要想辦法盡量減少這種情況的發生。除了盡量避免重定向，還有實現Ajax 的可緩存、使用懶加載等方法實現內容的優化[3]。

2.4 使用內容分發網絡（CDN）

使用內容分發網絡的好處，是可以減少浪費資源的現象，使用戶下載數據和信息的速度大大加快。因為瀏覽器緩存數據資源的方式是根據域來進行判斷是否有相同的域，如果域不同，哪怕資源相同也要重復下載造成本地空間和網絡貸款的浪費。因此，CDN 可以使用以下幾種方式來運用在前端的性能優化。

（1）和用戶距離較近的CDN 節點負責獲取緩存的靜態資源；

（2）當用戶根據所需的不同資源獲取不同的CDN 節點時，判斷緩存資源是否可用的工作由CDN 進行，由此用戶可直接獲取對應資源，大大提高效率。

3 總結

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