关于webkit:reactnative必备WebView篇

什么是WebView、WebView倒退过程、WebView DevTools怎么用？如何调试WebView？

下文中可能会看到很多加粗的名词，或者会不了解，不要急，前面会缓缓介绍。

WebView倒退

为了可跨平台开发一次能够部署iOS、Android等平台；公布更新快，且能在服务器端公布，还可能实时更新终端展现，便于疾速降级以及紧急修复bug；排版简单的内容等等。WebView诞生并开始逐步倒退起来。

IOS

从IOS2开始，UIWebView呈现了，开发者只需创立一个 UIWebView 对象，便可将其附加到窗口，而后向其发送加载 Web 内容的申请。还能够应用该类在网页历史中前后挪动，甚至能够通过编程形式设置一些网页内容属性。

但随着人们对挪动端的依赖，UIWebView已逐步满足不了人们的须要。UIWebView与app通信时只能通过js或者UIWebViewDelegate来进行，客户端想传给UIWebView网页参数或从中获取数据都比较复杂。

从IOS8之后，WKWebView呈现，UIWebView缓缓不再被应用，IOS13版本的时候， UIWebView被列为了过期API，2020年4月起App Store将不再承受应用UIWebView的app上架，同年12月不再容许更新。

WKWebView是一个古代的反对最新Webkit 性能的网页浏览控件，它有极强的性能和以下几大长处：

• 采纳跨过程计划
• Nitro JS解析器，60fps的刷新率，性能和safari比肩，对h5实现了高度反对
• 内存开销更小
• 内置手势
• 反对更多h5个性
• 和safari应用雷同的js引擎---JavaScriptCore
• 提供罕用的属性，如加载网页进度的属性

自此之后IOS始终应用WKWebView，每个版本都很稳固

Android

Android（4.4 KitKat 版本之前）应用的是Webkit作为其引擎，4.4开始（API 级别 targetSdkVersion 19）引入了基于 Chromium 的新版 WebView，自此包含了 V8 JavaScript 引擎，并反对以前在旧 WebViews 中短少的古代 Web 规范。

新的 WebView 与安卓上的Chrome for Android有一样的引擎，因而 WebView 和安卓里的 Chrome 之间的渲染更加统一。

如果您的 targetSdkVersion 设置为“18”或更低版本，则 WebView 将在“怪异模式”下尽可能严密地运行，以防止上述某些行为变更，同时仍为利用提供性能和网络规范降级。

不过要留神的是，Android 4.4 基本不反对单列和窄列布局以及默认缩放级别，可能会存在未发现的其余行为差别，因而请务必在 Android 4.4 或更高版本上测试您的利用，即便 targetSdkVersion 设置为“18”或更低版本也是如此。

从产品角度来讲，Android 版 Chrome 与 WebView 是离开的。它们都基于Chromium，然而仍有局部性能WebView依然应用不了，比方Form validation、Fullscreen API 等等。

如果你想查看本人的Android System WebView版本，能够关上开发者模式，在开发者选项里看到 WebView implementation，这些版本 ID 与 Android 版 Google Chrome 的版本 ID 雷同

从 Android 7（API 级别 24）开始，WebView在Google Play 商店中作为独自的应用程序提供。咱们能够装置它们的任意组合来测试几个行将公布的 WebView 版本以及最新的稳固版本。

和 Chrome 一样，WebView 有四个公布渠道：

• 稳固渠道：

  • 在每个带有 WebView 的 Android 设施上默认装置和更新。
  • 全面测试。最不可能解体或有其余次要谬误。
  • 主要版本每 2-3周更新一次，次要版本每 4 周更新一次。

• 测试频道：

  • 实用于 Android 6（API 级别 23）及更高版本。
  • 在公布前进行了测试，但没有那么稳固。
  • 每周一次的重大更新，而后是稳固的主要更新。

• 开发频道：

  • 在 Android 7 及更高版本上公开可用。
  • 稳固之前的两个次要更新，代表正在踊跃开发的内容
  • 每周更新一次。
  • 最低限度的测试。

• 金丝雀构建：

  • 实用于 Android 7 及更高版本。
  • 每日公布。
  • 包含前一天的最新代码更改。
  • 未经测试或应用。

如果寻找特定版本的 Chromium，您能够在Chromium Dash的每个频道中找到最新版本。
如果想看Android每次版本更新的具体介绍，能够查看这里。

引擎介绍

平时中，咱们常常会提到引擎，然而又分不清其中哪个蕴含哪个，他们是什么样的关系，上面给大家梳理一下。

每个浏览器引擎其实都蕴含两个局部，一个是JS引擎，一个是渲染引擎，目前支流的无关js的引擎又有三个，上文提到过的Webkit，还有Blink、Gecko，重点介绍下前两个

Webkit

WebKit是Apple开发的浏览器引擎，于 2001 年 6 月 25 日在 Apple 外部启动，次要用在Safari网络浏览器以及所有iOS网络浏览器(IOS上的谷歌浏览器、Edge浏览器、 火狐浏览器等等)，Webkit 的渲染引擎为WebCore，JS引擎为JavaScriptCore。

