Hybrid 架构下的 H5 应用加速方案

标签: 前端开发 | 发表时间:2014-03-02 15:14 | 作者:石破(王涛)
出处:http://www.aliued.cn

在移动 App 开发领域,主流的开发模式可分为 Native、Hybrid、WebApp 三种方式。然而 2013 年,纯 WebApp 开发模式的发展受到一定挫折,以 Facebook 为代表的独立 App 转投 Native 阵营。但是开发者对 WebApp 更新速度快,跨平台优势的渴望却并未减弱,最终的结果是促成了 Hybrid App 在 2013 年数量的激增,并且增长的速率非常之快。 简单的说,Hybrid App是 Native App 和 Mobile Web 二者混合开发的产物,HTML5  的页面被嵌入到 Natvie App 的 webview 中。因此它综合了更新速度快,交互体验好,跨平台等优点。

本文分享的就是 HTML5 页面(尤其是被嵌入的 H5 应用) 借助 Hybrid 架构来提升自己的加载速度和性能的一种解决方案。该方案要求你对 Hybrid App 进行以下三步骤的改造:

一:模块化你的 H5 页面/ 应用,引入模块加载器(可选)

模块加载器不必多说,SeaJS、requireJS、kissy loader 等耳熟能详,任你挑选。使用模块化的方式来开发你的应用,不仅仅将有利于后期的代码维护,在 Hrbrid 的架构中,还将会有利于性能的提升。

或许你有疑问:模块开发粒度越细化,加载时请求的JS、CSS等静态资源的数量越多,页面的性能不会越差吗?我的回答是:如果你仅仅是使用了模块加载器并异步加载各个模块,那么加载的性能一定很差,因为请求的数量太多。当然你肯定会想到在发布前打包合并静态资源,那么对这样的解决方案我只能给到 50 分,因为被打包合并的文件中只要有一个子文件发生变化,那么整个文件(JS或CSS)都要被重新下载,对移动带宽而言还是个负担。

怎么破?请继续进行步骤二:

二:启用 AppCache ,并引入增量更新机制

        做过 WebApp 的同学应该会了解  mainfest 文件,Html5提供的应用缓存功能,开发者只要把需被缓存的静态资源文件名罗列在这个列表中即可保证二次访问时无需重新加载。看起来不错!这样前面说的模块化开发造成的请求数量过多的问题,至少在二次访问时不会再发生了。嗯,这样的方案可以给到 70 分吧。其实,Html5 提供的 mainfest 缓存机制有个比较大的问题(兼容性就先不提了):如果 mainfest 列表中的一个资源文件需要更新,那么整个 mainfest 中的其它文件也都需要被重新下载一遍。 也即是说二次访问没有问题了,但是 Html5 应用更新时还是会出现全量下载的问题。

        别忘了,我们是 Hybrid App,还可以充分利用 Native 层的强大能力,所以抛弃mainfest吧,让 Native 来帮助 Html5 应用缓存静态资源文件。总体思路是:

1、Html5 应用首次启动时,调用 Native 提供的加载资源文件专用的 Device API 来请求所需的资源文件,由 Native 层发出真正的资源请求,并将请求结果缓存在手机的SD卡上。当然,这里完全可以优化为一次 zip 包请求,因为 native 能够提供强大的解压能力。

2、H5 应用再次启动时,所有的静态资源都是通过 Device API 读取本地缓存,无需再走网络。

3、H5 应用出现静态资源更新时,在应用启动时首先通过 Device API 加载 需要更新的文件,并更新本地缓存,其它未变更文件继续走缓存。

 

        流程看起来挺顺,其中有几个关键问题需要解决:

 1、如何通过 Device API 加载资源文件?

这里使用模块加载器的优势就体现出来了,只需要在加载器中做点小修改,不直接走Http请求了,而直接调用 Native 提供的文件加载 DeviceAPI 即可。 如果你没有模块加载器,就需要写统一的函数来做加载资源的功能了。

其实 Native 也提供了拦截机制,能够拦截到 H5 应用发出的所有 Http 请求并进行自定义处理,可惜这样好的功能在 Andorid 4.0 以下版本不支持。 故现阶段还是主动调用 Device API 更靠谱。

 2、如何知道需要进行资源的更新?

            每次静态资源发布都会产生一个唯一的发布时间戳(或是所有资源内容的MD5编码),H5应用启动后,可将当前时间戳保存下来,等应用下次启动时,请求最新的发布时间戳并与本地时间戳进行对比,若不同,则首先进行静态资源的增量更新。

 3、如何判断哪些是需要被增量更新替代的资源文件?

这个问题的回答会比较复杂些,核心思路是通过对前后两次资源文件(js、css、image等)发布的内容对比完成:

如此,H5 应用借助 Native 应用的能力完成了资源的缓存与增量更新,可以保证 H5 应用在启动与更新时的加载速度。当然也有方案借助 HTML5 的 localstorage 来替代 Native 的缓存更新策略,但是会收到两点限制:

1、若 Hybrid App 比较复杂,涉及多个子域甚至主域的静态资源共享,则 localstorage 的方案在存储空间上有上限,是5M。

2、Native 能够支持更新包的 zip 打包下载,一次请求,并解压覆盖本地缓存。 localstorage 无法实现。

若应用可以忽略以上两点,使用 localstorage 缓存的策略完全 ok。

 

三:启用 spdy 协议

spdy 协议在移动开发上大有可为,它是HTTP协议的增强版本,能够通过一次TCP链接同时请求到多个资源文件,请求速度上的提升那是自然的了,非常强大!chrome 等 webkit 内核浏览器都已经支持。 可惜若是借助浏览器自身使用 spdy 协议则要求静态资源文件(js、css、image)必须是 https 的域名服务,且部署了支持 spdy 协议的 后台server。相信大多数静态服务器都还是http 服务,是无法通过浏览器来直接支持的。

