WKWebview 加载过程中的性能指标图解

背景

讨论 WKWebview 在加载 h5 页面时，Objective-C里的 WKNavigationDelegate、window.performance.timing、WKUserScriptInjectionTimeAtDocumentStart、WKUserScriptInjectionTimeAtDocumentEnd，以及和前端最常用的document.readystate\domContentLoaded\document.onload 事件等时间维度的关系，为native和前端在相互调用时，能够明确沟通的时机。

图解

普通的200请求，注意先看图例

本次数据采集的页面是 https://mp.weixin.qq.com/s/X_WDv1-vqdXYcg0eLpMAhA，

​

Artboard 200.png

​

带有302跳转的页面

​

Artboard 302.png

​

本次数据采集的页面是 https://lq.163.com/platform/wap/entry?merchantCode=M32412338855&before_login=1

请求出错时的序列

本次数据采集的页面是 https://hite.me，出错原因是因为证书不正确。

​

Artboard error.png

​

对比，结论

1. 首先注意几个等价事件。

1. didStartProvisionalNavigation = navigationStart
2. didCommitNavigation = domLoading = WKUserScriptInjectionTimeAtDocumentStart，此时刚刚开始创建 DOM
3. WKUserScriptInjectionTimeAtDocumentEnd = domContentLoade = document.readystate = interactive，此时 CSSOM 和 DOM 都已经构建完毕，等待图片资源等下载
4. didFinishNavigation = domComplete = document.onload，注意此时进度条才结束
5. decidePolicyForNavigationResponse 在 transfer-encoding =chunked 的情况下，不等价于 responseEnd

2. 注意使用estimatedProgress来显示进度条的方案有缺陷。

0%不是从 LoadRequest 开始的，甚至不是从 didStartProvisionalNavigation 开始。所以一个符合用户视角的进度条应该自己写 timer 来显示进度。从 decidePolicyForNavigationResponse 开始显示进度会有很长时间的空白和无进度条阶段，从这次用例来看大概 1s 的空白时间。

3. 白屏时间

从loadRequest 到 decidePolicyForNavigationAction之间的白屏时间耗时，使用预加载也无法消除，目前我没有找到很好的方法来缩短这500多毫秒的耗时，如有有读者有更好的方法希望告知下

4.关于 TTFB 的起始时间

我这里计算的TTFB和web上的TTFB 不一样，我认为在WKWebview里起始时间应在 decidePolicyForNavigationAction，而不是 responseStart，以 decidePolicyForNavigationAction更符合用户视角，我对TTFB的改动和下面一条理念是一样的。

5.关于FP、FMP（first-meaniful-paint）

Safari和Chrome都实现了performance.timing接口但是Chrome更详细一些。对用户而言FMP才是最重要的。详见参考链接

6.使用CSP，无法阻止 WKUserScriptInjectionTimeAtDocumentStart的注入脚本执行

所有的测试代码和都在我即将发布的一个JSBridge框架里，大概在月底可以发布到 github 上，欢迎大家提意见。

参考

1. http://kaaes.github.io/timing/info.html
2. https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics#user-centric_performance_metrics
3. https://w3c.github.io/paint-timing/
4. https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver/PerformanceObserver#Example
5. https://en.wikipedia.org/wiki/Time_to_first_byte
6. https://www.w3.org/TR/navigation-timing-2/#processing-model
7. https://github.com/micmro/performance-bookmarklet