为什么小图片都占用了那么多内存

I_am_a_java_CaiNiao 2011-11-10 03:51:54

大家好，本人有一个项目，其中有一个功能是点击某按钮，从服务器端加载50张图片，展示于网页，可实现通过鼠标滚轮调整图片大小。用户操作模式为根据图片上的内容将图片归类，归完一张，则网页上少一张。现遇到如下问题：
1、50张图片，每张都不超过30K，渲染到网页上后，占地面积是1180*820。而加载前跟加载后，IE/FF/chrome的内存均飙升了600M；
问：浏览器展示图片时所耗的内存跟那些因素有关，也就是对于<img src=...>这个元素的渲染，所耗的内存取决于那些因素？跟图片本身的“重量”（也就是多少字节数）有关吗？跟img的width、height关系大吗？

2、当我通过鼠标滚轮调整图片大小时，放大图片，则内存上升；反之则内存下降。图片调整大小我是这么实现的：
img.style.width = xxx; img.style.height = xxx;
问：这个现象可能恰恰能解释第一个问题。可不可以这么理解：浏览器要显示图片，则需在页面上腾出“地方”给图片，这里的“地方”就是内存，而图片占用的地方面积越大，内存也就耗得越多？

3、问：有什么好的方法，可以使图片渲染到网页上时，不会使浏览器消耗内存飙得太高？我项目中其实需要加载的图片远远大于50张，但当时考虑到内存，所以限制为50。等用户处理到一定时候，只剩10张时，系统自动加载40张，于是网页上又有50张，于是浏览器内存一直居高不下，用户反馈很卡。

4、谢谢~

...全文

667 14 打赏收藏转发到动态举报

写回复

用AI写文章

14 条回复

切换为时间正序

请发表友善的回复…

发表回复

I_am_a_java_CaiNiao 2011-11-12

打赏
举报

[Quote=引用 12 楼 shine333 的回复:]

引用 10 楼 i_am_a_java_cainiao 的回复:
引用 9 楼 shine333 的回复:

大哥4000×5000---》200×300当然失真了！！！！！！
初中相似，或者比例学过没有啊
比如4000×5000--》200×250

4000×5000--》200×250，真不会失真？

4000×5000--》200×250会不会失真很难说，但是这个尺寸失……
[/Quote]
谢谢~

I_am_a_java_CaiNiao 2011-11-12

打赏
举报

shine333 2011-11-11

打赏
举报

[Quote=引用 10 楼 i_am_a_java_cainiao 的回复:]
引用 9 楼 shine333 的回复:

大哥4000×5000---》200×300当然失真了！！！！！！
初中相似，或者比例学过没有啊
比如4000×5000--》200×250

4000×5000--》200×250，真不会失真？
[/Quote]
4000×5000--》200×250会不会失真很难说，但是这个尺寸失真的可能性，远远远远远远远远远远远远远远远远远远远远远远远远远远远远远远小于4000×5000---》200×300。回答完毕。

wangjiangbo2 2011-11-11

打赏
举报

同一个图片按比例缩小过没看出失真

I_am_a_java_CaiNiao 2011-11-11

打赏
举报

[Quote=引用 9 楼 shine333 的回复:]

大哥4000×5000---》200×300当然失真了！！！！！！
初中相似，或者比例学过没有啊
比如4000×5000--》200×250
[/Quote]
4000×5000--》200×250，真不会失真？

shine333 2011-11-10

打赏
举报

大哥4000×5000---》200×300当然失真了！！！！！！
初中相似，或者比例学过没有啊
比如4000×5000--》200×250

I_am_a_java_CaiNiao 2011-11-10

打赏
举报

另外，我在问题中提到的“放大图片则内存上升，反之下降”这个说法是有问题的，这其实是我测试时候的一个误解。我是通过响应鼠标滚轮事件来改变img.style.width和img.style.height的，没错，当我滚动滚轮时，IE占用内存确实变化了，当时我以为是img的width和height变了的原因，其实不是的。变化原因并是因为js响应了滚轮事件，滚轮事件是连续循环地响应mousewheel的，故在这里js消耗了内存。因而即使我缩小图片，内存也应该是上升的，我当时看到下降了，其实是因为滚动的时候停了一会儿，js也就不响应事件了。

I_am_a_java_CaiNiao 2011-11-10

打赏
举报

多谢各位关注。
找到问题所在了，经测试发现，网页中图片占用内存与图片本身的像素大小有关，与图片的轻重（即字节数）无关，与img元素中的width/height也无关。我的问题在于我项目中的图片都是客户从扫描仪扫上来的，虽然已经从tif转为png了，已经轻了很多了（原来一张tif有1-2M，后来转为png后平均40-50K），但是长宽像素依然未变，居然都有4000 * 5000左右，所以非常占内存。我测了一下，把图片改为200 * 300后，网页就很快了。
现在问题：从4000*5000改到200*300左右，图片可能会失真？导致客户无法辨认上面的信息，影响业务。各位有没有熟悉扫描仪的，一般设为扫描后长宽多大的图片？