加载时长统计调研

测试环境

测试设备：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

客户端实现方案

时序图


资源下载时序图说明：

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