Question

我正在尝试优化包含传单地图的网页的速度。根据GTMetrix和Google PageSpeed Insight，我应该：

优化以下图像以减小其尺寸[通过'https://services.arcgisonline.com/ArcGIS/rest/services/ ...提供的几张图像”，以下一代格式投放
延迟解析JavaScript https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.js
内联服务“ leaflet.js”和“ leaflet.css”

对于优化传单地图的类似经验，我将不胜感激。值得内嵌Leaflet的JS和CSS吗？我可以修改代码以调用其他较浅格式的“ arcgisonline.com”图像吗？

我的简单网页的代码

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.js'></script>
<div id='myMap' style='height:700px;width:700px;'></div>
<script>
var map = L.map('myMap').setView([51.505, -0.09], 13);
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {maxZoom: 19, attribution: 'Tiles &copy; Esri &mdash; Source: Sources: Esri, DigitalGlobe'}).addTo(map);L.tileLayer('https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z}/{y}/{x}', {maxZoom: 19}).addTo(map);
L.tileLayer('https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer/tile/{z}/{y}/{x}', {maxZoom: 19}).addTo(map); L.marker([51.505, -0.09]).addTo(map);
</script>

非常感谢您。

Answer 1

您所指的大多数速度“优化”是针对网页的，而对Leaflet的定义则很少。

通常通过仅将JS（包括Leaflet脚本标签）放置在页面主体的末尾来进行延迟，这样就不会延迟其余HTML的渲染。

您可以实现真正的延迟，但是它将变得更加复杂，以确保在完成Leaflet加载后执行脚本；在这种情况下，最简单的方法是实际上将Leaflet JS与脚本一起内联。但是，如果您的访客浏览到使用了这些完全相同资产的其他网站，那么您将失去潜在的Leaflet资产缓存。

对于Leaflet，您还可以使用“骨架”作为地图的占位符，以便在Leaflet和脚本加载时访问者看到静态图像。确保您有权托管静态图片。

Answer 2

这已经很老了，可能对您的问题有点笼统，但是关于地理数据：

您应该减少已加载的数据量（即，您真的需要所有观察结果吗？）
如果使用多边形，则应简化几何形状。令人难以置信的mapshaper可以为您的速度做很多事情。您可以使用它，例如使用rmapshaper软件包在R中进行预处理。
您可以考虑使用矢量切片，并在后端和前端之间实现一个tileserver，以针对不同的缩放级别（use.eg geoserver）预加载数据。或或者在内部动态地平铺数据您的数据库（postgis可以使用st_AsMV()来完成此操作）并将切片提供给您的传单界面，然后需要plugin根据地图的当前边界框为服务器创建动态请求或或者使用支持前端平铺的webmapframework（例如openlayers）。

如何优化传单地图的网络速度

2 个答案: