WKWebView微信適配

時間 2019-12-13

標籤 wkwebview 微信適配简体版

原文原文鏈接

WKWebView

背景是微信webview將要從UIWebView切換成WKWebView，前端的web頁面須要進行適配。javascript

什麼是WKWebView

官方的解釋：WKWebView是一個顯示交互式Web內容的對象，例如瀏覽器內的應用程序。您可使用WKWebView在您的應用程序中嵌入Web內容。爲此，建立WKWebView對象，將其設置爲視圖，並向其發送加載Web內容的請求。html

爲何要用WKWebView

首先來看下UIWebView的槽點，一般的iOS App用UIWebView加載網頁，這個自iOS2開始使用的網頁加載器一直是開發的心病：加載速度慢，佔用內存多，優化困難。若是加載網頁多，還可能由於過量佔用內存而給系統kill掉。前端

那wk有什麼特色：
一、在性能、穩定性、內存佔用有很大提高。有的文章說4倍的渲染性能，不知真假，從體驗上來看，很是流暢。
二、容許JavaScript的Nitro庫加載並使用（UIWebView中限制）；
三、支持了更多的HTML5特性；
四、高達60fps的滾動刷新率以及內置手勢；滾動刷新頻率，從實際體驗看，確實流暢。java

總得來講更快，更少，更完善，iOS 的最佳選擇。web

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後的版本開始支持，目前已經都10.+了，能夠大膽的用。微信

對H5頁面的影響

一、點擊事件，300ms的延遲還存不存？app

使人高興的是，300ms的這個問題在wkwebview獲得瞭解決。前提是須要設置user-scalable=0 的頁面，WKWebView將會移除 300ms 的 click 事件延遲。函數

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

// 若是UIWebview 或者沒有設置user-scalable的wk頁面，t 大概是400ms+
// WKWebView t能夠到40ms左右

fastclick這類兼容庫以及用touch事件模擬的click，能夠說再見了。性能

二、滑動頁面JS掛起的問題還有嗎？

答案是沒有了，即便滑動頁面，js照舊執行。因此節流函數仍是頗有必要，減小沒必要要的大量計算。

以往在作滾動加載的組件時，微信內的翻頁的時候總是要等待下一頁加載，如今終於不用等了。

<body style="height:1000px;">
   <ul id="add"></ul>
</body>
<script type="text/javascript">
window.onscroll = function(){
       var ol = document.createElement('ol');
       ol.innerHTML = new Date();
       document.getElementById('add').appendChild(ol)
}
</script>