H5技术在手机APP客户端中的应用研究

2019-02-14任立胜

数字通信世界 2019年10期

任立胜

（内蒙古农业大学职业技术学院，呼和浩特 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端的网页缓冲，一旦出现网速过慢，将直接导致网页无法打开。