趙洋

摘 要：文章在描述和介紹Web前端開發(fā)技術(shù)的內(nèi)容和特點的基礎(chǔ)上，對Web前端開發(fā)的核心技術(shù)和應(yīng)用中存在的問題進(jìn)行分析，最后對如何優(yōu)化Web前端開發(fā)性能的策略進(jìn)行了描述，以期為相關(guān)從業(yè)者更好地掌握這門技術(shù)并進(jìn)行創(chuàng)新之路給出一些思路和意見。

關(guān)鍵詞：Web前端開發(fā)技術(shù);HTML;CSS;JavaScript;性能優(yōu)化

0? ? 引言

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

1? ? Web前端開發(fā)的核心技術(shù)

1.1? HTML語言

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

如今，HTML已經(jīng)發(fā)展到HTML5，作為一種事實上的Web標(biāo)準(zhǔn)，在核心內(nèi)容上，HTML5語言中的標(biāo)記更多，語義更明確，功能也更加強(qiáng)大，特別適合移動端Web開發(fā)，截至目前，許多優(yōu)秀的前端框架、Web網(wǎng)站、混合型APP的開發(fā)都依賴于H5的應(yīng)用。

1.2? CSS技術(shù)

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

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

1.3 Java Script

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

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

2? ? Web前端開發(fā)技術(shù)的特點

2.1? HTML5語法規(guī)范性不強(qiáng)

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

2.2? CSS3中模塊清晰

使用CSS3進(jìn)行網(wǎng)頁美化時就會發(fā)現(xiàn)，CSS語法規(guī)則相對簡單，易于上手，模塊劃分非常清晰，技術(shù)成熟穩(wěn)定，顯示效果俱佳。

2.3 學(xué)習(xí)使用的門檻比較低

在Web開發(fā)過程中，開發(fā)人員無須具備高深的程序語言功底和算法基礎(chǔ)，即使無法完全掌握J(rèn)S，仍可以直接使用HTML語言進(jìn)行Web開發(fā)，其只需在編寫的文本前加入一些Tags就可以實現(xiàn)網(wǎng)頁設(shè)計和制作，因此可以說Web前端開發(fā)技術(shù)是一種非程序員技術(shù)。

3? ? Web前端開發(fā)技術(shù)存在的問題

3.1 Web網(wǎng)絡(luò)擁堵時的HTTP請求問題

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

3.2 瀏覽器兼容問題

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

3.3? Repaint和Reflow理解混淆

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

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

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

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

（3）網(wǎng)頁開發(fā)人員一般會產(chǎn)生Repaint和Reflow理解混淆問題，因為通過設(shè)置style屬性改變結(jié)點樣式的話，每設(shè)置一次都會導(dǎo)致一次reflow，所以最好通過設(shè)置class的方式;有動畫效果的元素，它的position屬性應(yīng)當(dāng)設(shè)為fixed或absolute，這樣不會影響其他元素的布局;如果功能需求上不能設(shè)置position為fixed或absolute，那么就無法權(quán)衡速度的平滑性?？傊驗镽eflow有時確實不可避免，所以只能盡可能限制Reflow的影響范圍。

5? ? 結(jié)語

目前正處于一個信息化時代，互聯(lián)網(wǎng)網(wǎng)頁的開發(fā)和運(yùn)行也在不斷創(chuàng)新，人們對于互聯(lián)網(wǎng)上呈現(xiàn)的信息和知識的依賴性也越來越強(qiáng)，因此，相關(guān)開發(fā)人員要加強(qiáng)對Web前端開發(fā)技術(shù)的學(xué)習(xí)理解和優(yōu)化，對于一個Web開發(fā)人員來說，需要在全面了解JavaScript，HTML，CSS等設(shè)計語言的基礎(chǔ)上，切實掌握其應(yīng)用特性，進(jìn)而才能有效地應(yīng)對當(dāng)前Web前端開發(fā)遇到的問題，才能不斷創(chuàng)新和優(yōu)化Web前端開發(fā)技術(shù)。

[參考文獻(xiàn)]

[1]李昊哲.HTML5在Web前端開發(fā)中的應(yīng)用探析[J].網(wǎng)絡(luò)安全技術(shù)與應(yīng)用，2020（10）：64-65.

[2]李祿源，邢方方.計算機(jī)網(wǎng)站前端開發(fā)技術(shù)與優(yōu)化措施分析研究[J].電子測試，2020（20）：136-137.

[3]俞敏.Web前端開發(fā)技術(shù)在運(yùn)維管理系統(tǒng)中的應(yīng)用研究[J].信息與電腦（理論版），2020（19）：145-148.

[4]曹艷琴.基于網(wǎng)站制作的Web前端開發(fā)技術(shù)與優(yōu)化策略[J].電腦知識與技術(shù)，2020（23）：59-60，67.

（編輯 何 琳）