淘宝app属于hybrid app吗？

是。任何足够大的 App 里面都会有一个实现不完全的浏览器。

说实话在app内，嵌一些webview来实现一些比较灵活的页面就称之为混合型app，其实并没什么太高深的技术含量。

在很早期的app，经常会看到套一个app的壳，然后里面全是web页面，然后就上App Store了，充斥在线上。

甚至早期的Facebook的app，居然也是放了一堆web页面来实现，还有侧滑栏，每一次跳转，都需要去loading，甚至已经看过的页面也是这样。直到后来马克同学把重心转向移动端才重构了整个app，才有了今天的体验。

这本身就是手机厂商提供的一种做app的方式。

像淘宝那个做法，大家看一下淘宝的页面，首页是这样的：

基本上上面每个点击（除了导航的点击）之外，跳转的目标都是一个页面的样式，比如商品单品页：

就是完全的一个适配到手机端的页面，再比如：

无非就是一些定制化的web页面。

业务复杂的是各自页面的本身的业务，app本身没设计业务本身的流程（列表、商品详情、商品详情等）因为淘宝商品类型太多了，如果采用native方式来做不现实。当然后面的下单，交易还是native的界面。

厂商（以苹果为代表）不推崇这样的做法，理由是本身来说，体验不好，web页面发展壮大了，跟手机自身native特性就渐行渐远。

也就电商这样做的多。别的分类没这样明显

——————————欢迎下载我们最新的app版本，有全新的拍照体验，极大提升您的逼格：

http://www.myfunapp.cn/active/download.html (二维码自动识别)

毫无疑问淘宝是 hybrid App

但是有一个比较不一样的点，里面除了H5页面，还包含了很多小程序。做到了加载速度、权限获取等方面明显优于H5。

放一个页面大家就知道了，这是首页的充值中心入口点进去的页面，点击后的反应流畅度明显高于其他的H5页面。

不光是淘宝，微信、百度、京东等App都是将小程序用到了自己的混合开发中，其背后的原理分析如下：

如果用小程序和我们更常接触和使用的“H5 移动应用”与“移动原生应用”作比较，我们会发现小程序又具有非常明显的几大优势。

• 具备跨平台的能力，一套代码可以在 iOS 与 Android 等多个平台中运行；
• 远超过 H5 的体验（支持本地缓存，Webview，有丰富的组件与支持库）；
• 能获取更多系统权限，完成更加丰富的产品设计；
• 可以避免 DOM 泄露（不使用常用的 window 对象与 document 对象）；
• 包尺寸有效减少，节省流量和存储；
• 服务不再受发版所限制，支持热更新。

如果我们自己的App也去运行小程序能不能实现呢？

其实当前市面上有成熟的 小程序容器技术 FinClip ，主要以非入侵性的方式把 FinClip SDK 嵌入到现有的 App，让App 具备小程序运行能力，从而转变为「原生+小程序」的混合开发模式，与此同时实现快速的迭代能力、强有效的连接能力、多点触达用户的多端能力。

整个集成的过程就不复述了，文档介绍的非常清楚，包括iOS、Android、Flutter、React Native、Uni-app的操作指引都有：

淘宝App属于混合App，它承载了native+H5 和Native+小程序 的架构模式。

什么是Hybrid App

Hybrid app从外观上来看是一个native app，实则只有一个UIWebView，里面访问的是一个web app，如新闻类和视频类的应用普遍采取该策略：native的框架加上web的内容。不同于native app需要针对不同的平台使用不同的开发语言（如使用Objective-C、Swift开发iOS应用，使用Java等开发Android应用，使用C#开发Windows Phone应用），hybrid app允许开发者仅使用一套网页语言代码（HTML5+CSS+JavaScript），即可开发能够在不同平台上部署的类原生应用 。由于hybrid app结合了native app良好用户交互体验和web app跨平台开发的优势，能够显著节省移动应用开发的时间和成本，hybrid app得到越来越多公司的青睐。

为什么选择Hybrid App模式

1、信息化安全的需求 　混合APP就可以实现动态权限绑定和授权模式，能够支持在特定的设备、特定的人之间选择不同的子应用，并且能够随着用户工作内容随时调整。所以能够满足企业对于安全性的需求。

