表面上看，手机App都是同样的东西，就是手机上的应用程序，点击图标就能运行，但是它们的底层技术不一样。按照开发技术，App可以分成三大类。
这三类App的技术模型都不一样，各有优缺点。企业一般会选择其中一种作为主要技术栈，构建自己的手机App。
H5这个词，可以理解成就是混合App模型，只不过它特指混合App的前端部分。因为混合App的前端就是HTML5网页，所以简称H5。这个词是国内独有的，基本上都是前端程序员在用，国外不用这个词，就直接叫混合App。
真正理解H5开发，需要先搞清楚什么是原生App、什么是WebApp，因为混合App是在它们的基础上诞生的。
原生App是专门为特定手机平台开发的应用程序，无法在其他平台运行。一个手机软件如果要同时支持苹果手机和安卓手机，就需要为它们各写一个原生App。
历史上，原生App最早出现，跟智能手机系统一起诞生。2007年6月iPhone诞生，2008年9月安卓诞生，就同时发布了自家平台的原生App开发方法。
原生App使用与手机操作系统相同的语言。iOS的原生App使用Objective-C语言或Swift语言，安卓使用Java语言或Kotlin语言。由于跟底层系统的语言和技术模型一致，所以原生App的性能和用户体验都很好。
原生App的优点主要是两个：（1）较好的性能和体验；（2）可以使用系统的所有硬件和软件API，比如GPS、摄像头、麦克风、加速计、通知推送等等，能充分发挥系统的潜力。
原生App的缺点主要是成本，每个手机平台都要建立一个独立的开发团队，大公司一般都有iOS和安卓两个开发团队。如果出现第三个平台（以前的WindowsPhone，也许将来的华为鸿蒙OS），就要组建第三个团队，成本就更高。
第三个缺点是，原生App必须下载安装才能使用，只要升级版本，就必须重新下载安装。用户往往不愿意更新版本，厂商被迫不得不长期支持很久以前的旧版本。
WebApp是使用网页做的应用程序，必须在浏览器中使用。比如，你在浏览器中收发邮件，就是在使用WebApp。
WebApp主要使用网页技术，即HTML、JavaScript和CSS。2008年，w3c组织发布了HTML第5版，简称HTML5，该版本大大增强了网页的功能，使得网页可以当作应用程序使用，而不仅仅是展示文字和图片，这就是WebApp的由来。
WebApp的优点是：（1）不需要下载安装，打开浏览器就能使用，而且总是使用最新版本；（2）对于开发者来说，WebApp写起来比较快，调试容易，不需要应用商店的批准就能发布。
WebApp的主要缺点有两个。首先，浏览器提供的API（即WebAPI）很有限（目前只有相机、GPS、电池等少数几个），大部分系统硬件都不能通过网页访问，也无法直接读取硬盘文件，所以WebApp无法充分利用平台的硬件。
第二个缺点是，网页通过浏览器渲染，性能不如原生App，不适合做性能要求较高的页面。
WebApp需要打开浏览器才能使用，这意味着，用户必须记住如何导航到它，要么直接输入网址，要么翻找书签。这使得进入WebApp，远不如原生App方便。这点很致命，事实表明，用户偏好原生App。
为了推广WebApp，谷歌公司的Chrome浏览器团队做了很多努力。他们认为，WebApp足以满足大多数App的需求，但是三大缺陷阻碍它的推广。
为了解决这些问题，Chrome团队开发了新技术"渐进式WebApp"（ProgressiveWebApp，缩写PWA）。它可以把网站缓存在手机里面，供离线时使用，还能在手机首屏生成图标，直接点击进入，并且有通知推送能力，也不带有浏览器的地址栏和状态栏，跟原生App的使用体验非常接近。
但是，PWA需要浏览器访问一次网站，才能在首屏生成图标，并且目前iOS系统的支持还不够理想，所以还只是一项探索性质的技术，迄今为止缺乏足够的成功案例。
混合App（hybridApp）顾名思义就是原生App与WebApp的结合。它的壳是原生App，但是里面放的是网页。可以理解成，混合App里面隐藏了一个浏览器，用户看到的实际上是这个隐藏浏览器渲染出来的网页。
混合App的原生外壳称为"容器"，内部隐藏的浏览器，通常使用系统提供的网页渲染控件（即WebView控件），也可以自己内置一个浏览器内核。结构上，混合App从上到下分成三层：HTML5网页层、网页引擎层（本质上是一个隔离的浏览器实例）、容器层。
混合App里面的网页不同于普通网页，可以调用底层系统所有的API。奥秘就在于外层容器提供了APIBridge，充当底层API的中介，允许内部的网页调用底层。
所谓APIBridge就是容器在底层接口和网页之间，建立一座桥梁，让双方通信。容器一旦接到网页的请求，就根据请求去调用底层系统的API，然后再返回结果给网页。APIBridge往往以JavaScript语言提供，方便网页调用，这时又称为JSbridge。
不同容器的APIBridge是不一样的。为某个容器写的网页，不能放在另一个容器使用，也无法在浏览器使用，除非网页脚本做了兼容处理。
容器提供的APIBridge必须跟着平台更新。比如，iOS发了新版本，有了新的硬件API，容器也必须跟着推出新版的APIBridge。如果容器没有跟上，开发者为了使用新的硬件，就只能想办法自己来写缺失的APIBridge。
混合App同时具有原生App和WebApp的优点，又可以避免它们的一些缺点。具体来说，可以总结为三点。
（1）跨平台
Web技术是跨平台的，开发者只写一次页面，就能支持多个平台。也就是说，混合App只需要一个团队就够了，开发成本较低。
（2）灵活性
混合App的灵活性大，很容易集成多种功能。一方面，混合App很容易加载外部的H5页面，实现App的插件结构；另一方面，Web页面可以方便地调用外部的Web服务。
（3）开发方便
Web页面的调试和构建，远比原生控件简单省时。页面的更新也容易，只要在服务器上发布新版本，触发容器内更新就可以了。另外，Web开发人员也比较容易招聘，传统的前端程序员可以承担开发任务。
混合App的主要缺点是，由于存在网页引擎的中间层，所以性能比较欠缺，不仅不如原生App，而且由于WebView不是全功能浏览器，可能比WebApp都要慢一些。
另一个缺点是，由于页面跨平台，就无法使用只有特定平台提供的功能，导致体验不如纯的原生App。举例来说，早期的时候，安卓有物理的后退按钮，iPhone没有，页面设计不得不考虑这一点。
上图是iOS页面。
上面是安卓页面，左上角的后退按钮，跟系统的后退按钮重复了。
（正文完）
当今时代，IT教育蓬勃发展，各种课程层出不穷，知识唾手可得。你可能经常领取到海量的前端开发资料包，往往收藏起来就再也没看过。
Vue.js就是这种情况，作为前端的主流框架之一，国内有着广泛应用，市场招聘需求大。前端培训机构几乎一定有它的课程，而且都是重点推广，每个学员都会拿到一大堆学习资料。
怎样才能做出有特色的Vue.js教程呢？北京的京程一灯现在就推出了一个专项课程《你不知道的Vue.js性能优化》。他们是腾讯课堂前端培训TOP机构之一，专注培养年薪40万的高级前端工程师，目前和腾讯课堂联合运营，毕业生平均薪水可以达到25.5K。
扫描下图二维码，进群领取优惠券，原价98元的课程，现在只需要1元。
购课之后，还将赠送价值196元的《Webpack从入门到精通》全系列教程（点击看大图）。
（完）
steven说：
Cordova算一个桥梁项目一直在用就是总感觉体验和性能差点。
KevinBlandy说：
Flutter，一统天下。
小学第呀说：
对于我这种小白，真是开眼界了，感激。
刘源说：
豁然开朗,终于明白了原生appwebapp混合app的区别感谢阮一峰老师!!
Gxxgle说：
多数应用，性能都不是最大的问题。看好混合应用。
dcxy0说：
引用KevinBlandy的发言：Flutter，一统天下。
赞同.一个Flutter完美解决H5APP和原生APP所面临的问题.
softbase说：
想咨询下：手机版的网站，加个原生的壳子，直接转换成一个基于webview的应用APP，通不过Apple的审查，这个怎么解？
阿道夫说：
在线求解，毕设要做一个app，使用flutter好还是reactnative。我是前端，会react，vue，js。
逻辑说：
引用阿道夫的发言：在线求解，毕设要做一个app，使用flutter好还是reactnative。我是前端，会react，vue，js。
Thinker说：
这篇概念篇真的很赞了！
susan说：
阮老师，看到Apple官网消息称为了安全和体验，“如果app使用HTML5等网页技术动态提供核心功能，则应使用Safari来分发，而非通过AppStore”，这对混合APP开发将会有怎样的影响？
总长说：
引用逻辑的发言：
目前推荐用rn。但我个人观点是谷歌的归谷歌，苹果的归苹果，还是要选一个原生的作为主攻方向。我得出这个结论的逻辑是因为平台即领地，所以没有银弹。
刁近平说：
electron怎么样
石樱灯笼说：
管HTML叫H5，管JAVA8叫J8，中国特色软件开发。
fuckhuawei说：
呵呵，鸿蒙已经宣布不会在手机平板等设备用了
楚留香说：
很详细，清晰易懂，看过的最清晰的解释了
jz说：
hansen说：
同样的问题，大神说出来就是不一样。
Kevin说：
Liuhuo说：
思辰说：
看过几篇，感觉阮老师的最简单且清晰！
winter说：
iOS宣布在2020年3月全面下架混合app
ixixone说：
飞天意面神教说：
目前看来Flutter是最优解，前几天刚上线的最新版本已经支持Web和Mac，虽然还不是正式版本。不过如果近期要开展的项目的话，基于团队的角度我应该还是会选择ReactNative。从个人的角度来说应该会用Ionic。
Oliver说：
引用softbase的发言：想咨询下：手机版的网站，加个原生的壳子，直接转换成一个基于webview的应用APP，通不过Apple的审查，这个怎么解？
苹果会把通不过的原因告诉你，改掉就行了呀
nsynet说：
目前华为在推的“快应用”，和小程序不同的是可以在桌面产生图标，应该和小程序机制类似的吧？
Chandler说：
鸿蒙OS。。。认真的吗，PPT按揭开源都能有生态的？按揭开源方舟编译器，宣传吊打Android，IOS，然后代码helloworldDemo跑不通？在圈内让人笑掉大牙了已经。不过剥削员工，送员工吃牢饭倒是有两把刷子。
残梦说：
想请教一下各位,更看好RN还是flutter,打算选一个进行学习
everglow说：
性能问题，现在快5G了，网页跑起来很快的啦。
wylb说：
有人知道pwa必须是浏览器支持，通过浏览器的菜单（如pc端chrome中的安装xxx功能）实现生成一个类似app可以启动的图标？可以通过在网页中添加一个按钮，点击按钮自动生成app图标吗？
国光说：
皮皮说：
感谢科普！接到需求要从0到1设计一个产品，要在各端通用，资源又有限。领导只说了一个H5。。。度娘H5出现一堆用来营销的H5网页，根本解决不了产品需要的搜索、资讯展示的需求。看了老师的概念科普，才知道原来是混合app！