最近做了一个类似美丽说的图片分享网站,测试时发现打开某个网页时,firefox在资源管理器里的内存占用从原来的130M瞬间上升到了800M。。。这是个恐怖的数字。回去看自己的代码,猜想有没有可能是内存泄露的原因,但是内存泄露也不至于“瞬间”上升吧?接着发现某些页面就没有这种现象,对比了下,原因便一目了然了,占用巨大内存的页面拥有大量的高压缩图片——这个名字我自己起的,指的就是那些原尺寸很大,但是显示时通过css手动重置到了一个小尺寸的图片。因为没有设置图片尺寸限制,有些朋友上传了2048*2048以上的图片,而我又把它们压成了280的宽度展现,于是就悲剧了。
弥补办法就是:
1. 设置图片上传尺寸限制;
或者
2. 在后台对上传的图片根据使用情况分别压缩成不同大小的图片,比如头像分为70*70, 200*200两种情况,那种那重新压缩生成两张图片,显示的时候在不同的位置显示不同的图片,尽量避免在前端使用css压缩原图(当然,完全避免压缩也不太可能)。
其实早就知道页面上尽量不要有压缩图片的性能要求,但是一直以为这个只是会带来加载速度的问题,没想到对内存影响也相当大,过去真是太疏忽了。
PS:大分辨率图片压缩显示还有一个问题就是,在360浏览器下,会显示成一条直线。。。这次正好通过后台剪切,一次性解决了。