Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

合并缩略图的一些想法

  对于商品展示之类的页面,通常存在大量缩略图。如果对这些缩略图逐个加载,那就需要大量的HTTP请求。这是不小的一笔开销,而且前端的并发数是有限的,全被图片占用可能导致其它问题。于是我们就要需要一种避免这些缩略图占用HTTP连接的办法。
  可否使用CSS Sprites来做呢?简单的实现是可以的,使用本地储存记录图片在合并后图片的位置,即使以后需要单独展示一张图片也可以从缓存中读取并展示。但有一个无法解决的问题,前端程序无法判断一个HTTP缓存时候存在。如果用户手动清除掉缓存,之后加载的内容可能就会是多余的。
  那么,HTTP缓存作为缩略图的存储无法满足需求了,于是考虑其它程序可控的存储方式。既然如此,我们就不必拘泥于CSS Sprites,现代Web是可以切割图片和操作字节数组的。直接把图片做成DataURL比CSS Sprites更容易使用和储存。这里就有两种可行的做法,一种是后端把图片统一起来做成大图,前端加载图片后切割,做成DataURL储存;另一种是后端直接把文件做成一种简易文件合并格式,前端按这个格式操作字节数组来得到各个文件,做成DataURL储存。第一种做法需要绘图,这会带来不必要的开销。但它整个是图片,如果直接使用可以在加载过程中显示出已经加载的图片部分。另一种方式可能就需要自己手动分析传输的数据流来切割图片了,但它不需要绘图,节省了一些资源。
  这么考虑就有点着调了,于是我就考虑HTTP是否有自带的类似功能呢?这让我想到了SPDY,它是HTTP的一种增强协议,概念是使用单个TCP连接同时发起多个HTTP请求,这正是我们要解决的问题。keep-alive虽然支持单个连接的多次HTTP通信,但它每次只能处理一个HTTP会话,而SPDY则可以同时处理多个HTTP会话。不过SPDY技术目前也不算成熟,使用还存在一些局限性。也许上文中描述的做法会比较实用的。
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^