移动客户端中的H5技术运用

陈平

摘   要：作为HTML的第5代应用技术，H5以其强大的兼容性，大大降低了数字化产品的开发与运营的成本，所搭载的站点不仅可以兼容PC端，而且可以应用在移动智能端，甚至于各个系统平台，用来制作一切数字化产品。企业以及创业者在H5强大兼容性下，迎来了发展的无限可能。文章对移动客户端数字化产品开发的3种方式进行了介绍，结合现状对H5开发的移动客户端优点与缺点进行了分析。

关键词：移动客户端;H5技术;数字化产品;开发方式

移动互联网迅速普及，H5技术已经从原来笨重的、固定的PC端，迅速拓展到移动客户端，一方面打破了原来硬件与宽带的局限，另一方面对移动数字化产品在应用上的各方面性能进行了极大的优化。

1    移动客户端数字化产品开发的方式

H5开发方式、原生开发方式以及混合开发方式，是目前基于数字化应用的移动客户端开发最多的3种方式。相对于其他两种，Native原生开发技术更加成熟，也是现阶段采用最多的开发模式。开发技术混合则是最新的原生开发，在开发的过程中，Google引入了SDK技术，在H5和JS技术联合开发的基础上，集成了WebAPP，而且在很多场景中会用到混合开发技术。三者混合开发架构可以有效弥补各自的短板，且具有较强的综合性。在开发中，混合语言由混合开发主要开发，原生语言由原生开发，网页语言形式则由H5主要负责开发。综合来看，H5网页语言在设备访问能力上，相对较差，另外两种表现较好;原生语言在跨平台上性能较差。因此，需要灵活选择开发方案，而要想选择最经济、效率最高的方案就要考虑用户的体验以及不同的需求[1-2]。

2    H5开发的移动客户端优点

从实现基础上来看，WebApp是基于HTML5+JS+CSS3的技术实现的，所以有必要深入了解HTML5的优势与特点，在开发浏览器为基础的微网站时，可以更加合理地结合原生APP与WebAPP的优势，更好地开发与设计。

（1）存储功能可以用cookie的升级版来当作H5的WebAPI技术，它有着更好的弹性，在把存储的数据写在本地的浏览器ROM时也可以通过更好的方式进行，不再受到存储数据大小的限制。在浏览器被关闭后，在本地照旧会保留相应的数据，并且数据在浏览器被再次打开时不需要进行重复的网络请求就可以重新恢复，网络流量的消耗也因此得以降低。与此同时，WebStorage也被引入到H5之中。WebStorage在H5之中的作用相当于H4中的cookie，能够帮助浏览器存储缓存数据，是H5中很重要的一部分，且功能十分强大。4 K为H4中cookie的上限，而H5的WebAPI技术则要强大很多，极大地增加了存储能力，本地存储基本在5 M左右。与此同时，Web存储也被分为Session存储和本地存储两类。

（2）GPS定位功能，对于各种互联网应用来说是基础。各种商城以及O2O的应用特别是专门的导航应用，在没有定位的情况下都不能很好地运作。GPS定位功能在移动APP中是必备的，然而在网页中却不能进行很好的运用。GPS定位功能现阶段已经被加入到H5技术之中，从而极大地拓展了H5的应用范围。

（3）绘图功能，在以往的网页中一般是不具备的，但是绘图对于移动客户端而言却是一个很基础的功能。各种图片、图表在没有绘图功能的情况下就不能进行美化。H5在进行图片的操作时使用了Canvas的API，也加入了对3D和2D方面的支持，但主要是支持常规的功能，如缩放、旋转和图片的移动等[3-4]。

（4）提升了互动能力，刚开始的网页互动能力较弱，动态效果也很少，都属于静态网页。各种动画效果以及大量组件的变形、移动被加入到H5中，极大地提升了H5的交互能力。

（5）降低了开发和维护成本，在对移动客户端进行开发时使用原生的代价常常是很大的。由于原生的代码通用能力低代码使得开发成本很高，不同的团队需要维护和开发不同的平台。然而，H5没有多个团队、安装升级包等方面的问题，既加快了开发的速度，也降低了开发成本。

（6）在布局网页时常常选择CSS，通过CSS的嵌入，在网页中可以实现页面布局的美观、合理。CSS3版本可以被應用在H5之中。H5的视觉借助于这个版本会收到更好的效果，且可以更好地展现动画效果以及字体的嵌入。

3    H5开发的移动客户端缺点

虽然H5的APP开发既可以加快开发的速度，又可以降低开发成本，然而，相对于原生而言，还存在以下方面的问题。

3.1  动画方面

