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

标签: 前端开发 | 发表时间:2014-03-02 07: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架构首先应该考虑和设计的,往后所有的逻辑都是基于通讯层展开.

移动端 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的封装技术及调试方法.

移动端Hybrid应用与响应式

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

移动H5前端性能优化指南

- - 腾讯ISUX - 社交用户体验设计 - Better Experience Through Design
移动H5前端性能优化指南[托尼托尼研究所]. PC优化手段在Mobile侧同样适用. 在Mobile侧我们提出三秒种渲染完成首屏指标. 基于第二点,首屏加载3秒完成或使用Loading. 基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB. Mobile侧因手机配置原因,除加载外渲染速度也是优化重点.

如何做一个让人闻风丧胆的 H5

- - 腾讯ISUX - 社交用户体验设计 - Better Experience Through Design
最近火热的有声娱乐平台 APP,企鹅 FM,在8月28日鬼节前夕,联合《盗墓笔记》推出了“勇敢者的游戏”活动. 作为一个 UI 工程师,在这个移动互联网叱咤风云的时代,每次看到朋友圈中被分享的各种花样 H5 页面,总是心痒难耐,也想做有着酷炫动画和带感声效的 H5 呢. 回想到做鬼节活动页的时候,接近午夜零点还在调整页面效果,看着页面上渐隐渐现的可怕画面,活生生吓到了自己,也是蛮难忘的.

h5调用底层接口的一些知识

- - 神刀安全网
     前端时间使用HTML5做了一个WEB端APP,其中用到了H5页面调用手机摄像头的功能,当时也是花了不少时间去研究. 最终是采用了HTML5plus(HTML5+)的方式完成了该功能,现将具体方法简单介绍下,并讲解下使用的注意事项. 放在服务器上然后浏览就可以了,只支持Chrome和Safari核的浏览器,QQ浏览器,Chrome,Safari浏览器都可以.

视频H5のVideo标签在微信里的坑和技巧

- - JDC | 京东设计中心
随着 4G 的普遍以及 WiFi 的广泛使用,手机上的网速已经足够稳定和高速,以视频为主的 HTML5 也越来越普遍了,相比帧动画,视频的表现更加丰富,前段时间开发了一个以视频为主的移动端 HTML5,在这里介绍一些实践经验. 我们希望视频播放时可以全屏播放,没有进度条、播放按钮等与系统相关的元素,可以在视频上方增加自定义的元素(比如一个跳过按钮),类型下面的效果:.

【转载】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开发》.