2、业务灵活性的需求 　以往因为企业产品需求调整，用户必须更新一个新的版本或重新下载APP才能实现其功能。混合APP开发技术能够让用户在打开APP时就能获得全新的服务和功能，实现了业务的灵活性需求。

3、开发速度的需求 　因为混合APP只需要编写一套代码，可以同步生成Android和IOS两个平台的APP，甚至能够部分兼容微信公众号和小程序。这样节省的不仅仅是写代码的时间，更重要的是节省了多个技术团队之间跨知识结构协同的问题，同时也节省了APP与服务器端调试的时间成本。

重磅利好：小程序容器技术加入到混合App开发主流队列

「Native+H5」和「Native+小程序」两种混合式APP开发模式相比之下，「Native+小程序」的开发模式更优。

应用优势：

从2017年微信首次推出小程序开始，经过四年发展，各大互联网巨头纷纷推出自己的小程序应用平台，小程序成为真正意义上的“互联网新技术标准”。截至2021年上半年，全网小程序数量突破700万个，其中，微信小程序是行业主流，数量超过430万个，占比高达约61.43%。

借着微信的红利，将已有微信小程序一键转换成App，并进行用户活跃和留存，加上社交平台应用作为引流，企业可谓低成本（只需有小程序）的将业务覆盖用户整个生命周期。

技术优势：

• 具备跨平台的能力，一套代码可以在 iOS 与 Android 两个平台中运行；
• 远超过 H5 的体验（支持本地缓存，Webview，有丰富的组件与支持库）；
• 能获取更多系统权限，完成更加丰富的产品设计；
• 可以避免 DOM 泄露（不使用常用的 window 对象与 document 对象）；
• 包尺寸有效减少，节省流量和存储
• 服务不再受发版所限制，支持热更新

为什么说小程序是混合App开发的重磅利好？试想一下，只需要编写一套小程序代码，便可以低成本同步生成Android和IOS两个平台的APP，PLUS 无缝连接微信公众号和小程序，真正实现从移动端“跨端运行”，升级到“全端运行”。

新生物种：以小程序为载体的企业轻应用方案

虽然互联网大厂并未将这部分小程序运行能力技术开放出来，但是我们也不必望而生羡，市面上早就推出了类似的技术能力，我们一般称之为小程序容器技术。

今天要给大家分享的也正是目前很热门的前端容器技术 —— FinClip 。

一句话介绍 FinClip ：可以让小程序脱离微信环境最快运行在自有APP中

只需简单集成 FinClip SDK , 即可在 iPhone、Android、Windows、Linux、macOS、统信等平台下的应用中运行你的小程序。

这意味着，移动端、PC 端、车载设备、智能电视、智能手表、智能家居都能运行小程序了。

而且 FinClip SDK 极其轻量，应用在集成后安装包的体积仅仅增大了不到 3MB。

最后简单总结一下 FinClip 可以帮助企业/开发者实现什么：

• 促进连接。只要把FinClip SDK嵌入到自己的App中，马上获得小程序运行能力。小程序已经在互联网上被充分证明是一个非常有效的促进连接的技术形态。
• 动态更新。借助 FinClip 将应用中业务功能均以小程序形式替代，功能模块互相解耦，实现模块化开发，极大的提升开发效率，降低开发成本。
• 多端支持。同一个业务场景，小程序化之后，可以展现在手机端、也可以运行在PC端、更可以出现在智能电视和车载大屏上，多端同步、转发分享、一致体验，甚至可以无缝对接至互联网公共平台，代码只写一次，多处运行。
• 生态共建。让开发者、企业拥有自己的小程序应用商店，在这里可以实现与合作伙伴的资源整合 - 例如让合作伙伴把数字服务以小程序方式上架、投放到自己的App中。

一个字：是

混合应用（Hybrid App）是一种结合了原生应用（Native App）和Web应用（Web App）特点的应用程序开发方法。其核心技术有结合原生和Web技术、跨平台兼容性、访问原生功能、在线和离线功能等等。
总之，混合应用的核心在于将Web技术和原生应用能力结合起来，从而在跨平台开发和快速迭代方面提供了灵活性，但也要权衡性能和用户体验方面的折衷。