2008年6 月 2 日，WebKit 我的项目革新成SquirrelFish Extreme（缩写为 SFX，市场名称为 Nitro ），2008 年 9 月 2 日，V8 作为 Chrome 的一部分首次亮相，其性能比之前的任何引擎都要好得多！ 紧接着Apple公司于 9 月 18 日发表，WebKit将JavaScript编译老本机机器代码，打消了对字节码解释器的须要，从而放慢了 JavaScript 的执行速度。其性能比其前身进步了 30%。

查问webkit引擎反对个性和CSS性能，能够点这里

Blink

按提交次数，谷歌之前始终是WebKit 代码库的最大贡献者，然而因为和Apple公司对WebKit将来思考的抵触，2013 年 4 月 3 日，Google 发表将 WebKit 里的 渲染引擎WebCore 的其中一个分支，命名为Blink，Blink引擎打造了本人的渲染引擎及V8 JavaScript 引擎，下面常常说到了Chromium，而Blink其实就是Chromium整体的一部分。

而什么是Chromium， Chromium是一个收费的开源软件我的项目，始终由谷歌保护，Chromium 为Google Chrome提供了绝大多数源代码，因而 Google 抉择了“Chromium”这个名称。能够了解为 Chromium + 集成 Google 产品 = Google Chrome

Google Chrome 是个商业我的项目，而 Chromium 是一个中立、无立场的。另外采纳Chromium的浏览器Microsoft Edge、Opera、Qihoo 360 Secure Browser 等等，另外还有一些驰名的框架也在应用，比方Electron

如QQ浏览器、UC浏览器、Chrome浏览器等，它们内置了本人的内核或者将别家的内核加以革新，和安卓内WebView并没有什么关系。然而某些安装包很小的浏览器，如旗鱼浏览器（点此下载），via浏览器、神奇浏览器等，他们通过间接调用安卓零碎内自带的webview来浏览网页

WebView DevTools

咱们理解完WebView，就须要学会怎么调试WebView，下面说过，咱们能够通过任意组合来测试几个行将公布的 WebView 版本以及最新的稳固版本。

咱们能够装置一个稳定版，一个dev，一个beta，一个canary。每个包在装置实现关上后，会主动在桌面生成工具图表，咱们还能够查看设施上产生的 WebView 解体。

而后就能够关上工具进行调试

如果想对稳定版安卓WebView的原生里的参数进行调试，也能够装置WebView Test

目前通过自己测试，OPPO手机 带多用户性能的手机无奈切换WebView，因为在装置后进入WebView implementation时，新装置的WebView会禁用，上面提醒 已为其它用户和访客卸载此性能。在其余手机测试了下，均没发现什么问题。

我分享下具体的装置过程：

Android 10（API 级别 29）及更高版本

1. 启用 Android 的开发者选项菜单
2. 通过 Playstore 装置独自的 WebView Beta 应用程序
3. 导航到开发人员选项 > WebView 实现，抉择您要用于 WebView 的 WebView 通道

Android 7 到 9（API 级别 24 - 28）

1. 启用 Android 的开发者选项菜单
2. 装置 Chrome 测试版
3. 导航到开发人员选项 > WebView 实现，抉择您要用于 WebView 的 Chrome 频道

装置过程可能会碰到很多问题，欢送私信作者自己

WebView 在浏览器中调试

对于web前端同学来讲，在浏览器上调试可能会更相熟一点，我上面分享下WebView的浏览器调试办法

安卓

在 Android 4.4 (KitKat) 或更高版本上，能够应用谷歌浏览器的 开发者工具 调试 Android 我的项目中的 WebView 内容。

1. 首先咱们须要在我的项目里 WebView 类上调用静态方法 setWebContentsDebuggingEnabled。

   if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {WebView.setWebContentsDebuggingEnabled(true);}

   WebView 调试不受debuggable利用程序清单中标记状态的影响。如果您只想在debuggable是true时启用 WebView 调试，请在运行时测试该标记。

   if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {if (0 != (getApplicationInfo().flags & ApplicationInfo.FLAG_DEBUGGABLE)){ WebView.setWebContentsDebuggingEnabled(true); }}

   以上设置实用于应用程序的所有 WebView。

2. 关上手机的开发者模式，连贯上电脑，而后关上应用程序的 WebView。
3. 进入chrome://inspect，页面显示了设施上启用调试的 WebView 列表。要开始调试，请单击要调试的 WebView 下方的inspect。

IOS

1. 在mac电脑上连贯上手机，启动我的项目，关上WebView页面
2. 关上Safari，在开发工具栏里，能够看到你的模拟器或者手机的名称，找到对应的页面即可开始调试

最初，如果大家想晋升挪动端页面的加载速度，能够查看这篇--> 《性能优化必备：让你的挪动端网页1s之内出现！》

参考链接：
https://en.wikipedia.org/wiki/WebKit
https://en.wikipedia.org/wiki/Blink_(browser_engine))
https://en.wikipedia.org/wiki/Chromium_(web_browser)#Browsers_based_on_Chromium#Browsers_based_on_Chromium)
https://developer.apple.com/documentation/webkit/wkwebview
https://developer.android.com/guide/webapps/migrating
https://developer.chrome.com/docs/multidevice/webview/
https://developer.android.com/guide/webapps/webview-testing
https://geekflare.com/android-system-webview/
https://chromium.googlesource.com/chromium/src/+/master/android_webview/docs/developer-ui.md
https://developer.chrome.com/docs/devtools/remote-debugging/webviews/