H5离线包调研方案

加载时长统计调研

测试环境

测试设备:iPhoneX
wifi环境:公司guest
4G环境:中国联通
计时标准:从开始加载加载并渲染结束(不包含Ajax的加载时间,不包含下载包、解压包的时间)
以下是各阶段的统计字段(基于 window.performance.timing)
HTML性能统计

navigationStart:浏览器处理当前网页的启动时间
fetchStart:浏览器发起http请求读取文档的毫秒时间戳。
domainLookupStart:域名查询开始时的时间戳。
domainLookupEnd:域名查询结束时的时间戳。
connectStart:http请求开始向服务器发送的时间戳。
connectEnd:浏览器与服务器连接建立(握手和认证过程结束)的毫秒时间戳。
requestStart:浏览器向服务器发出http请求时的时间戳。或者开始读取本地缓存时。
responseStart:浏览器从服务器(或读取本地缓存)收到第一个字节时的时间戳。
responseEnd:浏览器从服务器收到最后一个字节时的毫秒时间戳。
domLoading:浏览器开始解析网页DOM结构的时间。
domInteractive:网页dom树创建完成,开始加载内嵌资源的时间。
domContentLoadedEventStart:网页DOMContentLoaded事件发生时的时间戳。
domContentLoadedEventEnd:网页所有需要执行的脚本执行完成时的时间,domReady的时间。
domComplete:网页dom结构生成时的时间戳。
loadEventStart:当前网页load事件的回调函数开始执行的时间戳。
loadEventEnd:当前网页load事件的回调函数结束运行时的时间戳。

以下是基于福佑加油统计的各个阶段和各个环境的耗时状况:
各个阶段时间耗时
白屏时间是domContentLoadedEventEnd和fetchStart的差值,与实际用户体验的时间基本一致。
domContentLoadedEventEnd是Processing的一个子阶段。
DNS解析和TCP连接为0是因为iOS系统会有缓存,不太理想的情况(也就是不存在DNS缓存)的情况下,http的加载时间会更长。(流畅网络状态下DNS解析时间为50ms左右)
由上图可知,同样的网络,本地与http访问processing的时间相差不大,但是白屏的时间相差就大得很多,那我们看一下,Processing阶段有哪些子阶段的耗时相差比较大。接着看下面的图:

Processing阶段耗时

由上图可知,DomLoading到DomInteractive阶段和 DomComtentLoadedEnd和DomComplete阶段的耗时差比较大。
DomComtentLoadedEnd这个时机页面已经展示给用户了,所以这个阶段先忽略。

重点看一下,DomLoading到DomInteractive这个阶段。

domLoading:浏览器开始解析网页DOM结构的时间。
domInteractive:网页dom树创建完成,开始加载内嵌资源的时间。

由此可见,从domLoading到domInteractive阶段浏览器会解析网页Dom

客户端实现方案

时序图

Model!资源下载时序图!Interaction1!资源下载时序图_0
资源下载时序图说明:

  1. App启动的同时启动下载器。
  2. 请求包的更新信息(第一次打开时,全量下发)。
  3. 服务器返回包信息(版本号、zip下载链接,hash值, 项目domain),这里说明一下domain,现在是以一个domain匹配一个项目,需要考虑这种方案是否会阻碍日后的优化和维护。
  4. 包信息校验,如果接口有增量检测的功能,这一步骤可以忽略。
  5. 下载zip包(断点续传,节省下载时间和资源成本)。
  6. 下载完成后,与第3步返回的hash值进行校验(防劫持)。
  7. 校验通过后,将包信息单独存储为一个文件,将资源保存到对应的domain路径下。

用户交互时序图

用户交互时序图说明

  1. 用户通过url访问Web资源
  2. 查看本地缓存(需要判断本地资源是否为最新版本)
  3. 返回缓存检查结果
  4. 如果检查未通过,则从服务端获取资源
  5. 返回html资源(js、css等需要再一次向服务端索要资源)
  6. Ajax请求
  7. 返回请求结果,并渲染
  8. 如果缓存检查通过,则向缓存请求本地资源
  9. 返回本地资源地址
  10. 通过native网络库(jsBridge)进行网络请求(这个带来的好处会很多,当native网络库进行优化时,h5中也会享受到相应的优化)
  11. 返回请求数据,并渲染
  12. 展示给用户

性能提升预期:
wifi: 提升很少
wifi(弱网):60倍
4G:4倍
4G(弱网):90倍

功能模块

  1. 下载管理器
    • 下载任务队列管理
    • 断点续传
  2. 缓存管理器
    • 内存缓存
    • 磁盘缓存
    • 内存和磁盘缓存之间的协调
  3. 版本管理器
    • 版本管理
  4. 日志
    • 日志收集
    • 日志分发
    • 日志上报
  5. 调试器
    • 调试UI
    • 缓存操作
    • 日志显示
  6. 其他
    • AjaxBridge
You Might Also Like
发表评论