不过既然说到 Hybrid App 的核心在于使用 WebView 来实现业务功能的对外展示，那有浏览器也必然存在大大小小的毛病，至少说和原生页面的体验会有较为明显的差异。
那是否有方式能够缩小（或者说一定程度上弥补）和原生的性能差距呢？这也是今天希望进行探讨的。
提升加载速度
体验过 Hybrid App 的都知道，最烦人的就是长时间的白屏加载，背后的原因就是页面加载速度过慢造成的，所以我第一个关注点就是加载速度。
在 Hybrid App 中，一般是可以通过减少 HTTP 请求、压缩文件、使用缓存等方法来提升加载速度。
1、减少HTTP数量
我主要想分享两个办法，一是可以将多个小的 JavaScript 或 CSS 文件合并为一个文件，从而实现减少请求的数量的目的，但也要注意合并文件时，需要平衡文件的大小和并发请求的数量。第二个办法是对于多个 icon 或图片，将它们合并到一个雪碧图（Sprite Sheets）中，然后使用 CSS 的 background-position 属性来显示不同的图标，这个办法也可以在一定程度上减少多个图标的 HTTP 请求。
2、压缩文件大小
在 Hybrid App 中可以通过使用 ImageOptim、UglifyJS 等压缩工具减少压缩文件的大小，当然也可以在服务器端启用 Gzip 和 Brotli 进行压缩，这也能够将在传输过程中的资源文件进行压缩，从而减少网络传输量。

3、设置缓存策略
我们可以设置合理的缓存策略，缓存策略比较多：浏览器缓存、服务端缓存、本地缓存、缓存清除、缓存优先级等都可以作为我们的缓存策略，这里以浏览器的缓存机制为例，我们可以将一些常用的文件存储在用户的设备上，从而减少网络请求提升加载速度。
优化 JavaScript 性能
JavaScript 是 Hybrid App 中最主要的执行环境，因此 JavaScript 的性能也直接影响到整个 App 的性能。

对于 JavaScript 的性能优化，我主要想到的是2个点：
1、减少 DOM 操作
应该大家都知道频繁的 DOM 操作会引起重排 reflow 和重绘 repaint ，自然而然的也会影响 App 的性能，这里推荐批量更新和离线 DOM 来减少操作次数。
批量更新顾名思义就是将多次 DOM 操作合并为一次，再通过一次性更新多个元素，达到减少重排和重绘的效果。一般可以使用 Fragment 文档片段 来批量添加多个元素，然后一次性插入到 DOM 中。
另外还可以试试离线 DOM 操作，在 DOM 外部进行修改再将修改的部分一次性添加到 DOM，主要可以通过使用字符串拼接、模板引擎、虚拟 DOM 等方式来实现。
2、避免内存泄漏
另外还有一个比较重要且需要注意的是 JavaScript 的内存管理，在整个管理环节避免内存泄漏的问题出现，我们除了可以使用工具来监控内存使用情况，还有一些使用的技巧需要注意。例如减少全局变量的使用、手动解除引用 null 、避免循环使用引用等。
写在后面
当然 Hybrid App 性能优化是一个比较复杂的过程，可以实践的途径还有其他的角度，像是 WebView 优化是一个非常重要的部分，也是一个值得后续详细展开细讲的部分，这篇文章就先不对 WebView 优化做过多的介绍了。
另外需要说明一点随着小程序容器技术的持续推动，新的移动混合应用方式「Native+小程序」也开始受到关注，其实技术原理就是以非入侵性的方式把 FinClip SDK嵌入到现有的 App，让App 具备小程序运行能力，从而转变为「Native+小程序」的混合开发模式，这个模式的使用体验会明显的好于「Native + HTML5」。
这个模式也是符合用户越来越重视各个产品使用体验的趋势，「原生+小程序」更优质的混合开发模式也会更多的受到开发者的关注和认可。

其实是为了快速迭代，放弃了native的流畅，所以大陆使用h5

可以这么理解。

关于Hybrid，我有一个疑问

如果用webview，访问另一个网站，也算Hybrid App吗？