基于移動Web前端開發(fā)HTML5技術(shù)的研究

管芳笛 張浩

摘要：移動互聯(lián)網(wǎng)的快速推廣為移動網(wǎng)絡(luò)傳單的發(fā)展帶來了巨大的商機和發(fā)展前景，在移動網(wǎng)絡(luò)前期的開發(fā)中，HTML5技術(shù)為智能手機用戶提供了更全面的應(yīng)用和體驗，HTML5在移動網(wǎng)絡(luò)傳單中作為一種新的研究技術(shù)，它具有強大的功能，在圖像、語音、影像、動畫和移動終端的互動過程中產(chǎn)生了新的標(biāo)準(zhǔn)，本文通過分析研究，將HTML5的特性優(yōu)勢與性能優(yōu)化論述出來。

關(guān)鍵詞：移動Web前端開發(fā);HTML5;性能優(yōu)化

中圖分類號：TP393文獻(xiàn)標(biāo)識碼：A文章編號：1672-9129（2020）14-0020-01

1引言

HTML5是標(biāo)準(zhǔn)通用語言中的超文本標(biāo)記語言也是網(wǎng)絡(luò)發(fā)展初期的重要技術(shù)，2015年W3C正式發(fā)布了最新的HTML5標(biāo)準(zhǔn)，確定了HTML5在網(wǎng)絡(luò)發(fā)展中的核心位置，HTML5確定了網(wǎng)絡(luò)標(biāo)準(zhǔn)的新標(biāo)簽和使用了新的特性，新的HTML5技術(shù)顯示了它的獨特優(yōu)勢。HTML5對移動設(shè)備有很強的提供圖像、語音、視頻及圖像功能，這有可能提高跨平臺的使用、代碼再利用率和開發(fā)效率，HTML5技術(shù)具有廣闊的發(fā)展前景，在中國移動網(wǎng)絡(luò)的應(yīng)用中十分普及。

2特性優(yōu)勢

2.1 Canvas。Canvas雖然是HTML的新元素，但是可以利用Java腳本實時繪制圖像，支持2D/3D圖像處理，在數(shù)據(jù)可視化中通過canvas實時改變數(shù)據(jù)圖形，建立三維模型從各個角度可以清晰地看到。

2.2 WebNotifications。它提供了兩種桌面提示方法：文本和HTML.與傳統(tǒng)的通知方式相比，通過網(wǎng)絡(luò)提示畫面顯示的桌面提示可能不在當(dāng)前頁面的活動狀態(tài)下，并且可能存在瀏覽器進(jìn)程。

2.3 Geolocation API。Geolocation API不僅提供當(dāng)前設(shè)備的經(jīng)緯度坐標(biāo)，還提供位置坐標(biāo)的精度。應(yīng)用非常方便快捷，網(wǎng)絡(luò)用戶通過調(diào)用當(dāng)前地理位置的API可以及時看到提供更好的服務(wù)。

2.4 Video標(biāo)簽。Video標(biāo)簽可以在沒有插件的情況下播放，播放的視頻可以與網(wǎng)站內(nèi)容互動，結(jié)合Canvas可以改變視頻的所有框架，進(jìn)行動畫，甚至視頻出現(xiàn)時可以正確識別視頻內(nèi)容并截圖。

2.5 Application Cache。Application Cache在瀏覽器緩存中，正確使用可以減少請求數(shù)，通過本地存儲存儲數(shù)據(jù)，并將HTML模板呈現(xiàn)到緩存中，帶來線下應(yīng)用體驗。

2.6表單。搜索窗口、文本輸入等類型的場景可以通過焦點處理、數(shù)據(jù)驗證、與其他頁面元素的相互作用、電子郵件發(fā)送等來大大減少使用者的煩惱，使用多種鍵盤操作方便快捷。

3性能優(yōu)化

