《H5的庐山真面目》

Posted 2023-02-26 杨晓风-linda

从 2014 年起，一个叫做 H5 的词出现了，稀里糊涂的火成了辣子鸡!

背景

不知何时，h5这个名词频繁出现在日常的工作交流中，虽然一直接触，期间也思考过什么是h5，也被人问起什么是h5，但没有系统地去搜索和思考过这个问题。今天小编站在巨人的肩膀上同时也结合自己开发的经验来谈一谈h5

what

H5的定义众说纷纭，业界内也没有一个标准的定义，目前我比较认同的一种说法是：

H5在狭义和广义上有两层含义，狭义上的H5只是一种编程语言，是html5的简略写法，而广义上的H5则涵盖了HTML5、CSS3、javascript等一系列前端技术所开发的数字产品

其实h5在国内人们的意识里有一个语言层面的共识，但其实是没有一个广泛的合理的解释其是如何演变而来的，因为HTML5本身已经是一个缩写，实际上将HTML5进一步缩写成H5在英语语法中是错误的，继而不妨理解为这是国内人们创造的一个独有的名词概念，来囊括某一种现象或者技术潮流趋势。

why

HTML的第一版1991年开始研发，1993年发布，原本每隔一段时间HTML会有节奏地进行更新，但自从1999年12月HTML4.01发布以来，就再也没有更新。此后十余年，互联网行业发生了翻天覆地的变化，原本的HTML已不能使用互联网的发展，此时WHATAG和W3C提出了新的解决方案，WHATAG开发了Web Applications 1.0，W3C开发了XHTML2.0。2006年双方决定进行合作创建新一代的HTML，即HTML5

这里的HTML5指的是第5代HTML，也指用H5语言制作的一切数字产品，是超文本标记语言的英文缩写。超文本是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。而标记指的是这些超文本必须由包含属性的开头与结尾标志来标记。

而目前火爆的H5更多的是承接于HTML5的出现而兴起的一种新的网页格式，配合CSS和JS文件，提供更多的功能和效果

how

H5新增的能力包括：

 其最大的优势在于跨平台性，用H5搭建的站点与应用可以兼容PC端与移动端。

H5主要缺点集中在性能上：同样的交互，用H5实现需要更多的系统资源，也可能会不够流畅。同时，应用还需要集成一个非常巨大的浏览器内核。至少在5年内，HTML5的性能是不够的。

工作思考

目前工作中主体框架使用Mpx，滴滴开源的一款致力于提高小程序开发体验的增强型小程序框架。其中营销活动的大多页面都被开发做H5页面，通过web-view来建立链接进行访问。H5页面开发线下模式的话一般采用vue框架进行，线上模式，有内部研发的诸多平台。从工作经验中窥探H5的使用场景，使用H5的优势和成本又是什么

H5页面大多应用在营销领域，使用H5的优势：

• 跨平台：一套H5可以应用于多端，比如小程序、app、PC等
• 时间成本：小程序发布需要提审，提审需要时间，而采用H5的相关页面即可省略提审成本
• 开发成本：营销活动大多变化多样，给人以炫酷的体验，并且具有时效性，节省开发成本
• 性能：小程序包的体积是有明确要求的，比如主包不能超过2MB.H5页面的开发通过web-view嵌入链接进行访问

使用H5的成本：

• 调试成本：线下开发，PC端调试：使用微信者开发工具需要设置：

使用支付宝开发者工具需要设置：

真机调试：切换测试环境，使用测试账号，打开调试模式

线上维护，当线上出现问题时，需要使用代理工具（Charles或者whistle等）抓包，查看具体URL，确定H5的具体开发方案或者开发平台，继而去找到源代码进行问题定位和问题解决

• 人力、维护、交接成本：H5的广泛应用，需要人力去单独维护，涉及到人员变动工作内容交接时，也会涉及到交接成本；一个工程，用不同的方式来开发页面，再集成形成整体，增加复杂度，提高维护成本

但调试成本和维护、交接成本更多地体现在初期，后期调试流程准备就绪，代理环境OK，这些成本也就可以容忍

任何事物都有两面性，有舍有得，适合的是最好的。

巨人肩膀：

• http://www.coozhi.com/shenghuojiaju/shenghuochangshi/106799.html
• H5究竟是什么?_gaochenglong1的博客-CSDN博客_h5是什么
• H5是什么？_liuyingv8的博客-CSDN博客_前端h5是什么
• 5分钟看懂H5是什么，及H5的应用场景举例。 - 知乎