H5技術在手機APP客戶端中的應用研究

任立勝

（內蒙古農業大學職業技術學院，呼和浩特 010000）

Web系統開發，歷經原始的JSP+Servlet，過渡至流行的SSH框架（Struts+Spring+Hibernate，其中也包含S1SH到S2SH），但S2SH架構對系統配置要求較高且易出現冗余代碼。開發周期長、平臺適配難、門檻障礙過多、進度過慢、成本過高、開發人員稀缺等成為系統開發過程遇到的一系列困難。本文介紹了一種新的開發模式——HTML5，即H5。該技術支持跨平臺、多標簽特性，僅需將HTML5制作成模板，就可以形成類似NativeAPP的效果。

1 HTML5

網頁文檔中主要的構成語言是HTML，網頁中各顯示部分通過相應的標記符號來標記，事實上，HTML是網頁的本質所在，通過Web技術，可創建功能更加強大的網頁。而H5是下一代的HTML，它以原HTML為基礎，既對Web網頁的表現性能進行了強化，又對本地數據庫等Web應用的功能進行追加，比如離線存儲、地理定位、多線程處理、支持網頁內容編輯、音頻和視頻的直接支持、矢量繪圖、語義化的標簽等。通過HTML5提供的新屬性及元素便于通過搜索引擎進行索引整理，而且對小屏幕裝置和視障人士起到一定的輔助作用。比如將HTML5應用于手機應用前臺，使手機Web頁面的生硬問題得以解決，從而有效增強用戶的體驗。

2 HTML5手機端

用戶較為關注的是手機端，這是整個框架的最外層，其中手機應用采用的主要技術是

HTML5，這種技術可在pc端完成，并在手機獲得應用，通過該技術可實現不同屏幕的寬度進行自動調整布局，從而避免因屏幕不同出現重新開發的問題。此外，一些全新表單作為HTML5新輸入對象，基本涵蓋Email地址、日期、URL等，不過其他的對象引入了對非拉丁字符的支持。在微數據植入HTML5中，Web呈現出更為簡單的語意處理，總之，系統開發人員可通過相關結構的改進，打造出更加干凈且便于管理的網頁。

3 手機APP客戶端應用H5技術的優點

html5+js+css是webAPP的實現基礎，不過，webAPP的應用仍然是以瀏覽器的微網站開發為基礎。所以，開發人員需對html5的優勢進行深入了解，這樣采用APP與webAPP相結合的方式，對APP進行開發與設計。

第一，H5的WEBAPI技術其實是cookie的升級版，在cookie存儲的數據，不再受到時間的限制，可采用更好的方式將數據保存至本地瀏覽器的ROM中，從而使數據在關閉瀏覽器后自動保存，再次打開時仍可快速恢復，避免數據流量的損耗。

第二，時下多數互聯網應用已經將GPS定位作為必備功能，一些商城、O2O應用甚至開發專門的導航應用等。尤其在移動APP中，定位功能是必備的，不過網頁中較難實現，如今，將這一功能加入到H5技術中，大大提升了此功能的應用能力，使H5的應用范圍得到一定程度的拓展。

第三，繪圖功能：移動客戶端不同于以往的網頁，網頁中缺少繪圖功能，而移動端引入了繪圖功能，使得圖片及圖標得到美化，欣賞價值得以提升。將Canvas的API引入到H5中，以此進行圖片操作，可實現圖片的移動、旋轉及縮放等常規功能，另外，支持同3D和2D。

4 手機APP客戶端應用H5技術的缺點

H5技術在手機APP客戶端的應用有幾個方面的問題：

第一，動畫方面：盡管H5技術在動畫方面進行了探究，不過這種動畫對資源消耗較大且種類較少，相比原生的移動客戶端，動畫種類存在單一性。

第二，獲取網絡數據。在H5環境下，對網絡數據進行獲取，然后將數據填入表單，DOM在其中發揮著十分重要的作用，但這種操作通常會損耗大量性能，甚至該操作太過頻繁易出現OOM等問題，顯然這是H5的短板所在。此外，采用H5獲取數據，需經獲取—加載—頁面顯示這幾個過程，界面完整顯示需所有數據完備才能正常，易造成長時間白屏的現象，降低了人們的體驗感。

第三，頁面切換場景：自行管理生命周期，這是H5數據管理特性，一旦大量頁面緩存的數據占據大部分內存，到了一定程度內存進行自動釋放，就會導致H5經過頻繁的操作，內存越積越多，應用遭遇卡頓，造成極差的體驗效果。

第四，性能差距：原生開發與H5技術在性能方面差距明顯，比如同樣價值5000元的高端機器，差距并不明顯，而如果使用千元低端機，原生開發的應用表現順暢，體驗效果好，而H5開發的移動客戶端則出現卡頓，甚至無法正常操作。

第五，網絡流量慢時，效果體驗差距明顯：采用H5技術進行開發的移動客戶端，網頁打開后會出現一個向前緩沖的進度條，如同pc端的網頁緩沖，一旦出現網速過慢，將直接導致網頁無法打開。

5 結束語

總之，在移動客戶端應用H5技術，優劣并存，不過對于起步階段的小型企業來說，較為適用H5技術進行移動客戶端的開發，這樣可以節省成本，更快實現想要的效果，不過一旦出現大量功能需求且迅速增長的用戶群體，就對性能提出更高的要求，最終仍需從H5技術過渡至原生開發，或采用混合開發的模式。