我应该将 Leafelt-<script> 标签放在 HTML 标记中的什么位置，我可以使用异步还是延迟？答案

【问题标题】：Where should I put leafelt-<script> tags in HTML markup and can I use async or defer?我应该将 Leafelt-<script> 标签放在 HTML 标记中的什么位置，我可以使用异步还是延迟？
【发布时间】：2017-12-30 01:54:04
【问题描述】：

我有一个关于将传单以最佳方式集成到 HTML 文档中的问题。

我已阅读：Where should I put <script> tags in HTML markup?

如果我正确地解释了这些信息，那么如果可能的话，你应该包含带有属性 async 或 defer 的 JavaScript。如果可能的话，你应该把 Js 文件放到 -element 中。

Leaflet.js 必须完全加载才能显示地图。因此，我不能使用属性“异步”。但我可以使用属性“延迟”。集成leaflet.js 的最佳位置是-element。

之后，我必须将我的个人 JavaScript 代码与 defer-attribute 集成，以便它在 leaflet.js 之后执行。我必须将此 js 文件放在保存我的地图的 div 之后。

这是正确的还是使用 defer 会出现问题，是否有更好的地方来集成 js 文件？

我问这个问题，因为我在 http://leafletjs.com/examples/ 网站上的示例中没有看到这个属性 async 或 defer。

感谢您的回答。

这是我运行没有错误的示例代码：

<html>
  <head>
    <title>Eine OSM Karte mit Leaflet</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.1.0/dist/leaflet.css" />
  </head>
<body>
<script src="https://unpkg.com/leaflet@1.1.0/dist/leaflet.js" defer></script>
  <div id="map" style="width: 600px; height: 400px"></div>
  <script src="mymap_99.js" defer></script>
</body>
</html>

文件mymap_99.js 是一个简短的测试图：

var map = L.map('map',
{
  center: [50.27264, 7.26469],
  zoom: 10
});
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);

转帖：https://groups.google.com/forum/#!topic/leaflet-js/fRC9ElCtFaY

【问题讨论】：

标签： javascript leaflet

【解决方案1】：

你说得对，你的第二个脚本依赖于第一个被加载的脚本，但这并不意味着你不能使用async。

如果您等待加载事件触发，则可以确保传单库在尝试使用之前已加载：

<html>
  <head>
    <title>Eine OSM Karte mit Leaflet</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.1.0/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.1.0/dist/leaflet.js" async></script>
  </head>
<body>
  <div id="map" style="width: 600px; height: 400px"></div>
  <script>
  window.addEventListener('load', function() {
    var map = L.map('map',
      {
        center: [50.27264, 7.26469],
        zoom: 10
      }
    );
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(map);
  }, false);
  </script>
</body>
</html>

我认为如果可能的话，使用async 比使用defer 更好（因为异步脚本在何时加载和何时执行方面为浏览器提供了更大的灵活性）。在这种情况下，您可以将async 用于两个脚本（前提是您在绘制地图之前等待加载事件）。

【讨论】：

非常感谢您的回答。你知道为什么leaflet 很少与属性async 一起使用吗？
@astridx 我会假设文档尽可能简洁，并专注于展示如何使用传单本身，并假设用户熟悉可用于加载 JavaScript 代码的各种方法…