摘要：背景是微信將要從切換成，前端的頁(yè)面需要進(jìn)行適配。以往在做滾動(dòng)加載的組件時(shí)，微信內(nèi)的翻頁(yè)的時(shí)候老是要等待下一頁(yè)加載，現(xiàn)在終于不用等了。當(dāng)然也有坑，具體微信內(nèi)要怎么兼容看文檔。微信在，已經(jīng)開(kāi)始灰度了，后續(xù)版本會(huì)全量。

背景是微信webview將要從UIWebView切換成WKWebView，前端的web頁(yè)面需要進(jìn)行適配。

官方的解釋?zhuān)篧KWebView是一個(gè)顯示交互式Web內(nèi)容的對(duì)象，例如瀏覽器內(nèi)的應(yīng)用程序。您可以使用WKWebView在您的應(yīng)用程序中嵌入Web內(nèi)容。為此，創(chuàng)建WKWebView對(duì)象，將其設(shè)置為視圖，并向其發(fā)送加載Web內(nèi)容的請(qǐng)求。

首先來(lái)看下UIWebView的槽點(diǎn)，通常的iOS App用UIWebView加載網(wǎng)頁(yè)，這個(gè)自iOS2開(kāi)始使用的網(wǎng)頁(yè)加載器一直是開(kāi)發(fā)的心病：加載速度慢，占用內(nèi)存多，優(yōu)化困難。如果加載網(wǎng)頁(yè)多，還可能因?yàn)檫^(guò)量占用內(nèi)存而給系統(tǒng)kill掉。

那wk有什么特點(diǎn)：
1、在性能、穩(wěn)定性、內(nèi)存占用有很大提升。有的文章說(shuō)4倍的渲染性能，不知真假，從體驗(yàn)上來(lái)看，非常流暢。
2、允許JavaScript的Nitro庫(kù)加載并使用（UIWebView中限制）；
3、支持了更多的HTML5特性；
4、高達(dá)60fps的滾動(dòng)刷新率以及內(nèi)置手勢(shì)；滾動(dòng)刷新頻率，從實(shí)際體驗(yàn)看，確實(shí)流暢。

總得來(lái)說(shuō)更快，更少，更完善，iOS 的最佳選擇。

Starting in iOS 8.0 and OS X 10.10, use WKWebView to add web content to your app. Do not use UIWebView or WebView。

iOS 8.0后的版本開(kāi)始支持，目前已經(jīng)都10.+了，可以大膽的用。

1、點(diǎn)擊事件，300ms的延遲還存不存？

令人高興的是，300ms的這個(gè)問(wèn)題在wkwebview得到了解決。前提是需要設(shè)置user-scalable=0 的頁(yè)面，WKWebView將會(huì)移除 300ms 的 click 事件延遲。

var t;
document.getElementById("j_click").ontouchstart = function(){
   t = +new Date();
};
document.getElementById("j_click").onclick = function(){
   alert(+new Date() - t);
};

// 如果UIWebview 或者沒(méi)有設(shè)置user-scalable的wk頁(yè)面，t 大概是400ms+
// WKWebView t可以到40ms左右

fastclick這類(lèi)兼容庫(kù)以及用touch事件模擬的click，可以說(shuō)再見(jiàn)了。

2、滑動(dòng)頁(yè)面JS掛起的問(wèn)題還有嗎？

答案是沒(méi)有了，即使滑動(dòng)頁(yè)面，js照舊執(zhí)行。所以節(jié)流函數(shù)還是很有必要，減少不必要的大量計(jì)算。

以往在做滾動(dòng)加載的組件時(shí)，微信內(nèi)的翻頁(yè)的時(shí)候老是要等待下一頁(yè)加載，現(xiàn)在終于不用等了。

目前就發(fā)現(xiàn)這兩點(diǎn)比較明顯的改善，如果后續(xù)發(fā)現(xiàn)了再補(bǔ)充。當(dāng)然wkwebview也有坑，具體微信內(nèi)要怎么兼容看文檔。

iOS微信在6.5.1，已經(jīng)開(kāi)始灰度了，后續(xù)版本會(huì)全量。兼容wkwebview需要關(guān)注的點(diǎn)請(qǐng)參考官方文檔。

參考
https://zhuanlan.zhihu.com/p/...
http://www.layabox.com/news/2...
http://nshipster.cn/wkwebkit/

本文地址：http://www.iamaddy.net/2017/0...，未經(jīng)過(guò)允許，禁止一切形式的轉(zhuǎn)載