| layout | title | date | tags | comments |
|---|---|---|---|---|
post |
图片展示应用中内存不断升高的问题 |
2013/01/05 19:33 |
webpack |
true |
关于图片的应用，一般都会包含列表页和详情页。当列表页的图片不断增加的时候，内存也会不断增加。特别在IE浏览器会更加的明显。
这时候我们需要对现有的策略进行优化？
内存的不断增加的原因，是图片的不断增加。所以我们要删除图片。
比如当用户的翻到第五页的时候，我们可以把第一屏的图片删除掉。使得页面上最多显示五屏的数据。
通过这种策略，可以把内存控制在稳定的水平上。
当滚动条位置变化的时候，我们需要判断当前是第几页，然后以显示五屏图片为原则。删除其他的图片。
上面我们主要是通过删除图片的方式来减少内存，其实还可以通过减少对事件的绑定，来减少内存。
第一种：
var img = document.createElement("IMG");
img.onload =function () {
null
};
img.src = data.objurl_l; 第二种：
li.innerHTML = '<a href="#" onload="check()" />'; 这两种创建图片的方式，显然第二种会花费更少的内存。
当需要给很多图片绑定事件的时候，我们有一个更加高效的方式。就是给这些父元素绑定一个事件。当事件触发时候，通过e.target方式找到目标元素。