如何打造一个高性能Hybrid App

   <p>引言：在多元化的今天，一个热门的移动app，或多或少都会有内在H5在其中。而对于一个有很多运营场景的app来说，这种情况更常见了。试想一下，如果在一个公司，存在很多native和H5同时需要开发的页面，为了节省开发成本，此时如果只开发H5，就需要考虑native的体验了，而这就是本文的目的， <strong>如何让native端拥有像加载本地页面一样的速度去加载H5</strong> 。</p>    <p>在app内加载H5速度慢一直是客户端开发的痛点，抛开H5的体验本身与native就有差距不说，如果加载速度还很慢，这将会对用户体验造成巨大影响。那么像做到像native页面一样瞬间加载完H5，思路就会变得比较清晰了-- <strong>提前在本地存储远程资源包</strong> 。</p>    <h2>方案选择</h2>    <p>从这个点出发，我们需要考虑，以怎样的形式来提前拿到资源包（css，js，html，通用的图片等），减少这些静态资源的网络请求，增加加载速度。无非就是一下两点：</p>    <p><strong>1.将资源包在app打包阶段直接植入</strong></p>    <p><strong>2.在运行时动态下载资源包</strong></p>    <p>单纯从业务层来说，如果你的业务够简单，其实第一种方式已经完全满足，每次需要新增页面就重新发版嘛，虽然显得有点愚笨，但是还是能满足的。</p>    <p>但是从长远的角度来说，我们要做到尽可能的动态化，动态化是客户端的热点，我们要做到尽量不依赖于版本更新来实现动态化。对于iOS来说，更新机制本身就非常缓慢，要通过app store的审核有时候还需要靠人品，更何况用户也不一定买账，他们不一定会更新我们的app。在这样的情况下，第二种方案就会显得更加友好。</p>    <h2>设计加载流程</h2>    <p>那么，该怎么设计一套完整的解决方案来满足运行时动态下载资源包呢。</p>    <p>抽出细节，大体上可以归结为下图所示的结构图：</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/5cf809e8ffc16bc31638d17d01c28477.png"></p>    <p style="text-align: center;">app与服务端交互</p>    <p>我来解释下这个图，我是建立在客户端已经实现socket层协议，所以能与server保持长连接以至于server能主动push数据的情况，实现这种协议蛮复杂的。实际上如果没有这个协议，那就需要client找时机主动去server请求（app启动时请求一次？或者是每隔一段时间请求一次，取决于你），本文以后者为例。</p>    <p>下面我来演示下一个完整的下载新资源包的过程：</p>    <p>1.运营小妹觉得某节日要到了，需要发布一个新的页面，然后在运营后台生成资源包，运营后台会自动更新config，其中包括资源包的version，是否强制关闭加载本地资源包（降级策略，防止这个组件本身有BUG），还有一些hotpatch脚本。并且将资源包根据里面的内容部署到remote database。</p>    <p>2.在合适的时机，client发起http请求向server查询是否有新版本的资源包，并带上本地的config。</p>    <p>3.server根据config里的选项，比对从client拿到的config，发现客户端是旧版本的config，OK，则下发新的config给client，并且发送从database里拿到的资源包（为了加快速度，可以部署到CDN）。</p>    <p>4.client拿到最新的资源包后，在本地进行解密，解压等操作，并映射成对应ULR相对于本地的local file url。比如：http://www.baidu.com这个网址下的静态资源文件在本地的的file://dsalkfjsldfjalsd/目录下。</p>    <p>至此，已经完成资源包的下载。</p>    <h2>拦截并加载本地资源包</h2>    <p>那么有了资源包后，怎么能让app像native页面的速度去加载H5呢。</p>    <p>其实原理就是对H5请求进行拦截，如果本地已经有对应的静态资源文件，则直接加载，这样就能达到“ <strong>秒开</strong> ”webview的效果。</p>    <p>对于iOS而言，这就需要用到NSURLProtocol这个神器了。接下来，分析下它到底是什么东西，我们怎么利用它达到上述效果。</p>    <p>NSURLProtocol能够让你去重新定义苹果的 URL加载系统 (URL Loading System)的行为，URL Loading System里有许多类用于处理URL请求，比如NSURL，NSURLRequest，NSURLConnection和NSURLSession等。当URL Loading System使用NSURLRequest去获取资源的时候，它会创建一个NSURLProtocol子类的实例，你不应该直接实例化一个NSURLProtocol，NSURLProtocol看起来像是一个协议，但其实这是一个类，而且必须使用该类的子类，并且需要被注册。                                       </p>    <p>--从网上拷贝的</p>    <p>换句话说，NSURLProtocol能拦截所有当前app下的网络请求，并且能自定义地进行处理。</p>    <p>废物不多说，上代码：</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/bf054dcf03ed843b46d48265c0ee9449.png"></p>    <p style="text-align: center;">NSURLProtocol的子类</p>    <p>这里只介绍与我们需求相关的NSURLProtocol方法。</p>    <p>搞了这么多，其实最核心的就是前四个方法：</p>    <p>+ (BOOL)canInitWithRequest:(NSURLRequest *)request</p>    <p>这个方法的作用是判断当前protocol是否要对这个request进行处理（所有的网络请求都会走到这里，所以我们只需要对我们产生的request进行处理即可）。</p>    <p>+ (NSURLRequest *)canonicalRequestForRequest:(NSURLRequest *)request</p>    <p>这个方法其实很强大，它可以对request进行预处理，比如对header加一些东西什么的，我们这里没什么要改的，所以直接返回request就好了。</p>    <p>- (void)startLoading</p>    <p>重点是这个方法，我们这里需要做一件事，就是自己拼装httpResponse，并且返回给url load system，然后到了webview那一层，会收到response，对于webview而言，加载本地和走网络拿到的response是完全一样的。所以上述代码展示了如何拼装一个httpResponse，当组装完成后，需要调用self.client将数据传出去。</p>    <p>何为self.client，这个东西其实就是protocol与url load system交互的一个对象，系统提供给我们的，这样理解就够了。</p>    <p>需要注意的是，细心的读者会看到else里会有一段代码：</p>    <p>[NSURLProtocol setProperty:@YES forKey:WDHybridResourceProtocolHandledKey inRequest:newRequest];</p>    <p>这个是干什么用的？else的作用是当本地不存在这个文件时，则主动重新发请求，此时又会调用canInitWithRequest，如果不设置flag，则会无限递归了。所以你懂得。</p>    <p>当然，重新发请求自然要实现NSURLConnectionDelegate。</p>    <h2>总结</h2>    <p>至此，如何快速加载H5已经全部介绍完毕。</p>    <p>附上前后加载速度对比：</p>    <p><img src="https://simg.open-open.com/show/4534792c32fa00d6d22d92601fc8a088.png"></p>    <p style="text-align: center;">加载速度对比</p>    <p> </p>    <p> </p>    <p>来自：http://www.jianshu.com/p/bf14ab437feb</p>    <p> </p>