为何Leaflet在蜂窝网络下的渲染速度远慢于LAN网络？

你的核心矛盾是：GeoJSON已完全本地化传入浏览器，但Leaflet渲染阶段的耗时却受网络环境影响，这说明渲染过程中存在隐性的网络依赖或者系统/浏览器基于网络状态的资源节流，以下是具体的排查点和解决方案：

1. 检查地图底图的网络依赖 #

虽然GeoJSON是本地数据，但Leaflet默认的底图（如OpenStreetMap瓦片）是远程加载的。蜂窝网络下瓦片下载速度慢，会导致：

• Leaflet在渲染GeoJSON时，可能等待底图瓦片加载完成后才进行要素绘制（尤其是当地图视图需要加载新瓦片时）
• 大量瓦片请求占用浏览器网络线程，阻塞了GeoJSON渲染的JS执行

解决/验证方式：

• 切换为本地离线瓦片：使用L.TileLayer.Local加载本地存储的瓦片文件
• 临时禁用底图：在initLayer前先移除底图图层，仅渲染GeoJSON，对比耗时差异

2. 排查GeoJSON中的隐性远程资源 #

GeoJSON的properties中可能包含远程资源引用，比如：

• 自定义Marker的iconUrl指向远程图片
• 弹窗（Popup）内容包含远程图片、样式表链接
  这些资源会在initLayer过程中异步加载，蜂窝网络下加载慢会拖慢整体渲染计时

解决/验证方式：

• 遍历GeoJSON数据，将所有远程资源URL替换为本地路径
• 临时移除所有自定义图标和弹窗内容，仅渲染基础GeoJSON要素，测试耗时是否一致

3. 浏览器的网络状态节流机制 #

部分浏览器（尤其是Chromium内核）会根据网络质量自动调整JS执行优先级和CPU资源分配：

• 当检测到蜂窝网络（低带宽/高延迟）时，浏览器会启用节流策略，限制非关键JS任务的执行速度
• 这种节流会直接影响Leaflet渲染GeoJSON的耗时，即使数据完全本地

解决/验证方式：

• 在内置浏览器的开发者工具中，强制设置网络状态为"Online"（关闭节流），重新测试
• 若应用基于Electron等框架，可在启动时添加参数禁用网络节流（如--disable-network-throttling）

4. 渲染线程阻塞排查 #

使用浏览器性能分析工具（如Chrome DevTools的Performance面板），分别在LAN和蜂窝网络下录制渲染过程：

• 查看initLayer执行期间是否有网络请求任务占用主线程
• 对比两次录制的调用栈，确认是否有网络相关的异步任务阻塞了GeoJSON的绘制逻辑

5. Leaflet渲染配置优化 #

确保Leaflet使用最优的本地渲染模式：

• 启用Canvas渲染：创建地图时设置preferCanvas: true，减少DOM节点创建的开销
• 禁用不必要的网络相关插件：如定位、地理编码、图层切换器等依赖网络的功能

内容的提问来源于stack exchange，提问作者BIBD