加快图像下载时间

时间:2011-06-28 13:29:38

标签: javascript performance http parallel-processing

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

然而,与谷歌地图不同,我们在容器中提供多个图层,例如,在以下图块中:

enter image description here

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

因此,一旦用户拖动或移动容器,我们将下载比以前多5倍的图像。这将导致“鼠标拖动操作”如此缓慢,所以我想知道是否有任何方法可以改善它?

在我看来,这是由http Parallel Downloads引起的。通常,我们将下载大约6个(当前地图视图中的6个图块,请参见下图)* 5(图层)=用户每次操作30个图像。

这是一个很大的要求。

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

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

但我们的应用程序在没有Internet的Intranet网络中运行,用户经常浏览该网站使用此URL:

http://servername/app

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

所以我不知道我们是否可以添加别名:

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

我不这么认为。 :(

那么在我的情况下,是否有任何提高性能的想法?

3 个答案:

答案 0 :(得分:1)

您可以通过制作仅合并这些切片的内容将负载移动到服务器端。

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

答案 1 :(得分:0)

在所有方向下载下一个方块的图像,而用户没有移动地图,因此您可以预先下载它们。
只下载第一层并显示它,然后下载下一个并显示,等等 一般来说,内部应该很快。确保图像本身已经过优化 如果确实无法使用子域,请咨询系统管理员 为什么你使用6个瓷砖 - 检查你是否可以用一个瓷砖,你将保存http请求。另外,确保正确缓存。

答案 2 :(得分:0)

假设Intranet中的计算机通过DNS服务器,您可以在Intranet中使用域名。在DNS服务器上,您可以创建所有别名域并将它们指向同一服务器。 如果没有DNS服务器,您可以在每台PC上打开HOSTS文件并将这些别名放在同一服务器IP上。 如果这不是一个选项,那么你应该将5个透明图层作为单个图像。因此,对于某个坐标,您可以加载一个组合了5个图像的透明图像,而不是加载5个透明图像。您可以通过运行将相同坐标的图像组合到一个文件中的某个工具来静态地执行此操作,也可以通过点击一些合并5个图像并作为一个文件发出的http处理程序来动态地执行此操作。