管芳笛 張浩

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

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

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

1引言

HTML5是標(biāo)準(zhǔn)通用語(yǔ)言中的超文本標(biāo)記語(yǔ)言也是網(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ù)顯示了它的獨(dú)特優(yōu)勢(shì)。HTML5對(duì)移動(dòng)設(shè)備有很強(qiáng)的提供圖像、語(yǔ)音、視頻及圖像功能，這有可能提高跨平臺(tái)的使用、代碼再利用率和開(kāi)發(fā)效率，HTML5技術(shù)具有廣闊的發(fā)展前景，在中國(guó)移動(dòng)網(wǎng)絡(luò)的應(yīng)用中十分普及。

2特性優(yōu)勢(shì)

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

2.2 WebNotifications。它提供了兩種桌面提示方法：文本和HTML.與傳統(tǒng)的通知方式相比，通過(guò)網(wǎng)絡(luò)提示畫(huà)面顯示的桌面提示可能不在當(dāng)前頁(yè)面的活動(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ò)用戶通過(guò)調(diào)用當(dāng)前地理位置的API可以及時(shí)看到提供更好的服務(wù)。

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

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

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

3性能優(yōu)化

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

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

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

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

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

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

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

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

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

4結(jié)語(yǔ)

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

參考文獻(xiàn)：

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

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