移動客戶端中的H5技術運用

陳平

摘? ?要：作為HTML的第5代應用技術，H5以其強大的兼容性，大大降低了數(shù)字化產品的開發(fā)與運營的成本，所搭載的站點不僅可以兼容PC端，而且可以應用在移動智能端，甚至于各個系統(tǒng)平臺，用來制作一切數(shù)字化產品。企業(yè)以及創(chuàng)業(yè)者在H5強大兼容性下，迎來了發(fā)展的無限可能。文章對移動客戶端數(shù)字化產品開發(fā)的3種方式進行了介紹，結合現(xiàn)狀對H5開發(fā)的移動客戶端優(yōu)點與缺點進行了分析。

關鍵詞：移動客戶端;H5技術;數(shù)字化產品;開發(fā)方式

移動互聯(lián)網(wǎng)迅速普及，H5技術已經從原來笨重的、固定的PC端，迅速拓展到移動客戶端，一方面打破了原來硬件與寬帶的局限，另一方面對移動數(shù)字化產品在應用上的各方面性能進行了極大的優(yōu)化。

1? ? 移動客戶端數(shù)字化產品開發(fā)的方式

H5開發(fā)方式、原生開發(fā)方式以及混合開發(fā)方式，是目前基于數(shù)字化應用的移動客戶端開發(fā)最多的3種方式。相對于其他兩種，Native原生開發(fā)技術更加成熟，也是現(xiàn)階段采用最多的開發(fā)模式。開發(fā)技術混合則是最新的原生開發(fā)，在開發(fā)的過程中，Google引入了SDK技術，在H5和JS技術聯(lián)合開發(fā)的基礎上，集成了WebAPP，而且在很多場景中會用到混合開發(fā)技術。三者混合開發(fā)架構可以有效彌補各自的短板，且具有較強的綜合性。在開發(fā)中，混合語言由混合開發(fā)主要開發(fā)，原生語言由原生開發(fā)，網(wǎng)頁語言形式則由H5主要負責開發(fā)。綜合來看，H5網(wǎng)頁語言在設備訪問能力上，相對較差，另外兩種表現(xiàn)較好;原生語言在跨平臺上性能較差。因此，需要靈活選擇開發(fā)方案，而要想選擇最經濟、效率最高的方案就要考慮用戶的體驗以及不同的需求[1-2]。

2? ? H5開發(fā)的移動客戶端優(yōu)點

從實現(xiàn)基礎上來看，WebApp是基于HTML5+JS+CSS3的技術實現(xiàn)的，所以有必要深入了解HTML5的優(yōu)勢與特點，在開發(fā)瀏覽器為基礎的微網(wǎng)站時，可以更加合理地結合原生APP與WebAPP的優(yōu)勢，更好地開發(fā)與設計。

（1）存儲功能可以用cookie的升級版來當作H5的WebAPI技術，它有著更好的彈性，在把存儲的數(shù)據(jù)寫在本地的瀏覽器ROM時也可以通過更好的方式進行，不再受到存儲數(shù)據(jù)大小的限制。在瀏覽器被關閉后，在本地照舊會保留相應的數(shù)據(jù)，并且數(shù)據(jù)在瀏覽器被再次打開時不需要進行重復的網(wǎng)絡請求就可以重新恢復，網(wǎng)絡流量的消耗也因此得以降低。與此同時，WebStorage也被引入到H5之中。WebStorage在H5之中的作用相當于H4中的cookie，能夠幫助瀏覽器存儲緩存數(shù)據(jù)，是H5中很重要的一部分，且功能十分強大。4 K為H4中cookie的上限，而H5的WebAPI技術則要強大很多，極大地增加了存儲能力，本地存儲基本在5 M左右。與此同時，Web存儲也被分為Session存儲和本地存儲兩類。

（2）GPS定位功能，對于各種互聯(lián)網(wǎng)應用來說是基礎。各種商城以及O2O的應用特別是專門的導航應用，在沒有定位的情況下都不能很好地運作。GPS定位功能在移動APP中是必備的，然而在網(wǎng)頁中卻不能進行很好的運用。GPS定位功能現(xiàn)階段已經被加入到H5技術之中，從而極大地拓展了H5的應用范圍。

（3）繪圖功能，在以往的網(wǎng)頁中一般是不具備的，但是繪圖對于移動客戶端而言卻是一個很基礎的功能。各種圖片、圖表在沒有繪圖功能的情況下就不能進行美化。H5在進行圖片的操作時使用了Canvas的API，也加入了對3D和2D方面的支持，但主要是支持常規(guī)的功能，如縮放、旋轉和圖片的移動等[3-4]。

（4）提升了互動能力，剛開始的網(wǎng)頁互動能力較弱，動態(tài)效果也很少，都屬于靜態(tài)網(wǎng)頁。各種動畫效果以及大量組件的變形、移動被加入到H5中，極大地提升了H5的交互能力。

（5）降低了開發(fā)和維護成本，在對移動客戶端進行開發(fā)時使用原生的代價常常是很大的。由于原生的代碼通用能力低代碼使得開發(fā)成本很高，不同的團隊需要維護和開發(fā)不同的平臺。然而，H5沒有多個團隊、安裝升級包等方面的問題，既加快了開發(fā)的速度，也降低了開發(fā)成本。

（6）在布局網(wǎng)頁時常常選擇CSS，通過CSS的嵌入，在網(wǎng)頁中可以實現(xiàn)頁面布局的美觀、合理。CSS3版本可以被應用在H5之中。H5的視覺借助于這個版本會收到更好的效果，且可以更好地展現(xiàn)動畫效果以及字體的嵌入。

3? ? H5開發(fā)的移動客戶端缺點

雖然H5的APP開發(fā)既可以加快開發(fā)的速度，又可以降低開發(fā)成本，然而，相對于原生而言，還存在以下方面的問題。

3.1? 動畫方面

在動畫方面，H5技術盡管也做了不少嘗試，然而相對于原生的移動客戶端開發(fā)而言，H5的動畫種類有些單一。H5如果想要增強效果，就要得不償失地在性能方面大打折扣。特別是對于部分性能較低的低端機來說，H5消耗內存和顯卡，機器的硬件本身又差，從而導致卡頓等各種問題出現(xiàn)。

3.2? 網(wǎng)絡數(shù)據(jù)的獲取

在獲取網(wǎng)絡數(shù)據(jù)方面，現(xiàn)階段大多數(shù)都是采用WebAPI方式。通過服務器，網(wǎng)絡數(shù)據(jù)可以異步獲取，避免造成過程中頁面卡頓的狀況。H5獲取網(wǎng)絡數(shù)據(jù)的階段，需要涉及DOM的操作，同時填充到表單中。從性能消耗的角度來看，H5會造成頻繁的DOM操作、會導致OOM等問題，這一問題目前仍沒有得到有效的解決。在加載的過程中，H5必須從網(wǎng)絡完全獲取到數(shù)據(jù)后，界面顯示之前必須確認所有數(shù)據(jù)沒有問題，進而導致長時間白屏，用戶在體驗效果上會很差。相比而言原生的移動客戶端會好很多，不僅效果迅速，而且僅需幾組不同的數(shù)據(jù)就可以顯示界面，在體驗效果上非常好。對比二者的用戶體驗，就可以明白訪問頻繁的大型APP中，若是不能解決加載界面的問題，純粹的H5技術開發(fā)會出現(xiàn)很多問題[5-6]。

3.3? 頁面切換場景