还是那句话,因为我们是 hybrid 应用,可以发挥native的优势! native 层完全可以实现基于 spdy 协议请求的 device API,供 H5 应用(JS)来调用。这样就不需要 https 域名服务器也能使用 spdy了。

如果你的 Hybrid 应用已经支持了 spdy 协议,那么你可以考虑不再需要把增量更新的资源文件打包成 zip 下载了,直接 spdy 协议并行下载即可!

 

SPDY 与 HTTP 协议速度对比:

总结:

本文提供了一种基于 Hybrid 架构的 H5 应用加载性能优化方案,如有疑问及建议,欢迎探讨在 我的博客中探讨。

相关 [hybrid 架构 h5] 推荐:

Hybrid 架构下的 H5 应用加速方案

- - 阿里巴巴(中国站)用户体验设计部博客
在移动 App 开发领域,主流的开发模式可分为 Native、Hybrid、WebApp 三种方式. 然而 2013 年,纯 WebApp 开发模式的发展受到一定挫折,以 Facebook 为代表的独立 App 转投 Native 阵营. 但是开发者对 WebApp 更新速度快,跨平台优势的渴望却并未减弱,最终的结果是促成了 Hybrid App 在 2013 年数量的激增,并且增长的速率非常之快.

Hybrid APP架构设计思路

- - SegmentFault 最新的文章
关于Hybrid模式开发app的好处,网络上已有很多文章阐述了,这里不展开. 本文将从以下几个方面阐述Hybrid app架构设计的一些经验和思考. 原文及讨论请到 github issue. 作为一种跨语言开发模式,通讯层是Hybrid架构首先应该考虑和设计的,往后所有的逻辑都是基于通讯层展开.

使用 Fabric.js 玩转 H5 Canvas

- - V2EX - 技术
之前使用这个框架写过一个卡片 DIY 的项目,中间遇到很多问题都只能通过 google 或 github issues 才能解决,国内资料较少,所以才想写这篇文章来简单的做下总结,希望可以帮到其他人哈. 附上个人项目地址: vue-card-diy 欢迎 star~ ✨. 什么是 Fabric.js?.

移动端Hybrid应用与响应式

- - SegmentFault 最新的文章
前端是一个非常庞大和复杂的领域. 如果说多年前的前端只是需要学习几个 HTML 标签,看到别的网站用了狂拽酷炫的特效就 copy 下来,稍微懂点 jQuery 做日常使用,再了解几个 Prototype 和 MooTools(貌似都不再维护了)等高冷脱俗的库做装X用就能显得很“专家”了. 那么现在要还是持这样的想法,就不适合搞前端.

一个 Hybrid SDK 设计与实现

- - SegmentFault 最新的文章
随着移动浪潮的兴起,各种 App 层出不穷,极速发展的业务拓展提升了团队对开发效率的要求,这个时候纯粹使用 Native 开发技术成本难免会更高一点. 而 H5 的低成本、高效率、跨平台等特性马上被利用起来了,形成一种新的开发模式: Hybrid App. 作为一种混合开发的模式,Hybrid App 底层依赖于 Native 提供的容器(Webview),上层使用各种前端技术完成业务开发(现在三足鼎立的 Vue、React、Angular),底层透明化、上层多样化.

转转Hybrid-SDK重构和实践

- - 掘金 前端
转转的移动端开发体系主要是基于Hybrid方案,但长久以来Webview容器和SDK管理等存在标准不统一、更新不及时的问题. 随着转转/找靓机/采货侠等多环境开发场景越来越多,适配不同场景极大的影响了业务迭代效率. 所有我们决定重新规划SDK的建设. JSBridge 的双向通信原理. JSBridge 是一种 JS 实现的 Bridge,连接着桥两端的 Native 和 H5.

移动端 H5 图片压缩上传

- - IT瘾-dev
大体的思路是,部分API的兼容性请参照 caniuse:. 利用 FileReader,读取 blob对象,或者是 file对象,将图片转化为 data uri的形式. 使用 canvas,在页面上新建一个画布,利用 canvas提供的API,将图片画入这个画布当中. 利用 canvas.toDataURL(),进行图片的压缩,得到图片的 data uri的值.

H5与Native交互之JSBridge技术

- - SegmentFault 最新的文章
做过混合开发的很多人都知道Ionic和PhoneGap之类的框架,这些框架在web基础上包了一层Native,然后通过Bridge技术使得js可以调用视频、位置、音频等功能. 本文就是介绍这层Bridge的交互原理,通过阅读本文你可以了解到js与ios及android底层的通讯原理及JSBridge的封装技术及调试方法.

H5 移动调试全攻略

- - IT瘾-dev
随着移动设备的高速发展, H5开发也成为了 F2E不可或缺的能力. 而移动开发的重中之重就是掌握调试技巧,定 Bug于无形. 文章首发于 Jartto’s blog,转载请标明出处. 因为移动端操作系统分为 iOS和 Android两派,所以本文的调试技巧也会按照不同的系统来区分.

【转载】Hybrid App:借助HTML5、JavaScript和CSS3开发

- - HTML5研究小组
早在2011年10月9日Sam Gentile就在在开发Hybrid App,彼时他就写过这方面的一篇题目是《视口元标签和使用HTML5/CSS3/jQuery来构建移动界面》的博文,可以说Sam Gentile最早研究Hybrid App的开发者. 【51CTO独家译文】本文为开发者Sam Gentile的一篇博文《Hybrid App:借助HTML5、JavaScript和CSS3开发》.