一种基于域名分片的地图瓦片快速加载方法研究.pdf

6月一种基于域名分片的地图瓦片快速加载方法研究贾晓亮，高星艳（山西省测绘地理信息院，山西 太原 030001）摘要：地图瓦片是通过对地图采用分级切片方式以提高地图加载效率的一种重要技术方法，在一些主流的地图平台已得到了广泛应用。随着电脑显示器屏幕分辨率的提高和地图数据内容的增加，在浏览地图过程中加载的地图瓦片数量也随之大量增加。针对地图瓦片数量激增与浏览器并发限制的矛盾，研究基于域名分片技术提升地图瓦片加载效率的方法，并设计了实验方案，对浏览器在 HTTP/1.1、HTTP/2.0 协议下分别使用域名分片方式加载地图进行了对比分析。关键词：地图瓦片；浏览器；HTTP 协议；并发限制；域名分片中图分类号：P208文献标识码：A文章编号：2095-7319（2023）03-0001-03Research on a method of faster loading map tiles based on domain shardingJIA Xiaoliang，GAO Xingyan（Shanxi Institute of Surveying and Mapping Geographic Information,Taiyuan 030001，China）Abstract:Map tile is an important technological method to improve the efficiency of map loading by slicing and grading the map.Ithas been widely used in mainstream map platforms.With the screen resolution improving and the map content increasing,the numberof map tiles while browsing the map has also increased obviously.Aimed at the problem between many map tiles explosion andconcurrent connections of browser,the experimental plan was designed in the research on a method of faster loading map tiles basedon domain sharding,and it conducted the comparative analysis on the browser of loading map tiles in the separate use of domainsharding by HTTP/1.1 and HTTP/2.0 protocols.Key words:map tile;browser;HTTP protocol;concurrency limit;domain sharding0引言为了提升网络电子地图服务在浏览器中的加载显示效率，越来越多的网络电子地图都采用地图瓦片技术。使用地图瓦片分级加载，可以使地图在不同比例尺级别中都能清晰、快速显示，并且能够做到按需加载1-2。随着地图数据内容的不断丰富、地图图层不断增加，特别是电脑显示器、电视等显示设备屏幕分辨率升级为 2K 或 4K，屏幕显示地图瓦片的数量也随之增长，在浏览器中加载显示地图的速度越来越慢。当前各种浏览器对请求同一域名服务器资源均有最大并发限制3，超过并发限制数就会阻塞后续的请求，影响地图瓦片的请求效率，降低地图页面加载速度，对用户体验造成不适。为此，针对浏览器并发限制规则，提出了域名分片加载地图瓦片的方法。本文通过实验模拟 HTTP/1.1、HTTP/2.0 协议下使用域名分片方式加载地图，对浏览器请求加载地图瓦片的耗时进行对比分析，验证域名分片加载地图瓦片方法并优化调用效率。1浏览器加载地图瓦片综述1.1浏览器请求地图瓦片过程浏 览 器 访 问 地 图 瓦 片 主 要 通 过 超 文 本 传 输 协 议（HTTP）。一次完整的浏览器请求服务器资源过程分为 5 个步骤：分别是域名解析、建立连接、发送请求、等待响应和接收数据。域名解析，也叫 DNS 解析，是从域名到 IP 的解析。建立连接，即发起 TCP 的 3 次握手，客户端首先发送一个连接试探，服务端监听到连接请求报文后，如同意建立连接，则向客户端发送确认，客户端收到确认后还需再次发送确认，同时携带要发送给服务端的数据，服务端收到客户端的确认之后，最终建立 TCP/IP 的连接。发送请求，经过 TCP 3 次握手之后，浏览器发起了 HTTP 的请求，请求报文包含请求的收稿日期:2022-04-12作者简介:贾晓亮（1981），男，山西榆次人，硕士，高级工程师，主要从事地理信息等工作。E-mail：xiao-贾晓亮，高星艳：一种基于域名分片的地图瓦片快速加载方法研究1经纬天地Survey World2023年第3期No.32023方法、请求的 URL、请求所使用的协议等。服务器端 WEB程序接收到 HTTP 请求以后，就开始处理该请求，处理之后就返回给浏览器相应的资源，等待浏览器下载解析等。1.2浏览器请求协议HTTP/1.0：HTTP/1.0 是无状态、无连接的应用层协议4。每一个 HTTP 请求都得发起一次独立的 TCP 连接，耗费资源且效率很低。HTTP/1.0 是基于“请求应答”模式的，规定下一个请求必须在前一个请求响应到达之后才能发送。假设前一个请求响应一直不到达，那么下一个请求就不发送，后面的请求就阻塞了，即队头阻塞。HTTP/1.1：HTTP/1.1 是目前最为主流的 HTTP 协议版本，引入长连接 keep-alive，也叫持久连接，一个域名共用一个 TCP 连接。这种方式的好处在于减少了 TCP 连接的重复建立和断开所造成的额外开销，减轻了服务器端的负载；缺点是无状态，队头阻塞，通信使用明文传输，传输过程中信息可以抓包直接获取，信息暴露、安全性差。HTTP/2.0：HTTP/2.0 协议是基于 HTTPS 的，更加安全。HTTPS 就是在 HTTP 与 TCP 之间增加 SSL/TSL 安全传输协议，HTTP2.0 实现了真正的并行传输，它能够在一个 TCP 上进行任意数量的 HTTP 请求，移除了 HTTP/1.1 中的串行请求，不需要排队等待，彻底解决队头阻塞问题，降低了延迟，大幅度提高了连接的利用率。1.3浏览器并发限制由于 HTTP/1.1“一发一收、串行队列”的特点，一旦出现一个请求响应延迟，后续请求也会被阻塞。HTTP 的并发连接就是缓解队头阻塞问题的，也就是浏览器可以同时对一个域名发起多个长连接，用数量来解决质量的问题。但是，浏览器也不能无限制地增加并发连接数，如 Google Chrome 等浏览器对于同域名并发请求个数限制为 6 个。2基于域名分片的地图瓦片加载方法设计基于多客户端时服务器处理高并发访问的压力，浏览器一般都有对同一域名 HTTP 最大并发连接数的限制以及多域名下的最大并发连接数限制。为解决浏览器对同一域名的并发连接数限制，可以采用域名分片方法将请求拆分到多个域名下，如 s1.localhost、s2.localhost（localhost 可替换为真实域名），通过这些域名都可以请求到服务器的地图瓦片数据。假设浏览器对同一域名可发出的 HTTP 最大并发连接数为 m，对多域名下的最大并发连接数为 M。浏览器在请求地图瓦片时为每个域名都建立 m 个连接，n 个域名请求即可发出 mn 个连接，从而实现并发数的扩展。当 mnM 时，可以将浏览器最大并发请求数充分利用，进而有效缩短地图页面加载时间，避免了用户等待。基于域名分片的地图瓦片加载方法的实验代码如图 1 所示。3实验验证在实际应用中，影响浏览器加载地图瓦片效率的因素可能是多样的，为排除数据、网络、硬件和系统的差异，本次实验在单机环境下部署运行，使用纯前端方式调用模拟地图瓦片，以 Chrome 浏览器为例，集中测试屏幕分辨率、HTTP 协议下域名分片不同方式对地图加载效率的影响。通过设置代码参数，使电脑显示器可以分别模拟 1K、2K、4K 屏幕，在已知屏幕分辨率及瓦片尺寸的条件下，按铺满屏幕要求可计算出长宽各自所需的瓦片数，其乘积即为铺满屏幕所需地图瓦片的总数。前端请求模拟瓦片，在屏幕中绘制上面计算出的长宽数的单元格构成的表格，每个单元格分别填充一张瓦片，使得地图瓦片有序排列铺满屏幕。在不同分辨率下，分别使用 HTTP/1.1 协议、HTTP/2.0 协议下域名分片方式请求瓦片加载地图，对比不同条件下地图瓦片的加载效率，观察浏览器瀑布流（Waterfall），获取浏览器请求地图瓦片的耗时，分析浏览器请求地图瓦片所花费的时间与运行机制等。在 1K、2K、4K 屏幕分辨率下，分别在 HTTP/1.1、HTTP/2.0 协议下使用域名分片技术请求地图瓦片，每种加载方式采用 50 次实验计时平均值，加载时间对比结果如表 1 所示。从实验结果数据来看，随着屏幕分辨率的增加，浏览器图 1域名分片方式加载地图瓦片的实验代码屏幕分辨率1K 屏幕（19201080）2K 屏幕（25601440）4K 屏幕（38402160）HTTP/1.1域名分片数1100.6136264298.7139.7257.4393.7129256.9496.8137257.6598.8129.4261.2HTTP/2.0域名分片数1164.9233.8478.72172.8236.2487.43179239.4485.3表 1Chrome 浏览器不同方式下加载地图瓦片的时间单位：ms26月在相同的请求方式下加载地图瓦片的时间变长，说明请求时间与请求资源的数量直接相关。使用 HTTP/1.1 协议，对 1K屏幕来说，域名分片数由 1 增加到 3 时，加载时间逐渐缩短，页面加载效率逐渐提高；域名分片数继续增加地图瓦片请求耗时又逐渐拉长，但总体要比 1 个域名时耗时要短，3 个域名分片数时效率最高。屏幕分辨率扩展到 2K 屏幕、4K 屏幕时，地图瓦片加载效率在 3 个域名分片数时达到最高，总体来说使用域名分片要比单一域名时的请求耗时缩短。实验数据表明：在 HTTP/1.1 协议下，使用域名分片的方式可以有效缩短资源请求时间，提高页面加载效率。在使用 HTTP/2.0 协议时，域名数增多时反而请求时间变长，页面加载效率降低，说明使用 HTTP/2.0 协议时域名分片方式对提高浏览器请求效率无优化作用；同一屏幕分辨率下，HTTP/2.0 协议请求方式比相同域名数的 HTTP/1.1 协议请求所花费时间明显增多，说明 HTTP/2.0 协议在发出一次 HTTP 连接时要花费更长的时间。分析实验过程中浏览器的瀑布流数据，Chrome 浏览器在 HTTP/1.1 协议下对同一域名的最大并发连接数限制为 6个，域名数每增加 1 个浏览器发出的连接数可增加 6 个，加到 3 个域名时浏览器发出的连接数增加到 17 个，并且不会随着域名数的增加而继续增加。HTTP/2.0 协议下浏览器发出请求时在不超过最大连接数时，对同一个域名开启一个独立的连接，且在同一个连接中可以处理大量的 HTTP 请求而无阻塞问题，但是在建立连接之前会花费较多时间。因此，采用 HTTP/1.1 协议的域名分片方式加载地图瓦片的效率优于 HTTP/2.0 方式。浏览器在不同协议与不同域名分片方式下请求地图瓦片的瀑布流分别如图 2、图 3 所示。浏览器在不同协议与不同域名分片方式下达到的最大 HTTP 连接数的对比结果如表 2 所示。4结语通过实验对比分析得出：HTTP/1.1 协议下采用域名分片方式将地图瓦片请求分散到不同域名下，可以避开浏览器对同域名的并发限制问题，增加并发连接数量，提高地图瓦片调用效率。但域名分片并不是越多越好，需要综合考虑数据量与增加 HTTP 连接的开销以及服务器并发性能问题。如 Chrome 浏览器请求域名分片数达到 3 个时能够建立的HTTP 连接数已经最大，继续增加域名分片并不会再增加HTTP 连接，反而还会增加域名解析等负担。而 HTTP/2.0 协议解决了 HTTP/1.1 请求阻塞的问题，实现了真正的多路复用。由于 HTTP/2.0 协议使用 SSL 增加了连接 HTTP 应答/验证/加密等损耗，每一次握手需要耗费更多的时间。因此，HTTP/2.0 协议下浏览器加载地图瓦片所用的时间反而更长，所以在没有网络安全认证的要求时，使用 HTTP/1.1 协议的域名分片方式可以更有效地提高地图加载效率。通过域名分片方式加载地图瓦片的方法也可以运用在三维地形加载、倾斜摄影模型加载等涉及大量 HTTP 请求的应用场景中。参考文献：1罗智勇,黎小东.基于数据库存储方案的高性能瓦片图服务研究J.地理与地理信息科学,2013,29(3):48-51.2罗鹏,许等平,任怡.全国林地“一张图”高性能地图瓦片服务技术研究J.中南林业科技大学学报,2018,38(7):26-31.3李雨晨,张大方,张继,等.一种针对浏览器并发连接限制的 Web 前端性能优化算法J.计算机应用与软件,2013,30(12):4-7.4李康,陈清华,卢金星.HTTP协议研究综述J.信息系统工程,2021(5):126-129.（c）3 个域名分片（d）4 个域名分片（e）5 个域名分片图 2Chrome浏览器 HTTP/1.1协议请求地图瓦片的瀑布流（a）1 个域名分片（b）2 个域名分片（a）1 个域名分片（b）2 个域名分片（c）3 个域名分片图 3Chrome浏览器 HTTP/2.0 协议请求地图瓦片的瀑布流协议类型域名分片数连接数HTTP/1.116212317417517HTTP/2.0112233表 2Chrome 浏览器不同方式下发出 HTTP 连接数比较贾晓亮，高星艳：一种基于域名分片的地图瓦片快速加载方法研究3