Web前端開發技術特點及優化分析

趙洋

摘 要：文章在描述和介紹Web前端開發技術的內容和特點的基礎上，對Web前端開發的核心技術和應用中存在的問題進行分析，最后對如何優化Web前端開發性能的策略進行了描述，以期為相關從業者更好地掌握這門技術并進行創新之路給出一些思路和意見。

關鍵詞：Web前端開發技術;HTML;CSS;JavaScript;性能優化

0? ? 引言

2005年以后，網絡進入2.0時代，各類Web應用大量涌現，網頁編程技術也發生了巨大的變化，網頁呈現的不再是簡單的圖文信息，富媒體的使用使網頁內容變得更加生動有趣，如今，依靠H5，CSS3，JS等技術制作的動態網頁不但做工優良，畫質精美，性能進一步得到優化，與用戶之間交互體驗也在穩步提升[1];Web技術的日新月異得益于用戶的廣泛和技術的不斷進步，前端技術不再局限于桌面瀏覽器網站的開發，更能夠應用于移動端和APP等關鍵領域，潛力無限。

1? ? Web前端開發的核心技術

1.1? HTML語言

HTML是構成Web世界的一磚一瓦。它定義了網頁內容的含義和結構。作為一種簡單標記性語言，其通過不同的標記和屬性來定義網頁中的各種元素，如文本，圖片、動畫、聲音、表格、超鏈接等，以實現頁面上不同的操作和視覺效果，從而描繪出整個頁面的結構和內容[2]。因此，掌握HTML是學會Web網站開發的基礎和前提。

如今，HTML已經發展到HTML5，作為一種事實上的Web標準，在核心內容上，HTML5語言中的標記更多，語義更明確，功能也更加強大，特別適合移動端Web開發，截至目前，許多優秀的前端框架、Web網站、混合型APP的開發都依賴于H5的應用。

1.2? CSS技術

CSS（層疊樣式表）是一種專門用來修飾網頁外觀的語言[3]。在Web開發中，CSS可以幫助實現頁面表現與結構相分離的開發模式，它能夠控制整個站點所有網頁的樣式和布局效果，使用CSS不僅可以靜態地美化修飾頁面，還可以配合各類腳本語言動態地對網頁中的各元素進行美化。

CSS目前已經發展至CSS3，它在原有的基礎上加入了許多新的效果，如border-radius（圓角），box-shadow（陰影），transform（變換），transition（過渡），animation（動畫）等，在CSS3出現之前，網頁開發人員需要添加許多HTML的標記、屬性和JS代碼來實現一個動態效果，現在通過CSS3一行代碼就行了，簡單易學，效果十分出眾。

1.3 Java Script

JavaScript是一種具有函數優先的輕量級，解釋性的腳本語言。主要是用以向HTML中添加交互語言，它可以直接嵌入到網頁頁面，支持跨瀏覽器、跨平臺運行（如Windows，Linux，Mac，Android，iOS等）[4]。作為一種腳本語言，JavaScript不需要如同C，C++一樣通過編譯器先編譯再執行，它可以邊執行邊解釋，然后顯示在瀏覽器上。JavaScript是Web前端開發者必學的三種語言之一，HTML定義網頁的內容和結構、CSS定義網頁的布局和外觀，JS則定義網頁的動態行為。

JavaScript很早就被Netscape公司提交給ECMA制定為標準，稱之為ECMAScript，目前已經更新至ECMAScript 6，ECMAScript 6以其跨平臺、容易上手等的優勢被廣泛應用于Web前端開發之中。同時，有些重要功能（如AJAX異步發送）由于必須依賴JavaScript在客戶端進行支持而使JS成為Web的一種核心技術。

2? ? Web前端開發技術的特點

2.1? HTML5語法規范性不強

HTML5語法規范雖然比較嚴謹，語義也比較明確，界限分明，但在實際使用中卻比較靈活，這得益于瀏覽器對HTML高超的理解能力，有時即使沒有按照規范書寫HTML代碼，多數瀏覽器依然能夠正確地解析代碼，顯示應有的元素效果。

2.2? CSS3中模塊清晰

使用CSS3進行網頁美化時就會發現，CSS語法規則相對簡單，易于上手，模塊劃分非常清晰，技術成熟穩定，顯示效果俱佳。

2.3 學習使用的門檻比較低

在Web開發過程中，開發人員無須具備高深的程序語言功底和算法基礎，即使無法完全掌握JS，仍可以直接使用HTML語言進行Web開發，其只需在編寫的文本前加入一些Tags就可以實現網頁設計和制作，因此可以說Web前端開發技術是一種非程序員技術。

3? ? Web前端開發技術存在的問題

3.1 Web網絡擁堵時的HTTP請求問題

