Leaflet 如何优化传单地图的web速度

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

优化以下图像以减小其大小[从“…”提供的多个图像]，以下一代格式提供这些图像

延迟JavaScript的解析

在线提供“传单.js”和“传单.css”

如果有类似的经验，我将不胜感激。是否值得在线提供传单的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>

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，属性：'Tiles©；Esri&mdash；来源：来源：Esri，DigitalGlobe'}）；L.tileLayer（'https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer/tile/{z} /{y}/{x}'，{maxZoom:19}）；
L.tileLayer（'https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer/tile/{z} /{y}/{x}'，{maxZoom:19}）；L.标记（[51.505，-0.09]）。添加到（地图）；

非常感谢。

您提到的大多数速度“优化”都是针对网页的，很少有专门针对传单的

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

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

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

您提到的大多数速度“优化”都是针对网页的，很少针对传单

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

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

---

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

这是一个非常古老的问题，您的问题可能有点笼统，但关于地理数据：

• 您应该减少加载的数据量（即，您真的需要所有观察吗？）
• 如果使用多边形，则应简化几何图形。难以置信的地图塑造器为你的速度做了很多。您可以使用它，例如，在R中与包一起使用，以预处理您的数据
• 您可以考虑使用矢量平铺，并在后端和前端之间实现一个平铺服务器，该服务器为不同的缩放级别预加载数据（例如使用或或者在数据库中动态平铺数据（postgis可以使用）并向传单interace提供瓷砖，然后传单interace需要根据地图的当前边界框为服务器创建动态请求或或者使用支持前端瓷砖的webmapframework（例如openlayers）

  ---

这是一个非常古老的问题，您的问题可能有点笼统，但关于地理数据：

• 您应该减少加载的数据量（即，您真的需要所有观察吗？）
• 如果使用多边形，则应简化几何图形。难以置信的地图塑造器为你的速度做了很多。您可以使用它，例如，在R中与包一起使用，以预处理您的数据
• 您可以考虑使用矢量平铺，并在后端和前端之间实现一个平铺服务器，该服务器为不同的缩放级别预加载数据（例如使用或或者在数据库中动态平铺数据（postgis可以使用）并向传单interace提供瓷砖，然后传单interace需要根据地图的当前边界框为服务器创建动态请求或或者使用支持前端瓷砖的webmapframework（例如openlayers）

  ---

您无法对“'arcgisonline.com”图像执行任何操作，因为这些只是从MapServer加载的地图分幅。您无法对“'arcgisonline.com”图像执行任何操作，因为这些只是从MapServer加载的地图分幅。