3.1加載優(yōu)化。加載階段是要最優(yōu)化的重點，首先，減少HTTP請求數(shù)，減少緩存對服務(wù)器的要求，并將可挖掘的所有資源使用緩存可以節(jié)省加載時間，然后減少資源的大小，加快網(wǎng)頁顯示速度，壓縮HTML、CSS、Java腳本等。使用首頁加載和首頁快速畫面，可以大大提高用戶對畫面速度的感知，因此我們應(yīng)盡最大努力優(yōu)化首頁快速畫面。

根據(jù)需要，為了不影響渲染性能，在用戶需要時候，將第一個畫面的資源和當(dāng)前屏幕資源不使用的資源裝入，在重要資源的顯示中可以大大提高度，降低整體流程。

大型資源頁面（如：游戲）可以使用添加加載的方法。裝入資源會顯示頁面。并在當(dāng)前頁面裝入下一頁的資源并加快速度。因為cookies會影響加載速度。所以可以將cookies減少，靜態(tài)資源域名無法使用cookies，可能會影響加載速度，要正確設(shè)置到服務(wù)器上，最后無法控制的第三方資源會影響屏幕的載荷和顯示，所以第三方資源必須以異步載入。

3.2腳本優(yōu)化。腳本的不當(dāng)處理會阻止頁面加載和實現(xiàn)，因此，CSS必須用在頭上，Java腳本必須用在尾部或異步。為了避免圖片和Ifrrame的空SRC，空SRC將現(xiàn)在的頁面重新裝入，影響速度和效率。

多次調(diào)整大小，圖像多次重置，影響其性能。應(yīng)盡量避免重置圖片大小，不要在圖像上使用dataurl，如果dataurl圖像不使用圖像壓縮算法，要在文件變大和渲染前進(jìn)行解碼，加載速度慢，需要時間。

3.3 CSS優(yōu)化。盡量避免寫在HTML標(biāo)簽中Style，要運行CSS表達(dá)式，必須從CSS樹渲染中跳出，避免使用CSS表達(dá)式。空CSS規(guī)則會增加CSS文件的大小，影響CSS樹的運行，因此需要移除空CSS規(guī)則。正確使用display屬性，display屬性會影響頁面的顯示，所以要合理使用。

Float在渲染過程中產(chǎn)出量大，所以盡量少使用。Web字體減少使用，因為字體需要下載、解釋、重構(gòu)頁面。為了瀏覽器兼容性和性能，0值不要單位，避免使用各種瀏覽器前綴標(biāo)準(zhǔn)化，高級選擇器需要時間，閱讀難度大，也可避免使用。

3.4 JavaScript優(yōu)化。減少重繪，減少回流，每次選擇DOM都會計算緩存。將此值保存為變量。使用活動代理可以避免活動的連接。盡量使用ID選擇器，因為ID選擇機最快。比起點擊，使用觸屏和觸屏。觸屏反應(yīng)太快的話容易引起誤啟動。

3.5渲染優(yōu)化。HTML可以使用查看器加速頁面渲染，DOM節(jié)點太多會影響頁面的渲染，應(yīng)最大限度地減少DOM節(jié)點，使用CSS3動畫。合理使用requestimation框架動畫代替setTimout可以節(jié)省消耗，Touhmove和scroll事件可能會導(dǎo)致多重渲染，使用requestanimation框架監(jiān)聽幀變化，并在準(zhǔn)確的時間內(nèi)進(jìn)行渲染，增加響應(yīng)時間間隔，減少重畫次數(shù)。過度使用可增加手機的耗電量，GPU渲染需要合理使用。

4結(jié)語

HTML5作為web前端開發(fā)的新技術(shù)，本文通過研究實驗，分析可優(yōu)化的地方，將其應(yīng)用于的移動前端開發(fā)，驗證了前端性能優(yōu)化的一些基本原則。

參考文獻(xiàn)：

[1]李桂林，司亞清.淺談Web前端新技術(shù)與性能優(yōu)化[EB/OL].北京：中國科技論文在線[2014-06-20].

[2]孫光懿，賈英霞.WEB前端性能優(yōu)化[J].鄂州大學(xué)學(xué)報，2019（03）：99-101.