| 高德地图 web 端 JS API 遇到的坑及性能优化 | 您所在的位置：网站首页 › 如何清理高德地图占用的内存垃圾 › 高德地图 web 端 JS API 遇到的坑及性能优化 |
高德地图 web 端 JS API 遇到的坑及性能优化
|
【JS API V2.0】 本指望全面提升一下性能，结果发现一些硬伤，迫不得已转到1.4.15版本，先说一下最新的v2.0的问题。 因为务业需要规划线路，但是这个版本中，规划线路，并且经过中间点时，部分window 7 旗舰 chrome 报错，报错信息:Uncaught Error: createProgram fail chrome 版本 81.0.4044.113（正式版本） （64 位） win7 64位即便是官方demo 也会报错，后来和提交工单，回复未复现，后来工期急就没跟踪，上线后有极少部分用户反馈报错LabelMarker 部分点位在地图放大到一定程度后 不再触发click mouseover 等事件，极少量点位会出现这种情况，目测是某些点位附近可能有什么隐藏物吧，总之就是不触发，但是奇怪的是，同样的经纬度有时确是可以正确触发事件，也可能是LabelMarker 有问题dblclick 事件 LabelMarker 的dblclick 事件 触发的同时还会触发click 事件，如果同时绑定click 事件 那就尴尬了，先触发click 再触发dblclick 事件，目测是底层对dblclick 处理有问题，click 事件应该有300ms 延时以确认是否有双击，这个还好，可以手动纠正，【JS API V1.4.15】 SvgMarker 在创建及地图缩放时的处理有极大的性能问题，SvgMarker 本身不建议大量的点位应用，海量点不合适的话，建议使用LabelMarker，LabelMarker 在这个版本不提供dblclick 事件，解决办法就是手动判断两次点击是否超300ms 来断定LabelMarker 实例 第一次调用setText setIcon 后再次调用方法不起作用，解决办法，调用前先隐藏，调用后再显示，LabelMaker 在某些座标下的某种缩放级别时（10+）事件不触发，暂未发现【性能优化】 先说结论，再说问题 关掉所有能关掉的动画效果 （参照文档）SvgMarker 创建时请先隐藏，添加完成后再显示，或使用 AMap.OverlayGroup 统一处理下如果点位超过500还是不要用SvgMarker 试试LabelMarker，并关掉动画千万要慎用地图实例 setFitView 方法，如果要用请一定要带上参数，禁掉动画，可以使用地图实例的setBounds方法或setZoomAndCenter 等曲线救国，后面会说这个问题的严重性认真阅读官方文档，很多时候是使用不规范造成的性能问题下面来看下1.4.15版本创建4000 SvgMarker 的性能问题
8.67 s 创建用了这么长时间。。。 再看其中一个SvgMarker性能开销，
使用地图实例的add 方法添加 一组SvgMarker ，显然它们是被一个个加到页面当中的，这些marker dom节点被不断的加入dom必然引起性能开销，根据dom性能优化策略，可以在创建时就指定marker 为隐藏，后边再显示， 或是用官方的AMap.OverlayGroup处理，经此处理后，创建SvgMarker性能有了较大提升，4000点位用时不到3s 再往下看setFitView 的性能问题
1.9 min 。。。 再往下看这密密麻麻的是什么
不知道在执行什么鬼动画，明明感觉已经把动画都关了呢，点进去看看，
实在是报歉，这个段源码目测是个公共方法，一定在一个地方在调用，修改它是徒劳的,也可能是api的某个方法会触发它，原来的业务逻辑 在4000 marker 创建后会修复一下视图范围，原来就直接调用了setFitView ，会不会是它呢？干掉它，一试，果然， 怪不得就算是 v2.0 api 使用labelMarker都能卡成狗，被这货给坑了。 虽然4000点位已经跑进3s内但为了支撑1万+点位的marker 新需求，显然不能再使用SvgMarker 经过计算发现1万点位性能开销要6s，实在是不合适，好在1.4.15版本提供了labelMaker 作为海量点同样为了达到svgMaker一样的外观效果，可以指定svg 作为icon 即便你需要动态的改变它的颜色等，贴出代码（和SvgMarker 一样的水滴形状） export const getSVGSrc = (color: string) => { return `data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2245%22%20height%3D%2260%22%20%3E%3Cg%20%3E%3Cpath%20stroke-width%3D%220%22%20fill%3D%22${encodeURIComponent(color)}%22%20d%3D%22M22.5%2C0C10.043%2C0%2C0%2C9.75%2C0%2C21.75C0%2C41.125%2C22.5%2C60%2C22.5%2C60s22.5%2C-19.25%2C22.5%2C-38.25C45%2C9.75%2C34.958%2C0%2C22.5%2C0z%22%20%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E` };需要注意的是labelMaker 是不会被地图实例的clearMap 方法所清除，要清除请使用labelsLayer 的clear 或remove 方法 下面来看labelMaker的性能开销情况（同样4000点位）ps:准确的说此时maker还未绘制
下面看2万点的完整绘制时间
2万点创建耗时
绘制耗时4S左右
咨询高德 地图渲染就是靠动画帧驱动的所以有这个耗时，后边的Microtasks目测也是绘制的一部分 暂时告一段落，可以松一口气，待续其它性能问题
|
【本文地址】