背景：
在地图上绘制大量的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/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet-src.js"></script>
<!--<script src="./vue.js"></script>-->
<!--<script src="./leaflet.js"></script>-->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/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不断的递归，造成了爆栈现象
6、那么为什么只有触发tooltip/popup的时候才爆栈呢？
因为map.addLayer(marker)时，能够触发observe的操作在搭建链表关系之前（添加子图层this._layers[id]=layer不能触发observe）。红框部分的push触发了observe
7. 所以把map从vue实例的data中拿出来放在外面，map的属性没有被observe就不存在爆栈的问题了。而svg渲染时不存在这样的链表结构，所以也不会爆栈。
8. 为什么svg不需要这种链表结构？
因为svg可以利用DOM API来实现bringToFront/bringToBack之类的操作，而且事件能直接绑定在dom元素上，也不需要遍历所有元素来判断哪个元素是事件的触发对象。而canvas需要使用事件委托来捕获事件，并遍历所有元素来判断具体哪个元素是事件的触发对象。
解决方案：
- 把视图无关的属性从data里拿出来，但是这样不太方便mixin，只能考虑做成getter、setter形式。这样也能减少不必要的observe
- 利用vue的相关api来unwatch相关属性，但目前没找到如何unwatch data的属性