javascript - 加快图像下载时间

Question

在我们的应用程序中，我们提供像谷歌地图这样的在线 map :在 div(容器)中显示 map 图 block ，当用户拖动/移动容器时，将下载新的 map 图 block (实际上，它们是图像)。

然而，与谷歌地图不同的是，我们在容器中提供了不止一层，例如，在下面的图 block 中:

这只是一张图片，但在我们的例子中，可能有超过 5 张透明图像叠加在一起。

因此，一旦用户拖动或移动容器，我们将下载比以前多 5 倍的图像。是什么导致“鼠标拖动操作”这么慢，请问有什么办法可以改善吗？

在我看来，这是由 http 并行下载引起的。通常，我们将下载大约 6(当前 map View 中的 6 个图 block ，请参见下图)*5(图层)= 30 个图像，用户每次操作。

这是一个很大的要求。

我读了这篇论文: Performance Research, Part 4: Maximizing Parallel Downloads in the Carpool Lane

作者提供了一种方法“使用额外的别名”来增加我们页面的并行下载，这似乎是个好主意。

但我们的应用程序运行在 Intranet 网络中，没有 Internet，用户经常使用这个 url 浏览站点:

http://servername/app

我们的图 block 保存在:http://servername/app/tiles/...../xx.png

所以我不知道我们是否可以添加像这样的别名:

http://img1.servername/app/tiles/...../xx.png
http://img2.servername/app/tiles/...../xx.png ?

我不这么认为。 :(

那么就我而言，有什么改进性能的想法吗？

Answer 1

您可以将负载转移到服务器端，方法是制作一些仅合并这些图 block 的东西。

例如，您的服务器端程序将存在于 http://www.servername/app/tiles/gettile/?12&13&14并只返回图 block 12、13 和 14 的合并结果。