精华内容
下载资源
问答
  • wkwebview内核
    千次阅读
    2017-09-27 10:59:28

    ajax请求的时候延迟500毫秒加载,setTimeout(function(){},500) 
    cache:flase;

    更多相关内容
  • 自上次微信安卓升级至X5 Blink内核提升性能与解决了兼容性问题后,2017年1月6日晚,微信IOS也公布了重大利好消息“微信IOS客户端将升级为WKWebview内核...

    自上次微信安卓升级至X5 Blink内核提升性能与解决了兼容性问题后,2017年1月6日晚,微信IOS也公布了重大利好消息“微信IOS客户端将升级为WKWebview内核,请网页开发者尽快适配”。对于非技术开发者而言这句话代表着什么呢?Layabox小编先抛出答案,再慢慢解读。

    升级后的好处

    一、HTML5渲染性能提升4倍。

    二、内存占用将会减少至30%。

    小编在技术哥给的性能测试链接经对比后发现,当前的微信内核UIWebView与Safari的WKWebview内核性能差距达到4倍左右。内存占用可减少于30%左右。而微信IOS客户端升级至WKWebview后使用的就是Safari当前的WKWebview内核。性能提升与内存占用的减少这对于HTML5大型游戏的研发商而言是重大的利好消息,未来HTML5游戏可以轻松实现APP游戏的效果。

    更新时间周期

    微信iOS客户端将于2017年3月1日前逐步升级为WKWebview内核。

    背景

    WKWebView 是苹果在iOS 8中引入的新组件,目的是提供一个现代的支持最新Webkit功能的网页浏览控件,摆脱过去 UIWebView的老、旧、笨,特别是内存占用量巨大的问题。它使用与Safari中一样的Nitro JavaScript引擎,大大提高了页面js执行速度。

    切换方法

    iOS微信6.5.3版本开始支持开发者手动切换WKWebview和UIWebview,使开发者可提前对WKWebview进行适配。

    手动切换入口:

    在微信会话列表页点击右上角“加号按钮”,选择菜单中的”添加朋友”,在添加朋友界面的搜索框中输入字符串:“:switchweb”,再点击键盘右下角搜索按钮。切换成功后会提示当前使用的内核是UIWebview或是WKWebview。

    校验切换方法:

    通过命令成功切换到WKWebview后,可通过以下方法验证当前网页使用的是否是WKWebview内核。 

    微信内任意入口进入任意网页,在网页加载成功后向下拉动页面(或点击网页右上角菜单按钮),使之显示出地址栏,当地址栏以 “此网页由” 开头即为当前使用WKWebview,若以“网页由”则是使用的UIWebview。

    页面如何判断当前使用的webview内核:

    在页面中可通过微信注入的window.__wxjs_is_wkwebview变量判断当前使用的webview内核。 iOS微信6.5.3及其之后的版本 window.__wxjs_is_wkwebview 为true时是使用WKWebview,为 false或者 “undefine”时是 UIWebview 。

    前端适配关注的要点

    适配的首要原则:若不能区分是WKWebview的新特性新行为还是微信内部逻辑导致原有页面出现问题时,可使用测试页面分别在Safari和微信中的WKWebview内核分别测试,用以快速定位问题产生的原因。

    适配指南

    切换为WKWebview后,微信中的Webview行为和Safari中保持高度一致,唯一的区别是微信Webview中会注入微信JSBridge相关的脚本。所以适配的重点需要关注以下几个方面: 

    一:页面功能是否正常 

    二:页面屏幕适配是否正常 三:页面行为是否正常(例如用户在浏览页面时点击返回按钮返回上一个页面时的页面逻辑是否正常) 

    四:页面使用的语法是否兼容。 

    五:JSSAPI是否正常完美的工作。 

    六:重点关注Cookie和LocalStorage等相关的逻辑是否正常。 

    七:若服务器有设置返回 Cache-Control缓存有效时间,则需要检查相关逻辑是否正常。

    正常情况下,你的页面是不需要做特别的适配,但若你的页面有涉及到以下几个受影响的逻辑,则需要根据适配建议进行适配和确认。

    JSAPI相关适配

    一:将不再支持cache 

    变化:在WKWebview中将暂不支持cache jsapi。 

    适配建议:所有使用此api的开发者可去掉页面相关逻辑。

    二:页面通过LocalID预览图片 

    变化:不再支持通过使用chooseImage api返回的localld以如:”img src=wxLocalResource://50114659201332”的方式预览图片。 

    适配建议:

    1. 在iOS微信6.5.3版本及之后的版本中,使用新增的jsapi:getLocalImgData 拿到LocalID对应的图片base64编码后再在前端页面中显示。

    2. 如果引入了页面有引入JSSDK,则直接将JSSDK升级为1.2.0最新版本即可帮助页面自动适配。(目前JSSDk线上版本是 1.0.0 和 1.1.0,更新版本为1.2.0 ,https://res.wx.qq.com/open/js/jweixin-1.2.0.js  )

    三:有使用JSSDK,并且使用了wx.config进行权限授权需关注jsapi调用的失败问题 

    变化:WKWebview的内部实现变更使我们对微信内的页面jsapi权限管理做了一定逻辑上的调整,有极小可能会发生以前授权正常的jsapi获取权限不正常,从而导致调用jsapi失败。 

    适配建议:

    1. iOS微信6.5.1,WKWebview在此版本中已知有以下问题:页面使用HTML5的History API pushState; popstate;      replaceState等控制页面导航(典型的如单应用页面),同时使用JSSDK的wx.config为jsapi授权,此时大几率会出现jsapi因为无权限而调用失败的问题。 在6.5.1中页面若可能的情况下,可使用Anchor hash技术替换History技术来解决此问题。

    2. iOS微信6.5.2及其之后版本,将不会存在以上问题,但不能100%确认有使用到 history或hash技术更改页面导航地址的页面完全没有此类问题,依然需要开发者注意关注此类问题。

    Cookie和LocalStorage设置相关

    一:退出微信账号后,将会清空所有Cookie和LocalStorage。

    二:页面功能依赖Cookie,或有涉及到Cookie的相关逻辑 

    变化:WKWebview内部实现变更,会影响目前页面Cookie相关的逻辑,例如跨域存取Cookie和页面的资源或图片存储服务器依赖校验Cookie来返回数据等情况。

    问题说明:在访问一个页面A时,如果页面A引用了另一个页面B的资源(页面A和B为不同的域名),这时页面B就认为是第三方页面。若在页面B中设置Cookie,就会命中WKWebview下阻止第三方跨域设置Cookie的安全策略,导致问题出现。

    适配建议:

    在WKWebview中是默认阻止跨域的第三方设置Cookie。所有通过Cookie传递的信息,可通过业务后台存储需要传递的信息,然后给页面一个存储信息相对应的access_token加密码,然后通过Url中加入自己业务的access_token进行页面间信息传递。

    如果页面的资源或图片存储的服务器依赖校验Cookie来返回数据的情况,在切换到WKWebview后,在微信内长按保存,或者点击预览大图时,将不会完整的带上所设置的Cookie,会导致图片保存失败或预览失败。除了此种情况,开发者不用担心其他情况下Cookie丢失的问题,所有请求都会带上完整的Cookie。

    页面视频小窗播放

    变化:iOS微信6.5.3及其之后的版本中,Webview默认支持小窗播放。 

    开发者需要特别注意小窗播放需要前端同时适配iOS10和iOS10以下的低版本 

    适配建议:需要完全按照以下代码设置video标签才可同时兼容不同的iOS版本

    <video webkit-playsinline playsinline> </video>

    WKWebview页面行为与Safari完全一致,会导致页面依赖UIWebview页面行为的逻辑失效或异常:(可根据业务自身逻辑,实现测试页面后分别在Safari和微信WKWebview中验证)

    一:Safari或微信WKWebview中 页面A跳转到页面B再返回页面A后不会重新执行Script和Ajax(也不会触发页面reload)。 

    二:Safari或微信WKWebview中,在页面弹出输入键盘后,会触发JQuery的resize事件,而在UIWebView下不会。 

    三:Safari或微信WKWebview中, window unload 事件在只有刷新才能触发,退出页面或者跳转到其他页面都无法触发。 

    四:Safari或微信WKWebview中,极少数情况下某些特殊实现的页面点击事件会失效。

    如果有涉及或者遇到以上问题,以兼容Safari行为为准。

    展开全文
  • WKWebView: Differences from UIWebView browsing engine 优点 多进程,在app的主进程之外执行 使用更快的Nitro JavaScript引擎 异步执行处理JavaScript 消除某些触摸延迟 支持服务端的身份校验 支持对错误...

    翻译文,原文地址

    WKWebView: Differences from UIWebView browsing engine

    优点

    多进程,在app的主进程之外执行

    使用更快的Nitro JavaScript引擎

    异步执行处理JavaScript

    消除某些触摸延迟

    支持服务端的身份校验

    支持对错误的自签名安全证书和证书进行身份验证

    •  

    问题

    需要iOS9或更高版本(WKWebView在iOS8引入,但是很多功能,支持比较全面在iOS9以后的版本)

    不支持通过AJAX请求本地存储的文件

    不支持"Accept Cookies"的设置

    不支持"Advanced Cache Settings"(高级缓存设置)

    App退出会清除HTML5的本地存储的数据

    不支持记录WebKit的请求

    不能进行截屏操作

    优点(Advantages)

    多进程,在app的主进程之外执行

    WKWebView为多进程组件,也意味着会从App内存中分离内存到单独的进程(Network Process and Rendring Process)中。当内存超过了系统分配给WKWebView的内存时候,会导致WKWebView浏览器崩溃白屏,但是App不会Crash。(app会收到系统通知,并且尝试去重新加载页面)

    相反的,UIWebView是和app同一个进程,UIWebView加载页面占用的内存被计算为app内存占用的一部分,当app超过了系统分配的内存,则会被操作系统crash。在整个过程中,会经常收到iOS系统的通知用来防止app被系统kill,但是在某些时候,这些通知不够及时,或者根本没有返回通知。

    使用更快的Nitro JavaScript引擎

    WKWebView使用和手机Safari浏览器一样的Nitro JavaScript引擎,相比于UIWebView的JavaScript引擎有了非常重要的性能提升

    异步执行处理JavaScript

    WKWebView是异步处理app原生代码与JavaScript之间的通信,因此普遍上执行速度会更快。

    在实践操作过程中,JavaScript API调用原生(native)中方法不会阻塞线程,等待回调函数的执行。(在JavaScript代码会继续向下执行,而回调函数会由native端异步去回调)。举一个例子,之前一个"Save Data"的操作如下:

    // JavaScript code - 笔者注
    // 注释 - 笔者注
    
    var filenameID;
    function getFilenameID() {
        // 向native端发起请求,获取kioskId,结果返回由callback方式返回 
        window.kp_requestKioskId("kp_requestKioskId_callback");
    }
    // callback回调函数 - 由native端发起 
    function kp_requestKioskId_callback(kioskId) {
        filenameID = kioskId.split(" ").join("");
    }
    // kp_FileAPI_writeToFile方法不会等待kp_requestKioskId_callback回调函数执行,此时filenameID为undefined
    function saveData(fileName, data) {
        getFilenameID();
        kp_FileAPI_writeToFile(filenameID + ".xls", data, "writeFile_callback");
    }
    

    原先的假定是在'saveData'方法被触发时,在'kp_FileAPI_writeToFile'方法调用前,'getFilenameID'方法会返回filenameID

    但是,在WKWebView中JavaScript和native代码之间的通信是异步的,'kp_FileAPI_writeToFile'方法被调用之前,'getFilenameID'方法还没有完成(回调还没有被执行-笔者注),导致的结果是在'kp_FileAPI_writeToFile'中filename为undefined。为了正确的得到filename,必须重构之前的代码,在callback中完成。如下:

    var filenameID;
    function getFilenameID() {
        window.kp_requestKioskId("kp_requestKioskId_callback");
    }
    function kp_requestKioskId_callback(kioskId) {
        filenameID = kioskId.split(" ").join("");
        kp_FileAPI_writeToFile(filenameID + ".xls", data, "writeFile_callback");
    }
    function saveData(fileName, data) {
        getFilenameID();
    }
    

    消除触摸延迟

    UIWebView和WKWebView浏览器组件会将触摸事件解释后发送给app,因此,我们无法提高触摸事件的灵敏度或速度。

    在UIWebView上的任何触摸事件会被延迟300ms,用以判断用户是单击还是双击。这个机制也是那些基于HTML的web app一直不被用户接受的重要原因。

    在WKWebView中,测试显示,只有在点击很快(<~125ms)的时候才会添加300ms的延迟,iOS将其解释为更可能是双击“点击缩放”手势的一部分,而不是慢点击(>〜125 ms)后。更多细节在这里

    为了消除所有触摸事件(包括快速点击)的触摸延迟,您可以添加FastClick或另一个消除此延迟的库到您的内容中。

    支持服务端的身份校验

    与不支持服务器认证校验的UIWebView不同,WKWebView支持服务端校验。实际上,这意味着在使用WKWebView时,可以输入密码保护网站。

    支持对错误的自签名安全证书和证书进行身份验证

    通过“继续”/“取消”弹出窗口,WKWebView允许您绕过安全证书中的错误(例如,使用自签名证书或过期证书时)。

    问题

    需要iOS9或更高版本

    我们的WKWebView集成仅适用于运行iOS 9或更高版本的设备。虽然WKWebView是在iOS 8中引入的,但在这些版本中存在重大限制,包括无法访问本地存储的文件,我们无法解决此问题,因此此功能不兼容。

    不支持AJAX请求到本地存储的文件

    WKWebView不允许XHR请求file:// URI,因为这些URI违反了浏览器引擎的跨源资源共享规则。使用这种类型的请求的项目应该远程托管在服务器上,或使用现有的UIWebView浏览引擎。

    不支持"Accept Cookies"的设置

    虽然WKWebView确实支持使用cookies,但并没有公开选择哪些cookies被源代码接受的能力。这意味着在使用WKWebView浏览引擎时不会应用“接受Cookie”设置。

    WKWebView只允许我们访问cookie的名称,而不是附加信息,如创建/过期日期或路径,这使得更难以解决Cookie出现的问题。

    不支持"Advanced Cache Settings"(高级缓存设置)

    使用WKWebView浏览引擎时,不会应用“缓存源”和“仅通知服务器重定向事件的浏览器”。

    App退出会清除HTML5的本地存储的数据

    当应用退出并重新启动时,HTML5本地存储将被清除。

    不支持记录WebKit的请求

    WKWebView发出请求并呈现内容,无法直接访问此类请求,并且无法记录这些请求。

    不能进行截屏操作

    尽管我们在测试中没有看到使用Kiosk Pro的JavaScript API进行屏幕捕获的任何问题,但其他iOS开发人员报告说屏幕捕获在WKWebView上随机失败。如果截屏的API是app中的关键操作,建议使用现有的UIWebView浏览引擎。

    展开全文
  • } 微信iOS客户端将升级为WKWebview内核后,页面加载完之前通过(function(){ editTitle("管人不要"); })(); 可以修改成功,但在页面加载完成后调用该方法加载就失效了,比如通过input-button的click事件调用该方法;...

    目前用的动态修改页面title的方法如下:

    function editTitle(title) {

    var $body = $('body');

    document.title = title;    // hack在微信等webview中无法修改document.title的情况

    var $iframe = $('').on('load', function () {

    setTimeout(function () {

    $iframe.off('load').remove()

    }, 0);

    }).appendTo($body);

    }

    微信iOS客户端将升级为WKWebview内核后,页面加载完之前通过(function(){

    editTitle("管人不要");

    })();

    可以修改成功,但在页面加载完成后调用该方法加载就失效了,比如通过input-button的click事件调用该方法;同时在Safari中测试又可以完成修改。

    从而感觉是微信内核自身的问题,但由于不清楚原理不知该如何从代码上解决。。

    展开全文
  • 移动互联网时代,网页依旧是内容展示的重要媒介,这离不开 WebKit 浏览内核技术的支持与发展。在 iOS 平台下开发者们需要通过 WKWebView 框架来与 WebKit 打交道。 虽然苹果官方提供了关于 WKWebView 的 API 与使用...
  • 一个webview封装的图表组件,基于百度echarts3
  • 转载: WKWebView相比于UIWebView浏览器之间内核引擎的区别
  • WKWebView 显示交互式Web内容的对象,例如应用程序内浏览器。 class WKWebView : UIView class WKWebView : NSView ###总览 重要,从iOS 8.0和OS X 10.10开始,使用WKWebView将Web内容添加到您的应用程序。不要...
  • 干货:探秘WKWebView

    2021-10-22 00:55:40
    复用池 WKWebView第一次初始化的时候,会先启动webKit内核,并且有一些初始化操作,这个操作是非常消耗性能的。所以,复用池设计的第一步,是在App启动的时候,初始化一个全局的WKWebView。 并且,创建两个池子,...
  • IOS 安卓 安卓系统自带webview 首先,系统webview,是默认的webview,及Google的Android system webview,它自带于手机rom中,所有依赖系统webview的...从安卓系统4.4起,webview内核变成了chromium内核内核版本是chr
  • 1.背景eCharts提供了迁徙图、热点图、夜视图等跟地图能够很好的结合起来的数据展示方式。但是如何将eCharts和我们的AGS JS框架以及自身的地图相结合,是一个很值得研究的地方。我所在小组中的一位同事上两周作为主力...
  • 使用WKWebView加载网页,该网址在其他任何浏览器均可加载出来,其中包括safari浏览器也是10s超时,来看debug截图 原因就在于, 后端给网页响应的时间过长,大概28s左右,这个响应时间下, Chrome浏览器以及其他浏览器...
  • echarts渲染的时候根据浏览器不同的内核显示是有区别的。 项目里面的echarts折线图显示的效果是这样的 这个效果在网页上面,跟Android app的webview里面显示是没问题的,但是在window显示的echarts折线图显...
  • ECharts 实例 | JShare

    2021-03-08 01:47:15
    ECharts 实例 | JSharevar myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data:['销量']},xAxis: {...
  • webview内的iframe中的事件不可用

    千次阅读 2017-10-16 15:46:06
    最近做Android的Webview开发,使用iframe中嵌入了很多页面,嵌入的页面却不可用,最后发现是
  • webView 对 iframe 的兼容性问题

    千次阅读 2018-07-20 10:51:22
    转自 ... android 下webView打开的网页中有 iframe 时,可能会出现各种问题 可以尝试在 Manifest.xml 文件的 application 标签上增加 android:hardwareAccelerated="true"...
  • 页面iframe内嵌eCharts相关问题处理

    千次阅读 2020-07-12 14:15:26
    适当位置添加 wordChart.clear()和 wordChart.off('click'),代码如下: wordChart.clear() wordChart.setOption(wordOpt); wordChart.off('click') wordChart.on("click", function(e) { ...
  • WKWebView(同事遇到的坑mark下)

    千次阅读 2015-12-03 18:17:05
    在iOS8以上使用了WKWebViewWKWebView在内存和性能上都远胜UIWebView 1、在性能、稳定性、功能方面有很大提升(最直观的体现就是加载网页是占用的内存,模拟器加载百度与开源中国网站时,WKWebView占用23M,而...
  • iOS之深入解析WKWebView的cookie管理

    千次阅读 2021-07-24 02:25:56
    在浏览内核加载网络资源的过程中,往往离不开 HTTP 协议,它是在 Web 上进行数据交换的基础,同时也是一种无状态的 client-server 协议,这种无状态的属性促使许多端存储技术产生,其中最重要的技术之一就是 cookie ...
  • 浏览器内核、webview内核

    千次阅读 2019-09-24 23:23:20
    1:webview 使用的是手机自带的浏览器内核 不同的手机,出于各种目的,会对自己的浏览器内核进行修改, 而不是用Android原生的浏览器, 所以在web的现实上也会有差异的。应该通过写更加标准通用的js方法来增加兼容...
  • 自己动手打造基于 WKWebView 的混合开发框架(一)——WKWebView 上手2015-9-1 / 阅读数:46458 / 分类: iOS & Swift在本系列文章中,我将跟大家一起一步一步,基于 iOS 8 新推出的 WKWebView 组件,构建出自己的...
  • ????????关注后回复“进群”,拉你进程序员交流群????????作者丨童红明来源丨百度App技术前言移动互联网时代,网页依旧是内容展示的重要媒介,这离不开 WebKit 浏览内核...
  • iOS WKWebView疑难杂症

    2020-12-31 03:24:28
    本文主要讲个人使用WKWebView遇到的几个问题。1. viewport在UIWebView使用loadHTMLString的html代码中不设置参数viewport,页面是没有问题的,但在WKWebView中,不设置就会页面看起来很小,换个说法就是能看到整个...
  • 在本篇文章中,我们将在上一篇《深入理解 WKWebView(入门篇)—— WebKit 源码调试与分析》的基础上,结合 iOS 端 WKWebView 的 WKNavigationDelegate 代理方法,站在移动端的视角深入分析 WKWebView 网络请求...
  • GOOGLE了下发现了WKWebView组件,WKWebView是IOS8新推出的组件,目的是给出一个新的高性能的 Web View 解决方案,摆脱过去 UIWebView 的老旧笨重特别是内存占用量巨大的问题。以下为示例代码:/...
  • 之前写过一篇文章是关于基于NSURLProtocol做的DNS解析,其中对NSURLProtocol也有了简单的介绍,我们都知道他可以拦截所有基于URL Loading System 中的请求,但是对于WKWebview里面所发出的请求即使他是http/https 也...
  • WKWebview相关知识点记录

    千次阅读 2017-02-06 14:36:47
    背景 WKWebView 是苹果在iOS 8中引入的新组件,目的是提供一个现代的支持最新Webkit功能的网页浏览控件,摆脱过去 ...也就是说WKWebview是针对IOS端的手机浏览器内核,本来这不关我们什么事儿的,但是问题在于微信i
  • iOS wkwebview 加载html

    千次阅读 2018-06-01 10:50:23
    wkwebview的优势1.交互更方便2.更低的内存占用3.高达60fps的滚动刷新率以及内置手势4.支持更多的HTML5特性5.基于webkit,支持Nitro JavaScript引擎6.提供常用的属性,如加载网页进度的属性...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 894
精华内容 357
热门标签
关键字:

wkwebview内核