一般在網頁和服務器發生鏈接時，會產生較多的時間消耗，而當網絡發生擁堵時，這種情況會更加明顯。而一個正常HTTP請求的流程，如在瀏覽器中輸入"www.xxxxxx.com”并按下回車，瀏覽器與這個URL指向的服務器建立連接，然后瀏覽器才能向服務器發送請求信息，服務器在接收到請求的信息后再返回相應的信息，瀏覽器接收到來自服務器的應答信息后，對這些數據解釋執行，事實上，這個過程雖然看起來簡單，但由于請求的網頁文件中有很多圖片、CSS、JS甚至音樂等信息，網頁瀏覽器將會頻繁的與服務器建立連接、釋放連接，這必定會造成資源的浪費，且每個HTTP請求都會對服務器和瀏覽器產生性能負擔。

3.2 瀏覽器兼容問題

相關調查數據顯示，IE、360、火狐等瀏覽器是目前常見的瀏覽器廠商，但由于Web前端開發存在的兼容問題，導致一種瀏覽器并不能滿足用戶的日常工作和生活需求，用戶需下載多個瀏覽器才能滿足使用需求，此外目前前端技術編寫出的腳本語言即使是同樣的代碼，不同瀏覽器執行出來的效果也有較大區別，這將嚴重影響用戶的使用體驗。

3.3? Repaint和Reflow理解混淆

Repaint（重繪）就是在一個元素的外觀被改變，但沒有改變布局（寬高）的情況下發生的，如改變visibility、outline、背景色等等。Reflow（重排）則是DOM的變化影響到了元素的幾何屬性（寬和高），瀏覽器重新計算元素的幾何屬性，這個過程會使渲染樹中受到影響的部分失效，瀏覽器會驗證DOM樹上的所有其他結點的visibility屬性，這也是Reflow低效的原因。如：改變窗口大小、改變文字大小、內容的改變、瀏覽器窗口變化，style屬性的改變等等。如果Reflow的過于頻繁，CPU使用率就會上漲，所以前端也就有必要分清Repaint和Reflow的相關區別。

4? ? Web前端開發技術優化措施

（1）面對HTTP請求包含信息過多嚴重影響網頁運行速率的問題，一般建議網頁開發人員盡量減少網頁的HTTP請求次數，一般來說，Web設計人員為了達到較好的網頁呈現效果，會添加一些繁雜的操作步驟，但實際上，為了避免網絡運行超負載運行，需要加強對設計人員的培訓力度，通過轉變設計思路，在確保設計功能的同時化繁為簡，確保網頁功能齊全、操作流暢。

（2）優化HTML頁面設計，HTML頁面反映了一個瀏覽器的特點，HTML技術的有效應用不但可以使用戶獲得較好的視覺體驗，而且能夠保證網頁較為完整的基本性能。在優化HTHL頁面時需要綜合考慮多個影響作用，不但要實現單一頁面呈現內容的較高質量，而且要確保所有頁面內容在整體上的高度統一，最大限度地提升頁面在設計與內容上的吸引力，避免用戶出現興趣索然的感覺，降低對網頁使用的黏性。

（3）網頁開發人員一般會產生Repaint和Reflow理解混淆問題，因為通過設置style屬性改變結點樣式的話，每設置一次都會導致一次reflow，所以最好通過設置class的方式;有動畫效果的元素，它的position屬性應當設為fixed或absolute，這樣不會影響其他元素的布局;如果功能需求上不能設置position為fixed或absolute，那么就無法權衡速度的平滑性。總之，因為Reflow有時確實不可避免，所以只能盡可能限制Reflow的影響范圍。

5? ? 結語

目前正處于一個信息化時代，互聯網網頁的開發和運行也在不斷創新，人們對于互聯網上呈現的信息和知識的依賴性也越來越強，因此，相關開發人員要加強對Web前端開發技術的學習理解和優化，對于一個Web開發人員來說，需要在全面了解JavaScript，HTML，CSS等設計語言的基礎上，切實掌握其應用特性，進而才能有效地應對當前Web前端開發遇到的問題，才能不斷創新和優化Web前端開發技術。

[參考文獻]

[1]李昊哲.HTML5在Web前端開發中的應用探析[J].網絡安全技術與應用，2020（10）：64-65.

[2]李祿源，邢方方.計算機網站前端開發技術與優化措施分析研究[J].電子測試，2020（20）：136-137.

[3]俞敏.Web前端開發技術在運維管理系統中的應用研究[J].信息與電腦（理論版），2020（19）：145-148.

[4]曹艷琴.基于網站制作的Web前端開發技術與優化策略[J].電腦知識與技術，2020（23）：59-60，67.

（編輯 何 琳）