H5技術(shù)在手機(jī)APP客戶端中的應(yīng)用研究

任立勝

（內(nèi)蒙古農(nóng)業(yè)大學(xué)職業(yè)技術(shù)學(xué)院，呼和浩特 010000）

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

1 HTML5

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

2 HTML5手機(jī)端

用戶較為關(guān)注的是手機(jī)端，這是整個(gè)框架的最外層，其中手機(jī)應(yīng)用采用的主要技術(shù)是

HTML5，這種技術(shù)可在pc端完成，并在手機(jī)獲得應(yīng)用，通過該技術(shù)可實(shí)現(xiàn)不同屏幕的寬度進(jìn)行自動(dòng)調(diào)整布局，從而避免因屏幕不同出現(xiàn)重新開發(fā)的問題。此外，一些全新表單作為HTML5新輸入對(duì)象，基本涵蓋Email地址、日期、URL等，不過其他的對(duì)象引入了對(duì)非拉丁字符的支持。在微數(shù)據(jù)植入HTML5中，Web呈現(xiàn)出更為簡(jiǎn)單的語(yǔ)意處理，總之，系統(tǒng)開發(fā)人員可通過相關(guān)結(jié)構(gòu)的改進(jìn)，打造出更加干凈且便于管理的網(wǎng)頁(yè)。

3 手機(jī)APP客戶端應(yīng)用H5技術(shù)的優(yōu)點(diǎn)

html5+js+css是webAPP的實(shí)現(xiàn)基礎(chǔ)，不過，webAPP的應(yīng)用仍然是以瀏覽器的微網(wǎng)站開發(fā)為基礎(chǔ)。所以，開發(fā)人員需對(duì)html5的優(yōu)勢(shì)進(jìn)行深入了解，這樣采用APP與webAPP相結(jié)合的方式，對(duì)APP進(jìn)行開發(fā)與設(shè)計(jì)。

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

第二，時(shí)下多數(shù)互聯(lián)網(wǎng)應(yīng)用已經(jīng)將GPS定位作為必備功能，一些商城、O2O應(yīng)用甚至開發(fā)專門的導(dǎo)航應(yīng)用等。尤其在移動(dòng)APP中，定位功能是必備的，不過網(wǎng)頁(yè)中較難實(shí)現(xiàn)，如今，將這一功能加入到H5技術(shù)中，大大提升了此功能的應(yīng)用能力，使H5的應(yīng)用范圍得到一定程度的拓展。

第三，繪圖功能：移動(dòng)客戶端不同于以往的網(wǎng)頁(yè)，網(wǎng)頁(yè)中缺少繪圖功能，而移動(dòng)端引入了繪圖功能，使得圖片及圖標(biāo)得到美化，欣賞價(jià)值得以提升。將Canvas的API引入到H5中，以此進(jìn)行圖片操作，可實(shí)現(xiàn)圖片的移動(dòng)、旋轉(zhuǎn)及縮放等常規(guī)功能，另外，支持同3D和2D。

4 手機(jī)APP客戶端應(yīng)用H5技術(shù)的缺點(diǎn)

H5技術(shù)在手機(jī)APP客戶端的應(yīng)用有幾個(gè)方面的問題：

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

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

第三，頁(yè)面切換場(chǎng)景：自行管理生命周期，這是H5數(shù)據(jù)管理特性，一旦大量頁(yè)面緩存的數(shù)據(jù)占據(jù)大部分內(nèi)存，到了一定程度內(nèi)存進(jìn)行自動(dòng)釋放，就會(huì)導(dǎo)致H5經(jīng)過頻繁的操作，內(nèi)存越積越多，應(yīng)用遭遇卡頓，造成極差的體驗(yàn)效果。

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

第五，網(wǎng)絡(luò)流量慢時(shí)，效果體驗(yàn)差距明顯：采用H5技術(shù)進(jìn)行開發(fā)的移動(dòng)客戶端，網(wǎng)頁(yè)打開后會(huì)出現(xiàn)一個(gè)向前緩沖的進(jìn)度條，如同pc端的網(wǎng)頁(yè)緩沖，一旦出現(xiàn)網(wǎng)速過慢，將直接導(dǎo)致網(wǎng)頁(yè)無法打開。

5 結(jié)束語(yǔ)

總之，在移動(dòng)客戶端應(yīng)用H5技術(shù)，優(yōu)劣并存，不過對(duì)于起步階段的小型企業(yè)來說，較為適用H5技術(shù)進(jìn)行移動(dòng)客戶端的開發(fā)，這樣可以節(jié)省成本，更快實(shí)現(xiàn)想要的效果，不過一旦出現(xiàn)大量功能需求且迅速增長(zhǎng)的用戶群體，就對(duì)性能提出更高的要求，最終仍需從H5技術(shù)過渡至原生開發(fā)，或采用混合開發(fā)的模式。