使用ASP.NET创建精灵图像

前端之家收集整理的这篇文章主要介绍了使用ASP.NET创建精灵图像前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我遇到了一个重大的性能问题.问题是在我的一个网站上有一个调用大约180个图像的滑块.这180个图像中的每一个都是由客户端浏览器通过个人URL下载的.它们是GIF和jpg的混合物,我想将它们组合成一个单独的图像;因为透明度不是问题,所以最好是jpg.图像存储在sql数据库中,并通过MVC控制器显示.我想这个精灵也可以通过MVC控制器创建,而不是更传统的通用ashx处理程序.

我做了一些谷歌搜索并遇到了一个blog post by Scott Hanselman.该帖子解释了如何结合检查图像,并通常做我想做的事情.它写于2005年,所以我很好奇是否有更好的方法.我一直在另一个项目上使用ImageResizer.我听了podcast by Mr. Hanselman与项目创始人谈论使用IIS和.NET调整图像大小.我从那个播客和我的经验中收集到,.NET和IIS中的图像处理可能会变得奇怪.

以这种方式调整图像并将图像合并为精灵仍然是一个好主意吗?我不想要一个精灵生成器,我想要一个有效的方法将.gif和jpg组合成一个可以用作精灵的单个图像.

解决方法

我建议不要将所有内容组合到一个图像中,因为在整个文件下载之前,您将延迟任何图像的“初始外观”.最好让可见的东西尽快加载,并优化其余的整体吞吐量.

例如,如果图像各自低于50KB,将它们组合为精灵图像可能是有意义的,但我建议一次合并10个.如果图像很小,每个像5KB,那么每次30个是合理的.

你有一系列的瓶颈值得担心

> HTTP开销和并发连接限制(精灵图像有助于此)
>服务器吞吐量开销(可通过正确的磁盘缓存和边缘缓存解决)
>浏览器渲染开销(Sprites最适合图标和小缩略图;它们不应该是巨大的,尝试将其保持在100万像素以下).

将现有图像连接在一起并以jpeg形式重新压缩有时可以改善压缩,有时则会引入伪像.例如,混合线条艺术和照片是一个坏主意. Jpeg在线条艺术上很糟糕.如果需要,可以使用PNG,甚至是PNG-8.有时您会发现100%质量的JPEG最终小于GIF或PNG版本,但大多数情况下,艺术线条最好以PNG格式存储.

如果您拥有这些照片的ID,并计划使用磁盘缓存进行动态路由,则可以显着简化您的任务.

ImageResizer库将让您可以非常轻松地“插入”其动态管道和磁盘缓存系统.

在这种情况下,您将使用implement IVirtualImageProvider和IVirtualBitmapFile.有关生成位图并让管道处理其余部分的简单示例,请参阅Gradient plugin.

您必须定义您的url语法并在FileExists和GetFile方法中查找它.像/combine-images.ashx?idlist=34,56,79,23\u0026amp;dir=horizo​​ntal\u0026amp;width=50\u0026amp;height=50之类的东西.

然后,您将必须加载每个图像,使用Managed API将其调整为位图实例,并在您分配的画布上绘制它.

您的大部分瓶颈可能是从sql提取图像.如果服务器上的RAM有限,则串行方法可能比并行方法更安全(即,一次从sql获取一个映像,调整大小并绘制它,处理数据,继续).如果您的源图像开始时很小,那么多线程评估可能没问题.请记住,即使磁盘已缓存,也需要快速启动,因为请求默认在30秒后超时.如果操作正确,您应该能够在2秒内使用空磁盘缓存提供10个图像精灵,缓存后为20毫秒.

如果这看起来有点压倒性,我提供custom plugin development,但有一个队列.

1个每个请求文件方法有很多优点,在跳过Sprite的潮流之前,可能值得尝试使用ImageResizer的磁盘缓存和sqlReader插件.并不是说这是错误方法,但未缓存的MVC sql可能会增加很多可能有所贡献的开销.

猜你在找的asp.Net相关文章