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

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阶段有哪些子阶段的耗时相差比较大。接着看下面的图:

由上图可知,DomLoading到DomInteractive阶段和 DomComtentLoadedEnd和DomComplete阶段的耗时差比较大。
DomComtentLoadedEnd这个时机页面已经展示给用户了,所以这个阶段先忽略。
重点看一下,DomLoading到DomInteractive这个阶段。
domLoading:浏览器开始解析网页DOM结构的时间。
domInteractive:网页dom树创建完成,开始加载内嵌资源的时间。
由此可见,从domLoading到domInteractive阶段浏览器会解析网页Dom
客户端实现方案
时序图

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

用户交互时序图说明
- 用户通过url访问Web资源
- 查看本地缓存(需要判断本地资源是否为最新版本)
- 返回缓存检查结果
- 如果检查未通过,则从服务端获取资源
- 返回html资源(js、css等需要再一次向服务端索要资源)
- Ajax请求
- 返回请求结果,并渲染
- 如果缓存检查通过,则向缓存请求本地资源
- 返回本地资源地址
- 通过native网络库(jsBridge)进行网络请求(这个带来的好处会很多,当native网络库进行优化时,h5中也会享受到相应的优化)
- 返回请求数据,并渲染
- 展示给用户
性能提升预期:
wifi: 提升很少
wifi(弱网):60倍
4G:4倍
4G(弱网):90倍
功能模块
- 下载管理器
- 下载任务队列管理
- 断点续传
- 缓存管理器
- 内存缓存
- 磁盘缓存
- 内存和磁盘缓存之间的协调
- 版本管理器
- 版本管理
- 日志
- 日志收集
- 日志分发
- 日志上报
- 调试器
- 调试UI
- 缓存操作
- 日志显示
- 其他
- AjaxBridge