更新:原来的图像的尺寸设置为5k分辨率,因此使用了巨大的ram。虽然低分辨率照片上开始进行垃圾收集,但该网站对于Android Chrome仍然非常繁琐。感谢所有答复者。
亲戚我在ReactJS和一些img标签上遇到了一些问题。我没有使用JSX,所以我的代码在javascript中。我的启动页面占用了120 MB的内存,但是,当我单击以转到包含6张图像的区域时,尽管每个图像均为900kb,但内存气球却高达900 MB。我已经设置了shouldComponentUpdate并且图像没有被一致地更新。我添加了一个随机查询标志来绕过缓存,这并没有改变内存泄漏。
var Modal_Image = React.createClass({
showModal: function(url){
store.dispatch({type: "SHOW_MODAL", src: url});
},
shouldComponentUpdate: function(next_props, _){
console.log("modal image might update");
if(next_props.url != this.props.url){
return true;
}
if(next_props.size != this.props.size){
return true;
}
return false;
},
componentDidUpdate:function(){
console.log("modal image updated");
},
render: function(){
return(
React.createElement("div", {className: "image-holder " + this.props.size},
React.createElement("img", {src: this.props.url, className: "home-image c-hand", alt: "", onClick: this.showModal.bind(this, this.props.url) })
)
)
}
});
大小属性或url属性均未更改,console.logs也未报告任何更改,但Chrome需要800 MB的存储这些图像。关于处理涉及图像的内存泄漏问题有任何想法或提示吗?
添加:/ ** * React v15.3.0 * /
编辑:
问题只出在图像尺寸上。我按比例缩小它们并实现了缩略图,该应用程序的内存使用量急剧下降,垃圾回收速度明显加快。后者也很有趣,因为它表明chrome在内存中保留了大文件(> 200兆字节)。应用程序的总内存使用量现在少于Facebook。因此,请仔细观察图像尺寸。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句