性能數(shù)據(jù)了解
? ? ?分析移動(dòng)端H5性能數(shù)據(jù)轻黑，首先我們說(shuō)說(shuō)是哪些性能數(shù)據(jù)。白屏?xí)r間琴昆，白屏?xí)r間無(wú)論安卓還是iOS在加載網(wǎng)頁(yè)的時(shí)候都會(huì)存在的問(wèn)題氓鄙，也是目前無(wú)法解決的；頁(yè)面耗時(shí)业舍，頁(yè)面耗時(shí)指的是開(kāi)始加載這個(gè)網(wǎng)頁(yè)到整個(gè)頁(yè)面load完成即渲染完成的時(shí)間玖详；還有加載鏈接的一些性能數(shù)據(jù)把介，重定向時(shí)間，DNS解析時(shí)間蟋座，TCP鏈接時(shí)間拗踢，request請(qǐng)求時(shí)間，response響應(yīng)時(shí)間向臀，dom節(jié)點(diǎn)解析時(shí)間巢墅，page渲染時(shí)間，同時(shí)我們還需要抓取資源時(shí)序數(shù)據(jù)券膀，什么是資源時(shí)序數(shù)據(jù)呢君纫？每個(gè)網(wǎng)頁(yè)是有很多個(gè)資源組成的，有.js芹彬、.png蓄髓、.css、.script等等舒帮，我們就需要將這些每個(gè)資源鏈接的耗時(shí)拿到会喝，是什么類型的資源，完整鏈接玩郊；對(duì)于客戶來(lái)說(shuō)有了這些還不夠肢执，還需要JS錯(cuò)誤，頁(yè)面的ajax請(qǐng)求译红。JS錯(cuò)誤獲取的當(dāng)然是堆棧信息和錯(cuò)誤類型预茄。ajax請(qǐng)求一般是獲取三個(gè)時(shí)間，響應(yīng)時(shí)間侦厚，ajax下載時(shí)間耻陕，ajax回調(diào)時(shí)間。
? ? ? 上面分析的是能夠獲取到移動(dòng)端H5的性能數(shù)據(jù)刨沦，這些數(shù)據(jù)怎么得到就是接下來(lái)要講的了淮蜈。數(shù)據(jù)獲取是需要js來(lái)做的，都知道移動(dòng)端是通過(guò)webView來(lái)加載網(wǎng)頁(yè)的已卷，js里面能通過(guò)performance這個(gè)接口來(lái)從webView內(nèi)部api獲取上面的那些數(shù)據(jù)，js獲取的數(shù)據(jù)然后發(fā)給OC淳蔼；那JS怎么樣才能拿到這些數(shù)據(jù)呢侧蘸，這就是最關(guān)鍵的，OC代碼如何寫(xiě)才能讓JS獲取數(shù)據(jù)鹉梨。
代碼編寫(xiě)
有兩種方法可以得到數(shù)據(jù),先介紹用NSURLProtocol這個(gè)類獲取數(shù)據(jù)讳癌。
iOS的UIWebView加載網(wǎng)頁(yè)的時(shí)候會(huì)走進(jìn)NSURLProtocol這個(gè)類,所以我們就需要在這個(gè)類里面作文章了,我們先用UIWebView加載一個(gè)鏈接，例如百度等等,然后創(chuàng)建一個(gè)繼承NSURLProtocol的類存皂。
NSURLProtocol里面有很多方法晌坤，就不一一介紹了逢艘，有一個(gè)startLoading的方法,我們?cè)谶@個(gè)方法里面用NSURLConnection發(fā)送一個(gè)請(qǐng)求,設(shè)置代理,請(qǐng)求的request就是加載網(wǎng)頁(yè)的request，因?yàn)镹SURLProtocol有一個(gè)NSURLRequest的屬性骤菠。
- (instancetype)initWithRequest:(NSURLRequest*)request delegate:(id)delegate startImmediately:(BOOL)startImmediately
這個(gè)就是請(qǐng)求的方法它改。
- (void)connection:(NSURLConnection *)connection didReceiveData:(NSData *)data
通過(guò)NSURLConnection設(shè)置代理,就需要寫(xiě)出代理方法，在其中一個(gè)代理方法里面能獲得網(wǎng)頁(yè)的代碼商乎，這就是我們最關(guān)鍵的地方央拖，就是上面這個(gè)方法，將data用utf-8轉(zhuǎn)碼就會(huì)得到代碼鹉戚。
得到網(wǎng)頁(yè)的代碼有什么用呢鲜戒？熟悉網(wǎng)頁(yè)端代碼的都知道，網(wǎng)頁(yè)端的代碼都是由很多標(biāo)簽組成,我們先找到<head>這個(gè)標(biāo)簽抹凳，在下面插入一個(gè)<script>標(biāo)簽遏餐，里面放入js代碼,這個(gè)js代碼就是用來(lái)獲取上面介紹的性能數(shù)據(jù)。
- (void)URLProtocol:(NSURLProtocol *)protocol didLoadData:(NSData *)data;
上面會(huì)用到很多這個(gè)方法,為什么要用這個(gè)呢赢底，因?yàn)槟阕⑷肓诵碌拇a失都，你需要將這個(gè)新的網(wǎng)頁(yè)代碼用這個(gè)方法加載一下,不然網(wǎng)頁(yè)會(huì)加載不出來(lái)的。
最后只需要將MonitorURLProtocol在appDelegate里面注冊(cè)一下就可以了颖系。
以上是通過(guò)NSURLProtocol這個(gè)類注入獲取數(shù)據(jù)的代碼,將JS代碼注入后就需要JS將數(shù)據(jù)發(fā)送給我們,可以通過(guò)交互這些方式嗅剖，接下來(lái)我就介紹一種直白的交互,大多數(shù)的交互也是這么做的，只不過(guò)封裝了,考慮的情況更多嘁扼，我就只是根據(jù)實(shí)際情況來(lái)做了信粮。
OC與JS交互獲取數(shù)據(jù)
交互都會(huì)有一個(gè)標(biāo)識(shí)，OC傳一個(gè)標(biāo)識(shí)給JS趁啸，JS通過(guò)標(biāo)識(shí)判斷强缘，發(fā)送給你想要的數(shù)據(jù)。我首先是通過(guò)運(yùn)行時(shí)動(dòng)態(tài)加載的方法將加載鏈接的三個(gè)方法給hook不傅，進(jìn)入同一個(gè)我定義的方法旅掂，然后在這個(gè)方法里面?zhèn)鳂?biāo)識(shí)給JS。
將標(biāo)識(shí)和block作為鍵值對(duì)存起來(lái)访娶，然后將JS將數(shù)據(jù)用url的形式發(fā)過(guò)來(lái)商虐，我們?nèi)〕鰜?lái)，匹配一下對(duì)應(yīng)相應(yīng)的標(biāo)識(shí),然后用block回調(diào)相應(yīng)的數(shù)據(jù),相應(yīng)的代碼這里就不貼了,最后我會(huì)給github上代碼的鏈接崖疤。接受url就是用UIWebView的代理方法秘车。
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;
{
? [WebViewTracker webView:webView withUrl:request.URL];
? return YES;
}
我們還可以在didFinishLoad里面手動(dòng)調(diào)用JS代碼來(lái)獲取獲取數(shù)據(jù),和NSURLProtocol結(jié)合起來(lái)用,各有各的優(yōu)缺點(diǎn),一個(gè)是在頂部注入代碼,一個(gè)是在尾部調(diào)用代碼，都是會(huì)丟失一部分?jǐn)?shù)據(jù)劫哼，所以最好的辦法就是結(jié)合起來(lái)用叮趴。
以上是自己獲取這些數(shù)據(jù),如果是做成SDK監(jiān)控APP獲取這些數(shù)據(jù)，就不一樣了权烧，需要去hookUIWebView的代理方法眯亦，hook靜態(tài)庫(kù)的方法和普通的運(yùn)行時(shí)加載是不一樣的伤溉，這個(gè)我可以在以后的文章里面介紹。
WKWebView
WKWebView是iOS8.0以后出來(lái)的妻率，目前使用的人還不是很多乱顾，但是這個(gè)比UIWebView性能方面好很多，從內(nèi)核到內(nèi)存優(yōu)化等等舌涨，但是由于還有iOS7以下的用戶糯耍，所以面使用的人不多，但是這個(gè)是趨勢(shì)囊嘉。WKWebView獲取上面的性能數(shù)據(jù)是一模一樣的温技，不同的是WKWebView不會(huì)走進(jìn)NSURLProtocol，所以實(shí)在didFinishLoad里面手動(dòng)調(diào)用扭粱，這里就不詳細(xì)說(shuō)了舵鳞，直接給代碼鏈接
說(shuō)了那么多，可能還不是很清楚,我把github代碼鏈接發(fā)在這里,覺(jué)得對(duì)你有用的話請(qǐng)給個(gè)星星琢蛤。
https://github.com/LonelyWise/WebViewMonitor
至于那些性能數(shù)據(jù)有什么用蜓堕，接下來(lái)我會(huì)介紹每個(gè)字段的意思及如何算才能得到DNS、TCP時(shí)間等等博其。
