ReactJS Img标签内存泄漏

限界18

更新:原来的图像的尺寸设置为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 * /

编辑:

  1. 删除了componentWillUnmount方法。
  2. 删除了动画淡入
  3. 删除缓存无效查询标志似乎有所帮助
限界18

问题只出在图像尺寸上。我按比例缩小它们并实现了缩略图,该应用程序的内存使用量急剧下降,垃圾回收速度明显加快。后者也很有趣,因为它表明chrome在内存中保留了大文件(> 200兆字节)。应用程序的总内存使用量现在少于Facebook。因此,请仔细观察图像尺寸。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

ReactJS Img标签内存泄漏

来自分类Dev

Img未显示在img标签reactjs中

来自分类Dev

ReactJS的物理内存分析

来自分类Dev

封装标签ReactJS

来自分类常见问题

SVG使用标签和ReactJS

来自分类Dev

ReactJS - 如何动态创建标签?

来自分类Dev

将img.src设置为dataUrl泄漏内存

来自分类Dev

如何在 ReactJS 中包含 `<img>`?

来自分类Dev

如何减少PAL和CM31标签的内存泄漏?

来自分类Dev

使用 Reactjs 延迟显示 html 标签

来自分类Dev

reactjs:在 <tr> 标签内显示数组数据

来自分类Dev

<script> 标签中的内容到 ReactJS 组件

来自分类Dev

在 ReactJs 的 for 循环中使用 image 标签

来自分类Dev

在悬停时更新相应行的img src(ReactJS)

来自分类Dev

内存中的ReactJS虚拟DOM并应用增量更改

来自分类Dev

在img.onload上留下处理程序是内存泄漏吗?

来自分类Dev

将img.src设置为dataUrl会导致内存泄漏

来自分类Dev

ReactJS-JSX中的嵌套标签,变量和文本

来自分类Dev

使用JSX在ReactJS中使用<code>或类似标签

来自分类Dev

如何更改li标签(reactjs)内的特定组件;

来自分类Dev

ReactJS:使用JSX以编程方式更改组件标签

来自分类Dev

动态插入将通过Reactjs执行的脚本标签

来自分类Dev

如何从reactjs的语音命令模型结果中识别标签?

来自分类Dev

ReactJS-JSX中的嵌套标签,变量和文本

来自分类Dev

在Reactjs中使用HTML5音频标签

来自分类Dev

选择标签上的默认值的ReactJS问题

来自分类Dev

选择标签上的默认值的ReactJS问题

来自分类Dev

从由reactjs构建的网页上的span标签获取价值

来自分类Dev

.map 不会返回 <td> 标签两次 ReactJS