手机是目前互联网最大的入口，根据《中国互联网报告》[1]，中国手机互联网用户规模已超过8亿，平均每天上网时间超过3小时。

毫不奇怪，移动应用软件（简称App）开发工程师供不应求，一直是IT招聘的热点。

如果你刚开始学习移动应用开发，你肯定会听到H5这个词。它是目前主流的开发技术之一，简单易用，开发周期短，成本低，与传统Web开发兼容。然而，很少有文章详细介绍H5是什么，它有什么原理，以及它与其他技术有何不同。

本文是一篇H5的入门教程，今天是第一篇，介绍一下基本概念，内容尽量通俗易懂，但是没有太复杂的内容，希望本文可以帮助新手入门，也可以供有经验的开发者复习、整理知识点。

感谢国内最大的在线教育平台之一腾讯课堂[2]对本系列教程的赞助，目前他们已启动“腾讯课堂101计划”[3]，推广优质课程资源。想提升前端技术水平的朋友可以关注本文末尾的“一元”课程信息。

1.H5的含义

表面上看，移动应用都是手机上点击图标就能运行的应用程序，但底层技术却各不相同。根据开发技术的不同，应用可以分为三类。

•原生应用程序（ ，简称App） •Web应用程序（ web ，简称Web App） •混合应用程序（ ，简称App）

这三类应用的技术模型各有不同，各有优缺点，企业一般会选择其中一种作为主要的技术栈来构建自己的移动应用。

H5这个词可以理解为混合App模式，但具体是指混合App的前端部分，因为混合App的前端是网页，所以简称为H5。这个词是中国独有的，基本都是前端程序员用的，国外不用，就简单叫混合App。

要想真正理解H5开发，首先需要明白什么是原生应用，什么是Web应用，因为混合应用就是基于它们而诞生的。

2. 原生应用 2.1 概念

原生应用是专门为特定手机平台开发的应用，无法在其他平台上运行。如果一款手机软件需要同时支持苹果手机和安卓手机，那么就需要为苹果手机和安卓手机分别编写一个原生应用。

历史上，原生应用最早出现，是伴随智能手机系统而生，诞生于2007年6月，而2008年9月诞生时，也同时发布了自身平台的原生应用开发方式。

原生应用使用的语言和手机操作系统一致，iOS原生应用使用C语言或多种语言，原生应用使用Java语言或多种语言，由于语言和技术模型和系统底层一致，所以原生应用的性能和用户体验都非常好。

2.2 优点

原生应用的优势主要有两点：（1）性能和体验更佳；（2）可以使用系统所有的软硬件API，比如GPS、摄像头、麦克风、加速度计、通知推送等，可以充分挖掘系统的潜力。

2.3 缺点

原生应用最大的劣势是成本，每个移动平台都要成立独立的开发团队，大公司一般都有iOS和两个开发团队，如果出现第三个平台（上一个，或者未来华为的鸿蒙），就必须成立第三个团队，成本就更高了。

第二个缺点是 App使用的都是操作系统底层的语言，是一种重编译型语言，开发调试成本比较高，时间周期比较长。

第三个缺点是原生应用必须下载安装后才能使用，每当升级一个版本，都要重新下载安装，而用户往往不愿意更新版本，因此厂商被迫长期支持旧版本。

3. Web 应用程序 3.1 概念

Web App 是使用网页制作的应用程序，必须在浏览器中使用。例如，当您在浏览器中发送和接收电子邮件时，您正在使用 Web App。

Web App主要采用网页技术，即HTML、CSS。2008年，W3C组织发布了版本，简称，大大增强了网页的功能，让网页可以作为应用程序使用，而不只是展示文字和图片。这就是Web App的由来。

3.2 优点和缺点

Web Apps的优点有：（1）不需要下载、安装，打开浏览器就可以使用，并且始终使用最新版本；（2）对于开发者来说，Web Apps编写速度更快，调试起来更容易，并且不需要经过应用商店的审批就可以发布。

Web Apps主要有两个缺点，第一，浏览器提供的API（即Web API）非常有限（目前只有摄像头、GPS、电池等几个），大部分系统硬件无法通过网页访问，也不能直接读取硬盘文件，所以Web Apps无法充分利用平台的硬件。

第二个缺点是网页是通过浏览器渲染的，性能不如原生APP，不适合做对性能要求较高的页面。

3.3 Web 应用程序的缺点

Web 应用需要打开浏览器才能使用，这意味着用户必须记住如何导航到它，是直接输入 URL 还是通过书签查找。这使得访问 Web 应用的便利性远不如原生应用。这是致命的，事实证明用户更喜欢原生应用。

曾经对 1000 个原生应用和 1000 个 Web 应用进行调查，发现 Web 应用可以覆盖更多的用户（1100 万 vs. 400 万），但是原生应用的用户使用时间（188 分钟）却远长于 Web 应用（9 分钟）。

另一项调查显示，用户87%的时间花在原生应用上，13%的时间花在网页应用上。因此，企业很少开发网页应用，总是将原生应用作为首选。

但 Web Apps 并非没有竞争力，根据调查显示，普通用户每月使用 27 个原生应用，但访问的移动网站却超过 100 个。这就意味着用户的 App 使用时间都被头部应用占据了。小公司的应用使用频率很低，获客成本极高，最终沦为僵尸应用。因此小公司开发 Web Apps 更划算，不仅成本低，还能服务更多用户，更好地自我推广（可被搜索引擎收录）。

3.4 渐进式网页应用

为了推广Web App，的浏览器团队做了很多努力，他们认为Web App足以满足大多数App的需求，但是有三大缺陷阻碍了它的推广。

