背景
討論 WKWebview 在加載 h5 頁(yè)面時(shí)羔味，Objective-C里的 WKNavigationDelegate、window.performance.timing胞皱、WKUserScriptInjectionTimeAtDocumentStart、WKUserScriptInjectionTimeAtDocumentEnd九妈，以及和前端最常用的document.readystate\domContentLoaded\document.onload 事件等時(shí)間維度的關(guān)系反砌，為native和前端在相互調(diào)用時(shí)，能夠明確溝通的時(shí)機(jī)萌朱。
圖解
普通的200請(qǐng)求宴树，注意先看圖例
本次數(shù)據(jù)采集的頁(yè)面是 https://mp.weixin.qq.com/s/X_WDv1-vqdXYcg0eLpMAhA，
?
?
帶有302跳轉(zhuǎn)的頁(yè)面
?
?
本次數(shù)據(jù)采集的頁(yè)面是 https://lq.163.com/platform/wap/entry?merchantCode=M32412338855&before_login=1
請(qǐng)求出錯(cuò)時(shí)的序列
本次數(shù)據(jù)采集的頁(yè)面是 https://hite.me晶疼，出錯(cuò)原因是因?yàn)樽C書不正確酒贬。
?
?
對(duì)比又憨，結(jié)論
1. 首先注意幾個(gè)等價(jià)事件。
- didStartProvisionalNavigation = navigationStart
- didCommitNavigation = domLoading = WKUserScriptInjectionTimeAtDocumentStart锭吨，此時(shí)剛剛開(kāi)始創(chuàng)建 DOM
- WKUserScriptInjectionTimeAtDocumentEnd = domContentLoade = document.readystate = interactive竟块，此時(shí) CSSOM 和 DOM 都已經(jīng)構(gòu)建完畢，等待圖片資源等下載
- didFinishNavigation = domComplete = document.onload耐齐，注意此時(shí)進(jìn)度條才結(jié)束
- decidePolicyForNavigationResponse 在 transfer-encoding =chunked 的情況下，不等價(jià)于 responseEnd
2. 注意使用estimatedProgress來(lái)顯示進(jìn)度條的方案有缺陷蒋情。
0%不是從 LoadRequest 開(kāi)始的埠况，甚至不是從 didStartProvisionalNavigation 開(kāi)始。所以一個(gè)符合用戶視角的進(jìn)度條應(yīng)該自己寫 timer 來(lái)顯示進(jìn)度棵癣。從 decidePolicyForNavigationResponse 開(kāi)始顯示進(jìn)度會(huì)有很長(zhǎng)時(shí)間的空白和無(wú)進(jìn)度條階段辕翰，從這次用例來(lái)看大概 1s 的空白時(shí)間。
3. 白屏?xí)r間
從loadRequest 到 decidePolicyForNavigationAction之間的白屏?xí)r間耗時(shí)狈谊，使用預(yù)加載也無(wú)法消除喜命，目前我沒(méi)有找到很好的方法來(lái)縮短這500多毫秒的耗時(shí)，如有有讀者有更好的方法希望告知下
4.關(guān)于 TTFB 的起始時(shí)間
我這里計(jì)算的TTFB和web上的TTFB 不一樣河劝，我認(rèn)為在WKWebview里起始時(shí)間應(yīng)在 decidePolicyForNavigationAction壁榕，而不是 responseStart，以 decidePolicyForNavigationAction更符合用戶視角赎瞎，我對(duì)TTFB的改動(dòng)和下面一條理念是一樣的牌里。
5.關(guān)于FP、FMP（first-meaniful-paint）
Safari和Chrome都實(shí)現(xiàn)了performance.timing接口但是Chrome更詳細(xì)一些务甥。對(duì)用戶而言FMP才是最重要的牡辽。詳見(jiàn)參考鏈接
6.使用CSP，無(wú)法阻止 WKUserScriptInjectionTimeAtDocumentStart的注入腳本執(zhí)行
所有的測(cè)試代碼和都在我即將發(fā)布的一個(gè)JSBridge框架里敞临，大概在月底可以發(fā)布到 github 上态辛，歡迎大家提意見(jiàn)。
參考
- http://kaaes.github.io/timing/info.html
- https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics#user-centric_performance_metrics
- https://w3c.github.io/paint-timing/
- https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver/PerformanceObserver#Example
- https://en.wikipedia.org/wiki/Time_to_first_byte
- https://www.w3.org/TR/navigation-timing-2/#processing-model
- https://github.com/micmro/performance-bookmarklet
