Как оптимизировать скорость веб-карты Leaflet - PullRequest
Новая
       67

Как оптимизировать скорость веб-карты Leaflet

0 голосов
/ 21 июня 2019

Я пытаюсь оптимизировать скорость веб-страницы, где включена карта Leaflet. Согласно 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" встроенными

Буду признателен за любые подобные опыты по оптимизации карт листовки Стоит ли обслуживать JS и CSS из Leaflet? Могу ли я изменить код, чтобы называть изображения 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>

Большое спасибо.

1 Ответ

1 голос
/ 23 июня 2019

Большинство «оптимизаций» скорости, на которые вы ссылаетесь, являются общими для веб-страниц, в частности, для Leaflet мало специфических.

Обычно к отсрочке обращаются, просто поместив свой JS (включая тег сценария Leaflet) простодо конца тела вашей страницы, чтобы он не задерживал рендеринг остальной части вашего HTML.

Вы можете реализовать истинную отсрочку, но тогда это становится более сложным, гарантируя, что ваш скрипт выполняется после загрузки Leaflet;в этом случае проще всего было бы встроить Leaflet JS вместе с вашим скриптом.Но тогда вы потеряете потенциальный кеш актива Leaflet, если ваш посетитель просматривал другие сайты, которые использовали эти точно такие же активы.

В случае Leaflet вы также можете использовать «скелет» в качествезаполнитель для вашей карты, чтобы ваш посетитель видел статичное изображение во время загрузки Leaflet и вашего скрипта.Убедитесь, что у вас есть право на размещение статического изображения.

...