如何在 Leaflet 地图图块提供商上使用 DNS 预取？答案

【问题标题】：How can I use DNS-prefetch on Leaflet map tile providers?如何在 Leaflet 地图图块提供商上使用 DNS 预取？
【发布时间】：2018-11-20 08:57:29
【问题描述】：

我在 Leaflet 地图中使用了多个地图切片提供程序，并希望在地图切片图层提供程序/站点上使用 DNS 预取来减少页面加载时间。但令人困惑的是，这些网站的 URL 使用不同格式的子域：https://{s}.tile.openstreetmap.org/，如 a.tile.openstreetmap.org 和 b.tile.openstreetmap.org。

var mapnik = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    attribution: "&copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a>"
});
var stamenT = L.tileLayer("https://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.png", {
    attribution: "Map tiles by <a href='https://stamen.com'>Stamen Design</a>, <a href='https://creativecommons.org/licenses/by/3.0'>CC BY 3.0</a> &mdash; Map data &copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a>",
    subdomains: "abcd"
});

我应该如何对这些外部资源使用 DNS 预取。我是否必须为每个子域使用link rel="dns-prefetch preconnect"，或者我必须为单个域仅使用一个（例如仅使用：

<link rel="dns-prefetch preconnect" href="https://openstreetmap.org">

代替：

<link rel="dns-prefetch preconnect" href="https://a.tile.openstreetmap.org"> <link rel="dns-prefetch preconnect" href="https://b.tile.openstreetmap.org">

等等）。

【问题讨论】：

标签： dns leaflet cross-domain subdomain prefetch

【解决方案1】：

您需要在每个子域上使用 dns-prefetch 和 preconnect，因为 DNS 不知道什么是域和子域。看看它有什么不同会很有趣。

【讨论】：

是的，但那部分“DNS 对域和子域的构成没有内在的了解。”不是那么真实。名称服务器必须了解区域切割以正确处理 DNSSEC 验证和 QNAME 最小化。请参阅tools.ietf.org/html/rfc7816 及其附录 A：“此算法在存在未知区域切割的情况下使用 QNAME 最小化执行名称解析。”。另见 RFC2181 中的定义：通过指定子区域来源的 NS 记录的存在，在父区域中指示区域切割的存在。
@PatrickMevzek 公平评论，我没有想到这一点。感谢您的指正。不过，我认为这不会影响手头的问题。