H5 Crash 研究

687 查看

我们知道，支撑页面在 webview 上良好运转的前提是具备一个高效并且稳定的 webview 容器，而容器的高效稳定不仅仅由容器提供方来保障，也需要容器使用者遵守一些基本准则，否则就有可能出现页面 Crash 的情况，这些准则是什么？什么样的上层代码会引起容器异常退出？这是本文需要阐述的内容。

H5 Crash 问题概况

下图是 H5 Crash 的大致流程图：

H5 Crash 流程图

由于前端没办法捕捉到页面 Crash 的状态和堆栈，但是 H5 页面上发生的错误会传递到 Java 和更底层的 Native 直到容器异常退出，在退出的那一刻，容器会将堆栈写入到日志中，当下次打开容器时（也可能是定时上报）就会上报这些堆栈信息。

H5 Crash 原因初探

测试代码仓库地址：

1 2	git clone https://github.com/barretlee/h5crash.git; cd demo;

注意： 代码需要在 Webview 容器中测试，PC 浏览器下不会出现异常。

H5 Crash 的原因不太明显，但是从经验上判断和摸索，大致归类为以下三种：

1. 内存问题

测试方法：使用闭包，不断增加内存量，看看增加到哪个区间大小， webview 容器会出现异常
测试地址：https://rawgit.com/barretlee/h5crash/master/demo/crash-memory.html（微信、微博或者其他客户端打开该页面的用户，可以点进去测试下，选择 100M 内存，不出意外，你的客户端会闪退。）

var Closure = function() {

var _cache = [];

var cache = 0;

var add = function(size) {

cache += size;

size = size * 1024 * 1024;

_cache.push(new Array(size).join('x'));

refresh();

};

var refresh = function() {

r.innerHTML = '内存消耗： ' + cache + 'M';

};

return {

cache: cache + 'M',

add: add,

refresh: refresh

}

};

var closure = Closure();

</script>

存在的干扰：这种测试存在比较多的干扰，比如设备类型、系统类型（iOS/Android)、和设备内存运行状态等。

2. Layers 数问题

Layers 数的获取比较麻烦，Chrome Driver 没有提供该数据的接口，目前也没有比较好的办法拿到这个数据。

测试方法：通过不同的方式创建层，观察页面的 Crash 情况
测试地址：https://rawgit.com/barretlee/h5crash/master/demo/crash-layer.html

<style>.transform {

transform: translateZ(0);

}

.animation {

width:100px;

height:100px;

background:red;

position:relative;

ܟ这是本文需要阐述的内容。