0

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

  1. 优化以下图像以减小它们的大小 [从' https://services.arcgisonline.com/ArcGIS/rest/services/ ...' 提供的几个图像]，以下一代格式提供它们
  2. 延迟解析 JavaScript https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.js
  3. 内联提供“leaflet.js”和“leaflet.css”

如果有任何类似的优化 Leaflet 地图的经验，我将不胜感激。是否值得为 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>

非常感谢。

4

2 回答 2

2

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

  • 你应该减少加载的数据量（即你真的需要所有的观察吗？）
  • 如果您使用多边形，您应该简化几何图形。令人难以置信的地图整形器为您的速度做了很多。您可以使用它，例如在 R 中使用rmapshaper包来预处理您的数据。
  • 您可以考虑使用矢量切片并在后端和前端之间实现一个 tileserver，为不同的缩放级别（use.eg geoserver）预加载您的数据，或者在数据库中动态平铺数据（postgis 可以使用st_AsMV()做到这一点）并将瓷砖提供给您的传单界面，然后需要一个插件来根据地图的当前边界框为服务器创建动态请求，或者使用支持前端平铺的 webmapframework（例如 openlayers）。
于 2020-05-16T18:37:55.897 回答
1

您提到的大多数速度“优化”都适用于网页，特别是 Leaflet 几乎没有。

延迟通常通过简单地将您的 JS（包括 Leaflet 脚本标记）放在页面正文的末尾来实现，这样它就不会延迟 HTML 其余部分的呈现。

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

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

于 2019-06-23T02:57:30.277 回答