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

陳平

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

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

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

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

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

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

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

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

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

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

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

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

（6）在布局網頁時常常選擇CSS，通過CSS的嵌入，在網頁中可以實現(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? 網絡數據的獲取

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

3.3? 頁面切換場景

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

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

4? ? 結語

技術不斷發(fā)展進步，在這個過程中會衍生出很多新的技術和應用，H5技術在剛剛起步的小型企業(yè)的移動客戶端優(yōu)勢會非常明顯，既可以快速實現(xiàn)功能，又可以極大地節(jié)約成本、節(jié)省時間。但是由于用戶群體數量龐大，之前的優(yōu)勢會轉化成劣勢，功能需求在用戶數量增大的同時，不斷地變多、變復雜，由此導致的性能問題就會越來越突出，這樣就得采用混合開發(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.