轉(zhuǎn)載自: http://www.lxweimin.com/p/90a90bd13aac
開發(fā)App的過程中，常常會遇到在App內(nèi)部加載網(wǎng)頁，通常用UIWebView加載。而這個自iOS2.0開始使用的Web容器一直是開發(fā)的心病：加載速度慢，占用內(nèi)存多，優(yōu)化困難。如果加載網(wǎng)頁多，還可能因為過量占用內(nèi)存而給系統(tǒng)kill掉。各種優(yōu)化的方法效果也不那么明顯，常見的優(yōu)化緩存方式：
1、盡量使用 GET 請求，iOS 系統(tǒng) SDK 會自動幫你做緩存。你需要的僅僅是設(shè)置下內(nèi)存緩存大小、磁盤緩存大小、以及緩存路徑。只要設(shè)置了這兩行代碼，基本就可滿足80%的緩存需求。
設(shè)置緩存.jpg
2、Web資源離線加載，熱更新資源，完成另外20%的緩存需求（Hybrid框架的Web部分）。
可是無數(shù)開發(fā)者嘗試自己做一個“簡陋而脆弱的”系統(tǒng)來實現(xiàn)網(wǎng)絡(luò)緩存的功能，效果往往是事倍功半 。
UIWebView從 iOS2 就有，iOS8 以后，蘋果推出了新框架 WebKit，提供了替換 UIWebView 的組件 WKWebView。各種 UIWebView 的性能問題沒有了，速度更快了，占用內(nèi)存少了，體驗更好了，下面列舉一些其它的優(yōu)勢:
1、在性能、穩(wěn)定性、功能方面有很大提升（加載速度，內(nèi)存的提升誰用誰知道）
2、更多的支持 HTML5 的特性
3、官方宣稱的高達60fps的滾動刷新率以及內(nèi)置手勢
4、Safari 相同的 JavaScript 引擎
5、將 UIWebViewDelegate 與 UIWebView 拆分成了14類與3個協(xié)議，包含該更細節(jié)功能的實現(xiàn)。
相比之下，WKWebView 復(fù)雜得多，一些常用API如下：
WKWebView.jpg
JavaScript API.jpg
存儲類型.jpg
存儲 API.jpg
WKWebView loadRequest.jpg
WKNavigationDelegate.jpg
看完API以后，要掌握 WKWebView 并不難，難的是如何處理iOS版本碎片化兼容問題。
都說提高多么多么大的性能，實測告訴你 WKWebView 的性能有多好，下面用實際項目做個對比測試：
UIWebView 首次加載 www.58.com 首頁，耗時 0.0154584ms，內(nèi)存消耗 24.1 MB
UIWebView耗時.jpg
UIWebView內(nèi)存消耗.jpg
WKWebView 首次加載 www.58.com 首頁，耗時 0.013875ms，內(nèi)存消耗僅 6.4 MB
WKWebView耗時.jpg
WKWebView內(nèi)存消耗.jpg
結(jié)論：加載耗時差別不大，WKWebView 的內(nèi)存優(yōu)化減少了幾乎4倍，更重要的是，無論 WKWebView 跳轉(zhuǎn)多少 Web 頁面都沒有內(nèi)存泄漏了。WKWebView 使用和 Safari 相同的 Nitro JS 引擎性能，對HTML5性能也提升了4倍。
新技術(shù)的出現(xiàn)必然會或多或少的瑕疵，WKWebView 也不例外。
在 WKWebsiteDataStore 出現(xiàn)之前（iOS 9 中），WKWebView 是沒有緩存，也無從清理。WKWebView 是基于 WebKit 框架的，它會忽視先前使用的網(wǎng)絡(luò)存儲 NSURLCache, NSHTTPCookieStorage, NSCredentialStorage等，它也有自己的存儲空間用來存儲cookie和cache，其他的網(wǎng)絡(luò)類如NSURLConnection 是無法訪問到的。 同時WKWebView發(fā)起的資源請求也是不經(jīng)過NSURLProtocol的，導(dǎo)致無法攔截或自定義新請求。
體驗過 WKWebView 的一定會遇到修改了H5頁面，APP打開時卻沒有即時更新的問題（實在是緩存得太好了），iOS 8的時候只能增加時間戳的方式解決這個問題（調(diào)試下使用，生產(chǎn)環(huán)境就只能要求前端修改Cache-Controll了），如下：
時間戳更新.jpg
iOS 9以后終于可以使用 WKWebsiteDataStore 來清理緩存。后來Google一下，又發(fā)現(xiàn)iOS 8可以通過清理 Library 目錄下的 Cookies 目錄來清除緩存，于是
清除WKWebView緩存.jpg
緩存清理的坑趟過了，喜大普奔。
在使用 UIWebVIew 的時候我們并不關(guān)注 Cookie，因為在調(diào)用登錄接口的時候無論是AFNetworking，還是其他，登錄成功之后都會自動保存在
[NSHTTPCookieStorage sharedHTTPCookieStorage].cookies 中，以后再使用也會自動去獲取（這里有個 UIWebView 的坑：訪問的鏈接越多，如不處理Cookie，它會加載越來越多的無效 Cookie 導(dǎo)致內(nèi)容急劇增大）。但 WKWebView 的存儲體系與 UIWebVIew 完全不一樣，只能手動給它添加 Cookie，如下：
WKWebView設(shè)置cookie.jpg
但即便如此，Cookie 還是會偶現(xiàn)丟失的問題，最終只好采用每次 Web 開始加載之時判斷 Cookie 是否存在，否則手動添加重新加載，如下：
WKWebView設(shè)置cookie.jpg
Cookie 獲取的坑趟過了，再次喜大普奔。
WebKit框架對跨域進行了安全性檢查限制，不允許跨域，比如從一個 HTTP 頁對 HTTPS 發(fā)起請求是無效的（有一個界面要跳到支付寶頁面去支付，死活沒反應(yīng)）。而系統(tǒng)的 Safari ，iOS 10出現(xiàn)的 SFSafariViewController 都是支持跨域的，因此解決辦法如下：
跨域跳轉(zhuǎn).jpg
對于自身域名，還是建議全站 HTTPS 化吧（大勢所趨）。
UIWebView 使用的 JavaScriptCore 框架，交互時為 JavaScript 運行的上下文環(huán)境 JSContext 注入對象 Bridge；WKWebView 使用的 WebKit 框架，交互時為 webkit.messageHandlers 注入對象，如下：
JavaScript注入.jpg
前端H5需要做判斷兩種不同注入方式帶來的不同調(diào)用方式：
js調(diào)用.jpg
WKWebView 基于 WebKit 框架，與 UIWebView 機制不同：加載過程中所有的請求都不經(jīng)過 NSURLProtocol，換句話說就是 WKWebView 無法攔截響應(yīng)數(shù)據(jù) 鑒于之前大部分 Hybrid 框架的離線預(yù)加載機制都依賴于攔截功能，這意味著廢掉很多程序猿們辛辛苦苦設(shè)計實現(xiàn)的 Hybrid 框架（內(nèi)功盡失，感覺身體被掏空），再加上 WKWebView 自身的坑不少，因此很多團隊都不會輕易替換掉 UIWebView。擁抱變化吧，WKWebView 遲早會取代 UIWebView 成為最佳 Web 容器（iOS 9帶來的 SFSafariViewController 更是武功全廢，啥都干不了，只能干瞪眼）。
那么問題來了，如何設(shè)計新的 Hybrid 框架呢？此處出門左轉(zhuǎn)，點擊文章開頭進入公眾號歷史文章，查看《通用Web&Native交互協(xié)議設(shè)計方案》。
簡書http://www.lxweimin.com/p/403853b63537中有關(guān)于這個坑的具體描述，筆者這里就不再做研究，這里只說明怎么趟過的坑：使用通用的 Web&Native 交互協(xié)議，為 Web 提供 Native POST 請求的接口+回調(diào) CallBack 即可，參見關(guān)于 JavaScript 交互。
當(dāng)使用 loadRequest 來讀取本地 Documents 目錄的 HTML 文件時，WKWebView 是無法讀取成功的，只能通iOS 9的新接口加載
load loacl html.jpg
但是在iOS9以下的版本是沒提供這個便利的方法的，解決辦法：先將本地 HTML 文件的數(shù)據(jù) copy 到 tmp 目錄中，然后再使用 loadRequest 來加載。但是如果在 HTML 中加入了其他資源文件，例如 js，css，image 等也必須一同 copy 到 tmp 中，這個是非常蛋疼的事情了。然而還有更蛋疼的事：iOS 8下還必須 copy 到 tmp 的 www 目錄下 WKWebView 才能讀取（Word天，心中千萬只草泥馬狂奔而過）。參見http://stackoverflow.com/questions/24882834/wkwebview-not-loading-local-files-under-ios-8
很多人都喜歡使用 UIWebView 的捏合手勢來進行放大和縮小，觀看 Web 內(nèi)容，但 WKWebView 在手機上不支持，卻支持其他iOS設(shè)備（草泥馬再次狂奔而過）。
不支持捏合手勢.png