在动画方面，H5技术尽管也做了不少尝试，然而相对于原生的移动客户端开发而言，H5的动画种类有些单一。H5如果想要增强效果，就要得不偿失地在性能方面大打折扣。特别是对于部分性能较低的低端机来说，H5消耗内存和显卡，机器的硬件本身又差，从而导致卡顿等各种问题出现。

3.2  网络数据的获取

在获取网络数据方面，现阶段大多数都是采用WebAPI方式。通过服务器，网络数据可以异步获取，避免造成过程中页面卡顿的状况。H5获取网络数据的阶段，需要涉及DOM的操作，同时填充到表单中。从性能消耗的角度来看，H5会造成频繁的DOM操作、会导致OOM等问题，这一问题目前仍没有得到有效的解决。在加载的过程中，H5必须从网络完全获取到数据后，界面显示之前必须确认所有数据没有问题，进而导致长时间白屏，用户在体验效果上会很差。相比而言原生的移动客户端会好很多，不仅效果迅速，而且仅需几组不同的数据就可以显示界面，在体验效果上非常好。对比二者的用户体验，就可以明白访问频繁的大型APP中，若是不能解决加载界面的问题，纯粹的H5技术开发会出现很多问题[5-6]。

3.3  页面切换场景

页面的切换在原生的移动客户端开发过程中，会有很多种不同的方式，比如模拟加载、预加载一定量的数据以及设计不同的动画场景等[1-2]。为了可以获得同样友好的体验效果，H5技术必须解决内存问题，减少页面大量的缓存，管理生命周期，自动释放数据，避免内存居高不下而导致的应用卡顿。在这个问题的处理上，某些大公司设计了自己的加载生命周期以及缓存技术，但是效果仍然不好[7]。

3.4  客户端开发版本

在H5技术大量使用到移动客户端开发的过程中，一些开发人员认为如苹果系统和安卓系统等移动客户端往往会有很多的开发版本，需要不同的开发团队、开发人员，来满足不同移动客户端的需求，导致开发成本大大增加，而H5技术可以降低这方面的需求[3-5]。在不考虑性能的情况下，比如公司初期，可以通过一定程度的兼容，来解决问题，满足不同的需求，但是后期的问题会越来越明显，当用户越来越多，导致体验越来越差，所有的问题集中而来，就不得不推倒重新来过，这也是原生开发可以继续存在的意义。

3.5  性能差距

在性能差距上，H5技术和原生开发差距相当大。在5 000元的高端机或者200元的终端机的使用上差距不明显，但是千元机在使用时，会发现原生开发非常顺畅，而H5却频繁卡顿。主要原因就是很多“坑”在原生开发、研究的十多年过程中，被开发人员“填上”，相比于H5技术在移动客户端的开发使用上时间很短，很多问题得不到解决[6-7]。

3.6  效果体验

在网络流量慢的时候会有巨大的差距：原生开发在网页打开的时候，会缓存已有的数据并存在本地;H5表现相对较差，在页面的打开阶段，会看到一个进度条不断地向前走，若是网速慢就会一直卡着打不开，就像打开一个网页一样。

4    结语

技术不断发展进步，在这个过程中会衍生出很多新的技術和应用，H5技术在刚刚起步的小型企业的移动客户端优势会非常明显，既可以快速实现功能，又可以极大地节约成本、节省时间。但是由于用户群体数量庞大，之前的优势会转化成劣势，功能需求在用户数量增大的同时，不断地变多、变复杂，由此导致的性能问题就会越来越突出，这样就得采用混合开发的模式，向原生开发靠拢。ReactNative作为Facebook提出的新的开发框架，通过JS语言进行原生开发，在性能上效果远远好于H5，但是稍差于原生。

[参考文献]

[1]胡伯俊，杜哲璇.H5页面用户特征及行为习惯研究[J].中国有线电视，2019（7）：786-788.

[2]陈东方，王魁祎.移动客户端中的H5技术运用[J].电脑知识与技术，2019（17）：219-220，222.

[3]刘乔辉.基于H5技术在移动客户端中的应用分析[J].湖北农机化，2019（9）：46.

[4]王志.基于H5技术的移动融媒新闻创新[J].新闻记者，2019（3）：10-12.

[5]吴楠.浅析新一代信息技术下H5游戏广告[J].广东蚕业，2019（2）：141-142.

[6]刘孟涵，刘旭.基于H5技术的景泰蓝传统工艺展示系统的设计与实现[J].中国信息技术教育，2019（1）：83-85.

[7]唐毅.H5技术在移动客户端中的应用研究[J].电脑知识与技术，2017（11）：183-184，195.