258资源分享网

在开发小程序应用中，QA发现过几次页面白屏的情况，苦于难易复现和调试，故想对小程序白屏问题进行一番探究。

从小程序官方开发者文档得知，微信小程序运行在三端：iOS（iPhone/iPad）、Android和用于调试的开发者工具。三端的脚本执行环境以及用于渲染非原生组件的环境是各不相同的[1]：

在 iOS 上，小程序逻辑层的 javascript 代码运行在 JavaScriptCore 中，视图层是由 WKWebView 来渲染的，环境有 iOS8、iOS9、iOS10；

在 Android 上，旧版本，小程序逻辑层的 javascript 代码运行中 X5 JSCore 中，视图层是由 X5 基于 Mobile Chrome 53/57 内核来渲染的；

新版本，小程序逻辑层的 javascript 代码运行在 V8 中，视图层是由自研 XWeb 引擎基于 Mobile Chrome 53 内核来渲染的；

在 开发工具上，小程序逻辑层的 javascript 代码是运行在 NW.js 中，视图层是由 Chromium 60 Webview 来渲染的。

下面说说WKWebView、Mobile Chrome 53/57、Mobile Chrome 53是什么。

在Apple公司的开发者文档网站上，有对WKWebView进行介绍，简单来说，WKWebView是一个为app内置浏览器渲染交互式网页内容的组件，用于替换老版本的UIWebView组件[2]。不管是UIWebView，还是WKWebView，它们都属于IOS WebView。我们可以把WebView理解为手机操作系统的一个系统级的组件。不管是手机内置的浏览器，还是其他app，比如微信等，只要你想呈现交互式的网页内容，都可以调用WebView去完成这件事情。Android WebView亦是如此[3]。

现在我们可以把WKWebView称为IOS端的WebView，那么Android端的Mobile Chrome 53/57，或者Mobile Chrome 53又是什么，这两个跟WebView又是什么关系呢？ 我们可以把Mobile Chrome 53/57理解为Chrome for Android 537版本，这里的537是指Chrome的排版引擎(layout engine)采用的WebKit内核版本，具体参考Google Chrome version history[4]。需要指出的是，53/57是不是就是537，这里存疑，没有查到有效的参考资料，但是这个对我们的研究应该没有什么影响，可以不予考虑。到这里，又引入了两个概念：layout engine、WebKit内核。接下来简单介绍一下layout engine和WebKit内核。

我们都知道浏览器有两个重要的引擎：渲染引擎（rendering engine，也称layout engine，即上面提到的排版引擎，后续为了方便，统一描述为渲染引擎）和JS引擎。其中渲染引擎负责解析网页内容，计算显示方式，输出至显示设备。JS引擎则负责解析JavaScript语言，实现网页的动态交互效果。最开始时渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎，即浏览器内核就是该浏览器采用的渲染引擎，主要参考X5内核调研报告[5]。在后续的讨论中，浏览器内核就单指渲染引擎。

那WebKit内核又是什么？这个不得不追溯WebKit的历史了。1998，自由软件社区KDE开发了HTML排版引擎KHTML和JavaScript解析引擎KJS，也就是现代浏览器两个重要的引擎。Apple公司的开发者Don Melton于2001年在KDE的基础之上开始了WebKit项目。刚开始时，WebKit仅为KDE的复刻，我们可以理解为WebKit是KDE基础上fork出来的分支。后来，在WebKit项目中，KHTML被命名为WebCore，KJS被命名为JavaScriptCore，主要参考维基百科[6]。至此，我们可以回答，至少针对Apple的产品来说，浏览器内核就是WebKit，即渲染引擎采用的是WebKit内核。

webkit项目是Apple公司发展自家浏览器启动的项目。Google公司在发展Chrome浏览器也成立了Chromium项目。在Chromium项目中，JavaScript解析引擎采用Google自己开发的大名鼎鼎的V8引擎，渲染引擎采用的是WebKit内核。到2013年7月份，Chromium项目将渲染引擎替换为Blink引擎，并在Chrome28及后续的版本上采用[4][7]。Blink引擎是Google在WebKit项目中的WebCore基础上fork出来的一个分支[8][9]。我们可以用一幅图把KDE、WebKit和Chromium串联起来：

现在，我们再回过头来看一下Mobile Chrome 53/57，或者Mobile Chrome 53，其实它的内核还是从WebKit上演化而来。绕了这么远，只为一句话：小程序就是运行在WebView之上。那么我们的初衷，研究小程序白屏问题，其实就是在探究WebView白屏问题。如果要更详细一点，那就是WKWebview、Android WebView白屏的原因。

关于WKWebview白屏，网上罗列的常见原因大致有以下几种：

内存占用比较大时，WebContent Process 会 crash，从而出现白屏现象。

URL网址无效或者含有中文字符。

WKWebview刚推出时，在IOS8.0~8.2会偶尔出现白屏

由于滚动组件嵌套的结构，不刷新的问题。