頁面的切換在原生的移動客戶端開發(fā)過程中，會有很多種不同的方式，比如模擬加載、預加載一定量的數(shù)據(jù)以及設計不同的動畫場景等[1-2]。為了可以獲得同樣友好的體驗效果，H5技術必須解決內存問題，減少頁面大量的緩存，管理生命周期，自動釋放數(shù)據(jù)，避免內存居高不下而導致的應用卡頓。在這個問題的處理上，某些大公司設計了自己的加載生命周期以及緩存技術，但是效果仍然不好[7]。

3.4? 客戶端開發(fā)版本

在H5技術大量使用到移動客戶端開發(fā)的過程中，一些開發(fā)人員認為如蘋果系統(tǒng)和安卓系統(tǒng)等移動客戶端往往會有很多的開發(fā)版本，需要不同的開發(fā)團隊、開發(fā)人員，來滿足不同移動客戶端的需求，導致開發(fā)成本大大增加，而H5技術可以降低這方面的需求[3-5]。在不考慮性能的情況下，比如公司初期，可以通過一定程度的兼容，來解決問題，滿足不同的需求，但是后期的問題會越來越明顯，當用戶越來越多，導致體驗越來越差，所有的問題集中而來，就不得不推倒重新來過，這也是原生開發(fā)可以繼續(xù)存在的意義。

3.5? 性能差距

在性能差距上，H5技術和原生開發(fā)差距相當大。在5 000元的高端機或者200元的終端機的使用上差距不明顯，但是千元機在使用時，會發(fā)現(xiàn)原生開發(fā)非常順暢，而H5卻頻繁卡頓。主要原因就是很多“坑”在原生開發(fā)、研究的十多年過程中，被開發(fā)人員“填上”，相比于H5技術在移動客戶端的開發(fā)使用上時間很短，很多問題得不到解決[6-7]。

3.6? 效果體驗

在網(wǎng)絡流量慢的時候會有巨大的差距：原生開發(fā)在網(wǎng)頁打開的時候，會緩存已有的數(shù)據(jù)并存在本地;H5表現(xiàn)相對較差，在頁面的打開階段，會看到一個進度條不斷地向前走，若是網(wǎng)速慢就會一直卡著打不開，就像打開一個網(wǎng)頁一樣。

4? ? 結語

技術不斷發(fā)展進步，在這個過程中會衍生出很多新的技術和應用，H5技術在剛剛起步的小型企業(yè)的移動客戶端優(yōu)勢會非常明顯，既可以快速實現(xiàn)功能，又可以極大地節(jié)約成本、節(jié)省時間。但是由于用戶群體數(shù)量龐大，之前的優(yōu)勢會轉化成劣勢，功能需求在用戶數(shù)量增大的同時，不斷地變多、變復雜，由此導致的性能問題就會越來越突出，這樣就得采用混合開發(fā)的模式，向原生開發(fā)靠攏。ReactNative作為Facebook提出的新的開發(fā)框架，通過JS語言進行原生開發(fā)，在性能上效果遠遠好于H5，但是稍差于原生。

[參考文獻]

[1]胡伯俊，杜哲璇.H5頁面用戶特征及行為習慣研究[J].中國有線電視，2019（7）：786-788.

[2]陳東方，王魁祎.移動客戶端中的H5技術運用[J].電腦知識與技術，2019（17）：219-220，222.

[3]劉喬輝.基于H5技術在移動客戶端中的應用分析[J].湖北農機化，2019（9）：46.

[4]王志.基于H5技術的移動融媒新聞創(chuàng)新[J].新聞記者，2019（3）：10-12.

[5]吳楠.淺析新一代信息技術下H5游戲廣告[J].廣東蠶業(yè)，2019（2）：141-142.

[6]劉孟涵，劉旭.基于H5技術的景泰藍傳統(tǒng)工藝展示系統(tǒng)的設計與實現(xiàn)[J].中國信息技術教育，2019（1）：83-85.

[7]唐毅.H5技術在移動客戶端中的應用研究[J].電腦知識與技術，2017（11）：183-184，195.