粗浅看 移动端的WebApp发展之H5的无限活力

Posted 2022-12-08 吴士龙

了解

关于html的一些基本介绍和技术发展，欢迎浏览前博文：【HTML】1.何识已淡忘

相信大家对上面的图标很熟悉，没错，就是移动端的WebApp技术发展无限活力的Html5(以下简称H5)。

网络的调查

我们来了解以下随着H5的不断发展，互联网用户和技术从业者从自身角度出发，谈谈对于H5的认识（此为网络调查）：

互联网用户

1：你眼中的 H5 是什么？你眼中的 HTML5又是什么？

用户 Arinal：没啥区别。

用户 Bracle：我眼中的 H5 就是 HTML 5。我眼中的HTML 5 最开始是个编程语言，后来大家都这样称某些页面，现在就觉得指用了丰富多媒体的网页了。

2：你眼中微信朋友圈中哪些邀请函、动态页面是什么？

用户 Arinal：邀请函动态页面都是 H5 吧，我分不清。

用户 Bracle：那些是 H5。

技术从业者

两位技术从业者分别是 JS 小组 成员 $w，以及豌豆荚前端工程师 NetPuter。由于技术从业者了解的更多，所以我们的问题也有所增加。

1：你眼中的 H5 是什么？

$w：H5 是一群营销人员造出来的一个词汇，指代的是微信中可以点击的、有特效有背景音乐、可以滑动切换界面、可以分享给其他人的东西。

NetPuter：一方面，也是大多数人所理解的，指那些移动设备效果友好、带有简单交互的页面。另一方面，这是HTML5 的缩写，毕竟口头念出「H」「T」「M」「L」「五」还是很费劲的，但是书面表达还用 H5 作为 HTML5 的缩写就太不专业了。

2：你眼中的 HTML5 是什么？

$w：HTML5 是一个 Web 技术标准。

NetPuter：最新的 HTML 标准。

3：你眼中微信朋友圈中哪些邀请函、动态页面是什么？

$w：就是一些个 Web Page，没有什么。

NetPuter：「H5」页面的一种，但与能够使用 HTML5特性的普通页面不同的是，他们能够利用微信 JS SDK 使用微信特有的功能，比如获取网络状态、获取用户信息、录音、微信支付等功能。

4：从技术人员的视角来说，你怎么看待当前的 H5 生态圈、H5 产业？比如 fork 自Firefox OS 的 H5OS 前不久就获得了 1 亿美元的融资。

$w：H5 其实就是一个噱头，还是偏营销的成分偏多，忽悠 VC 的。这个问题的核心是移动端的 Web 是否还有戏，移动端的 Web 是否还能够超越 Native App。我个人对具体技术并没有什么特殊的偏执，能顾满足普通用户需求的技术才是好技术，所以是什么技术无所谓，关键看他们解决了什么问题。那么你再看 Firefox OS 和 H5OS 就会清晰些，它们解决了什么问题呢？

NetPuter：单纯从技术角度来看，如果这个产业、生态圈能够真正推动 Web 技术的发展，那当然是很好的。然而并没有看到什么有价值的事情……

我更喜欢从市场角度来看。对于国内来说，「H5」页面作为朋友圈里最适合传播的载体，希望在朋友圈里宣传营销的人就会有需求，需求足够大就会有产业（刷榜、iMessage 营销也是这样的）。相关的产业、生态圈以「H5」为噱头进行宣传也不足为奇。

5：HTML5 技术主要有哪些应用方向？转换成普通用户可见的产品又有哪些？

$w：HTML5 技术其实你可以理解为 Web 技术，就是电脑中的浏览器打开的网站其实都是 Web 技术构建的。Web 能够做的事情很多，主要特点是易于分享、易于更新、易于跨平台，类似的需求都可以采用 Web 来搞定。普通用户可见的产品其实有很多，比如微信中点到「钱包」项中，所有的类目多多少少都是 Web 技术构建的。

NetPuter：多媒体：在线视频、音乐消费；地理位置：地图；重力感应：游戏，或者视觉效果；音频编辑：特殊音效；通知：新消息提醒；综合：不必安装即可试用的「轻应用」，或者像 Google Docs 这种富应用。

6：用 HTML5 开发 app 然后在各个平台都能用，这种说法已经出来了很久，但最终并没有被厂商和用户广为接受，这又是因为什么？

$w：主要是 HTML5 这个标准并没有完完全全都覆盖到所有需求，而且有些标准浏览器或者手机不一定按照这个标准来。就好比你有一个插座的国际标准，但是苹果就偏偏不用，就是自己的标准。

NetPuter：我觉得主要还是受限于手机性能。回顾当年 PC Web 的发展，早期大家也是主要使用 Native Apps，Web 也只是作为展示使用。后来随着 HTML 技术发展，开始有一些简单的 Web Apps 出现，但是性能不好效果也很卡。再后来 Firefox、Chrome 甚至V8 引擎发布，Web 性能开始有明显提升，更多流畅、复杂的Web Apps 出现，性能方面不明显落后于 Native Apps，在交互方面甚至还要优于 Native Apps。尤其到了 PC 后期性能过剩阶段，就很少人诟病 Web 性能了。我认为同样的故事也会发生在移动 Web 上。

好了，以上就是这次访谈的内容。这篇文章在普及一些基本概念的同时，也希望大家对 H5 生态圈、H5 产业这些炒作概念的东西有更加清晰的认识。就像两位技术人员所说的那样，在并没有看到什么有价值的事情以及没有解决什么问题的情况下，你看到那些天天鼓吹 H5 的人基本都是在做营销。

浏览器支持

IE9 以下版本浏览器兼容HTML5的方法，使用百度静态资源的html5shiv包：

<!--[if lt IE9]>
<scriptsrc="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
载入后，初始化新标签的CSS：
/*html5*/
article,aside,dialog,footer,header,section,footer,nav,figure,menudisplay:block

More we need to pay attention to

现在很多想学习网页制作web前端的人都对HTML5比较有兴趣！然后却不知道什么是HTML5和它到底什么东西？以及它是怎么应用的，用于制作什么？

其实HTML5并不神秘，它将成为 HTML、XHTML 以及 HTMLDOM 的新标准，但是他目前仍然处于完善之中，只是大部分现代浏览器已经具备了某些 HTML5 支持！

HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点，如video、audio和canvas 标记。HTML5还引进了新的功能，可以真正改变用户与文档的交互方式！

但是目前现在的网页制作中，H5是比较偏重于手机端的，一般都是把H5应 用到手机网站上面去！目前对于PC端，H5在某些浏览器中会产生不兼容的情况！所以为了让PC端的网站对更多的浏览器都适用，提高用户体验度！让更多在不同浏览器里面查看网站的人都能够看到友好的网站页面，因此在做PC网站的时候H5的应用需要根据实际网站的需求以及网站面对的是什么样的用户群体来选择怎么用！因此不要滥用H5！根据网站的实际需求来用，才能达到更好的效果！也能够有利于网站后期的推广！

 

干货分享：

玩转H5移动页面(优化篇)

H5 深度玩法总结，让你的 H5立刻爆棚

H5+时代：如何做一个有温度的H5？

5大要素让你的H5活的更久