Javascript的Image对象、图像渲染与浏览器内存两三事
来源:互联网 发布:网站seo公司哪家专业 编辑:程序博客网 时间:2024/05/14 18:42
最近做的一个页面需要播放大量大尺寸高质量的图片。由于设计要求和限制一千多张图片必须放在同一个页面中切换,在这个过程中发现了许多关于Image对象和浏览器的内存问题,然而网上讨论该问题的文章并不多。希望我这篇东西能给读者一些参考。
使用Javascript创建new Image()对象的最主要作用就是实现图片预加载。
预加载的实现很简单,百度谷歌一下会有很多相关的文章。其核心说到底也就两句话:
var img = new Image();img.src = "my_image.jpg";
废话不多说,我们来做几个实验。用IE 9、Firefox 14、Chrome 21这三大主流引擎代表浏览器测试比较。详细的测试结果我就不列出来啦,各位自己可以去试一下。这里主要比较的是物理内存占用情况。
图片参数:1440*758px 17.4KB/每张 共100张 1.7MB
实验一:Image对象参照实验
利用100张同样尺寸和大小的图片创建100个Image对象作为参照。代码如下:
var imgs = [];for(var i =0; i<100; i++){imgs[i] = new Image();imgs[i].src = "images/"+( i+1 + Math.pow(10,3)).toString().substr(1) + ".jpg";}
实验二:<img>标签参照实验 & 浏览器渲染
用img标签直接放出100张图片。
$(function(){for(var i =0; i<100; i++){$("body").append('<img src="images/'+( i+1 + Math.pow(10,3)).toString().substr(1) + '.jpg">');}});
这个实验中,你可以发现非常有趣的一点。加载完100张图片之后,内存占用与实验一中相差无几,稍微大一些。而当你将页面向下翻,内存占用会不断升高。
为什么会升高呢?因为浏览器在将这些图片渲染到页面上。用about:memory命令在Firefox中查看详细的内存占用情况,就会发现,占用1.7MB的图片经过渲染之后会占用几十兆内存。经查资料并证实,浏览器渲染图片的内存占用大小只跟图片的长宽有关,跟图片文件的大小并没有关系。
实验三:Image对象preload图片,用<img>标签渲染
实验代码:
<input type="button" value="change"/><img src="" width="1440" height="758"><script>$(function(){var img = $("img")[0];var preload = [];var n = -1;for(var i =0; i<100; i++){preload[i] = new Image();preload[i].src = "images/"+( i+1 + Math.pow(10,3)).toString().substr(1) + ".jpg";}$("INPUT").click(function(){if( ++n<100 ){img.src = preload[n].src;}});});</script>
这个实验你会发现万恶的Firefox在每click一次后内存长几兆,然后就下不来了。IE也好不到哪里去。而Chrome的表现非常好,短时间内内存就降下来了。
查了许久,发现根本原因就在浏览器引擎本身对图片渲染的Cache处理方法不同。
Firefox会将页面中所有被渲染过的图片存在Cache中,占用浏览器进程的内存。以求页面浏览顺畅。但这个“看似”很棒的设计,却给我们造成了极大的不变。也就是说,如果要做一个类似http://360langstrasse.sf.tv/page/的很酷的网站,而且图片的原始尺寸非常大的话,Firefox和IE很容易就会崩溃。
这是一个难以由前端开发者用code来填补的问题。即使将load的所有Image对象全部释放掉,也没有任何办法清除它们被渲染之后占用的内存。在Mozilla官方网站上有人提交过相关的BUG:https://bugzilla.mozilla.org/show_bug.cgi?id=659220
这个时候,就有一个抉择摆在你的面前。减小图片尺寸or减少图片数量。实际上碰到这种情况的只有少数。很幸运,我就TMD碰到了,迫于第三方设计要求和限制,俺必须另寻出路突破重重阻碍。
第一个想到的是类似目前流行的瀑布流图片网站的做法,延迟加载。事实证明,这方法仅能加快页面的显示,给用户带来比较好的用户体验,但对Firefox/IE这种臃肿的浏览器并不能减少内存的占用。再次表示,我爱Webkit,我爱Chrome。
然后就想到更换图片的渲染方式——用HTML5 Canvas画布渲染图片。这个时候,你又要面临另外一个抉择,是否要牺牲IE6/7/8?
NO。Trick无处不在。神马fxcanvas,excanvas都是帮助我们前端开发进行浏览器兼容的工具。但是,在我做的那个很BT的页面中,它们根本不适用。因为这些用一些其他的方法模拟出来的canvas画布在画这样大量大尺寸图片的情况下,根本如同废柴。你就看到丫画出了第一张图片,迟迟画不出第二张。性能完全不能与HTML5的canvas相比。
Well,any way. 让该死的IE6/7/8先见鬼去吧!我们看看我们伟大的HTML5。
实验四:使用Canvas画布
实验代码:
<input type="button" value="change"/><canvas id="cv" width="1440" height="758">Your canvas tag is not supported.</canvas><script>var cv = document.getElementById("cv");var ctx = cv.getContext("2d");var preload = [];for(var i =0; i<100; i++){preload[i] = new Image();preload[i].src = "images/"+( i+1 + Math.pow(10,3)).toString().substr(1) + ".jpg";}$(function(){var n = -1;$("INPUT").click(function(){if( ++n<100 ){ctx.drawImage(preload[n], 0, 0);}});});</script>
相较于上一个实验,这个实验的内存占用大大缩减。Canvas简直太酷了!
- Javascript的Image对象、图像渲染与浏览器内存两三事
- JavaScript 的Image对象、图像渲染和浏览器缓存
- 预加载与JavaScript的Image()对象
- Python 与设置代理的两三事
- Python 与设置代理的两三事
- 儿子的两三事
- 微信内置浏览器 长按识别二维码 功能的两三个坑与解决方案
- 微信内置浏览器 长按识别二维码 功能的两三个坑与解决方案
- javascript dom中的Image对象——图像预加载
- 浏览器的渲染:过程与原理
- 浏览器的渲染:过程与原理
- 浏览器的渲染:过程与原理
- 浏览器的渲染:过程与原理
- 这一年的两三事
- 关于 OpenResty 的两三事
- 关于 Openresty 的两三事
- 腾讯X5的两三事
- Image对象的内存占用问题。
- 游戏人工智能 移植到android源码
- 10个常见的 Android 新手误区
- 红黑树及其绘制
- jquery a.js调用b.js的方法
- 基于MFC单文档的汉诺塔动画演示程序,手动输入盘子数
- Javascript的Image对象、图像渲染与浏览器内存两三事
- demo(Struts2+Spring+Hibernate)
- IOS开发之----异常处理
- system IPC
- bit-map程序(解决已知某个文件内包含一些电话号码,每个号码为8位数字,统计不同号码的个数)
- Failed to load class org.slf4j.impl.StaticLogger 的解决方案
- 两个顺序线性表的合并,关于数组指针的操作。
- Linux那些事儿 之 ext4文件系统(0) 引子
- USB驱动开发(5)--USB连续读取器