记vue+leaflet的一次canvas渲染爆栈

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

背景：

在地图上绘制大量的circleMarker，leaflet能选择使用canvas来渲染，比起默认的svg渲染来说在大量绘制的情况下会更加流畅。但当触发其中某一个circleMarker的tooltip或popup时，浏览器报错“Uncaught RangeError: Maximum call stack size exceeded”：

解决过程：

1. 写了个测试代码来复现问题：

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Add a raster tile source</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js"></script>


<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<style>
* { margin:0; padding:0; }
html,body,#vue-wrap,#map { height: 100%; }
</style>
</head>
<body>
<div id="vue-wrap">
<div id="map">test</div>
</div>
<script>
new Vue({
el: '#vue-wrap',
data: function () {
return {
map: '',
canvas: L.canvas()
};
},
mounted: function () {
this.init();
},
methods: {
init () {
this.map = new L.Map('map', {
center: [39.928953, 116.389129],
zoom: 11,
maxZoom: 18,
attributionControl: false,
zoomControl: true
}); this.paintMarkers();
},
paintMarkers () {
console.log('start paint');
console.time('paint');
for (let i = 0; i < 50000; i++) {
let marker = L.circleMarker(this.generateLatlng(), {
color: '#000',
weight: 1,
opacity: 1,
fillOpacity: 0.8,
radius: 6,
fillColor: 'orange', renderer: this.canvas
});
marker.bindTooltip(i + '');
marker.bindPopup(`i: ${i}`);
this.map.addLayer(marker);
}
console.timeEnd('paint');
},
generateLatlng () {
let lat_min = 39.70111,
lat_max = 40.14660,
lng_min = 116.05843,
lng_max = 116.63521; let lat = this.getRandomNum(lat_min, lat_max),
lng = this.getRandomNum(lng_min, lng_max); return [lat, lng];
},
getRandomNum (min, max) {
max = Math.max(min, max);
min = Math.min(min, max);
return Math.random() * (max - min) + min;
}
}
});
</script> </body>
</html>

绘制50000个circleMarker，当鼠标移动到其中某个marker上时，浏览器报错。

注释第59行的代码，或者把map从vue实例的data里提取出来放在全局都不会爆栈，因此现在有两个问题：

为什么放在全局不会爆栈
为什么svg渲染不会爆栈

2. 问题1肯定和vue.js的observe函数相关，通过查看vue.js的代码发现

vue.js初始化实例时会调用: _init->initState->initData->observe(data)，在observe函数里会新建个Observe，标注__ob__属性，如果该值为对象，还会调用walk函数来为对象的所有属性添加Observe。

3. 感觉爆栈可能和这个walk有关，但是要怎么证明呢？修改了一下vue.js源码，每次walk的时候都输出此时的遍历链条，如:{a:{b: c}}遍历到c属性时输出 a->b->c。
关键修改点：

Observer.prototype.walk = function walk (obj, prefix = '') { // 添加prefix存储遍历节点
var keys = Object.keys(obj);
for (var i = 0; i < keys.length; i++) {
defineReactive(obj, keys[i], undefined, undefined, undefined, `${prefix}->${keys[i]}`);
console.log(`${prefix}->${keys[i]}`);
}
};

同时，observe相关的函数都添加prefix来保存遍历的节点信息

4. 先只绘制5个点来测试一下输出结果

没问题，当把鼠标放在Marker上触发tooltip时，有意思的事情出现了：

注意到_order->prev这个链条很长，observe递归很深。当修改marker绘制数目为50000后，确实是->prev->不断的递归并爆栈

5、查看leaflet代码发现canvas绘制时会为画布上的元素添加_order链表属性来存储画布上所有元素的绘制先后顺序，方便bringToFront、bringToBack之类的方法实现；当模拟事件触发时也是通过这个链表来寻找对应的元素。因此当绘制元素过多时，链表太长，vue的observe不断的递归，造成了爆栈现象