1. 无法从手机主屏幕直接访问。2. 缺乏在手机状态栏和屏幕锁定时推送通知的功能。3. 不支持离线访问（即即使断开互联网连接也可以使用）。

为了解决这些问题，团队开发了一项名为“渐进式 Web 应用”（ Web App，简称 PWA）的新技术。它可以将网站缓存在手机中以供离线使用，并在手机主屏幕上生成图标，让用户直接点击即可访问应用。它还具备推送通知功能，没有浏览器的地址栏或状态栏，非常接近使用原生应用的体验。

但PWA需要浏览器访问一次网站才能在首屏生成图标，而目前iOS系统的支持还不够理想，因此还只是一项探索性技术，目前还没有足够多的成功案例。

4. 混合应用 4.1 概念

混合型App顾名思义就是原生App与Web App的结合，它的壳是原生App，但是网页放在里面，可以理解为混合型App里面隐藏了一个浏览器，用户看到的其实就是这个隐藏的浏览器渲染出来的网页。

混合应用的原生外壳被称为“容器”，而隐藏在它内部的浏览器通常使用系统提供的网页渲染控件（即控件），也可以内置浏览器内核。从结构上看，混合应用从上到下分为三层：网页层、网页引擎层（本质上是一个隔离的浏览器实例）、容器层。

4.2 API

混合应用中的网页和普通的网页不一样，它们可以调用底层系统的所有API，秘密就在于外层容器提供了API，充当底层API的中介，让内部的网页可以调用底层系统。

所谓API，就是底层接口与网页之间的桥梁，让双方进行沟通。容器一旦接收到网页的请求，就会根据请求调用底层系统的API，然后将结果返回给网页。API往往会以某种语言提供，以方便网页调用，然后被调用。

不同的容器有不同的 API。为一个容器编写的网页不能在另一个容器或浏览器中使用，除非 Web 脚本兼容。

容器提供的 API 必须随着平台更新，比如 iOS 发布新版本，有新的硬件 API 时，容器也必须推出新版本的 API，如果容器跟不上，开发者只能想办法自己编写缺失的 API，才能使用新硬件。

4.3 优点

Apps 兼具了 Apps 和 Web Apps 的优点，同时又避免了它们的一些缺点，具体可以总结为三点。

（1）跨平台

Web技术是跨平台的，开发者只需要写一次页面就可以支持多个平台。也就是说，混合应用只需要一个团队，开发成本较低。

（2）灵活性

Apps非常灵活，可以轻松集成多种功能。一方面， Apps可以轻松加载外部H5页面，实现App的插件结构；另一方面，Web页面可以轻松调用外部的Web服务。

（3）易于开发

网页调试和构建比原生控件简单很多，节省很多时间。页面更新也很简单，只要在服务器上发布新版本，就可以触发容器中的更新。此外，招募网页开发人员也更容易，传统前端程序员就可以承担开发任务。

4.4 缺点

混合应用的主要缺点是由于中间层 Web 引擎的存在，其性能相对较差，不仅不如原生应用，而且由于不是功能齐全的浏览器，可能会比 Web 应用更慢。

另一个缺点是，由于页面是跨平台的，所以无法使用特定平台独有的功能，导致体验不如纯原生应用。例如，早期的 有一个物理返回按钮，没有它，页面设计就必须考虑到这一点。

上图是iOS页面。

以上是页面，左上角的返回按钮和系统的返回按钮是一样的。

4.5 小程序

最后我们来谈谈微信小程序。

所谓小程序，可以看作是针对一个特定容器的H5开发，微信本身是一个容器，开放了自己的接口（），外部开发者使用指定的语法编写页面，容器就可以动态加载这些页面。

小程序对微信的好处是拓展了功能和应用场景，吸引外部开发者加入，繁荣生态；对外部开发者的好处是拥有了流量入口，可以直接调用微信的各项功能（比如支付）。

今天的H5相关概念介绍就到此结束，下篇文章会介绍H5相关的开发工具和框架。

（正文完）

腾讯课堂推荐课程《你所不知道的Vue.js性能优化》

当今时代，IT教育蓬勃发展，各类课程层出不穷，知识唾手可得，你可能经常会收到一大堆前端开发数据包，经常收藏起来，再也不会去看。

Vue.js 就是如此，作为主流前端框架之一，在国内应用广泛，市场需求量很大，前端培训机构几乎都会有它的课程，而且都是重点推广，每个学员都会得到大量的学习资料。

如何才能做出一份与众不同的 Vue.js 教程？北京精诚一灯推出了《你所不知道的 Vue.js 性能优化》专题课程。他们是腾讯课堂上最顶尖的前端培训机构之一，专注于培养年薪 40 万的高级前端工程师。目前与腾讯课堂联合运营，毕业生平均薪资可达 25.5K。

为了区别于市面上其他课程，保证优质内容的输出，让学员真正有所收获，本期专题课程深度讲解了Vue.js性能优化以及Vue3.0值得关注的新特性。在资深前端工作面试中，性能优化是必问的知识点。本课程将通过拆解Vue面试核心知识点，帮你解锁Vue.js性能优化，目标是帮助学员顺利进入大公司。以下为部分课程内容。

1. Vue 首屏优化实践 2. 核心优化方案及工程解析 3. 面试常问的 Vue 双向数据深入解析 4. Vue2&3 双向数据绑定深入对比

扫描下方二维码加入群即可领取优惠券，原价98元的课程现仅需1元。

购买课程后，你还将获赠价值196元的《从零到精通》全系列教程。

[1] 中国互联网报告：

[2] 腾讯课堂：

[3]“腾讯课堂101项目”：