ReactJS Img標籤內存泄漏

更新：圖像變成了5k分辨率的尺寸，因此巨型RAM的使用。雖然垃圾收集正在踢在較低分辨率的照片，該網站仍然沉重的Android Chrome瀏覽器。感謝所有回答者。ReactJS Img標籤內存泄漏

民間我有一個ReactJS和一些img標籤的問題。我沒有使用JSX，所以我的代碼是在JavaScript中。我的初始頁面佔用了120兆字節的內存，但是當我點擊去使用6張圖片的部分時，儘管圖像每個都是900kb，但內存仍然高達900兆字節。我已經設置了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兆字節來存儲這些圖像。處理涉及圖像的內存泄漏問題的任何想法或提示？

加法： /** * 陣營v15.3.0 */

編輯：

除去componentWillUnmount方法。
去除動畫淡入
刪除緩存無效查詢標誌似乎已經幫助

來源

2016-07-30 liminal18

問題竟然是簡單的圖像尺寸。我縮小了它們並實現了縮略圖，應用程序的內存使用量顯着縮減，垃圾收集速度顯着加快。後者也很有趣，因爲它表明chrome在內存中保存了大量（> 200兆字節）的文件。應用程序的總內存使用量現在比Facebook的少。所以仔細觀察你的圖像尺寸。

來源

2016-08-01 02:02:42 liminal18

眼前的犯罪嫌疑人是jQuery的，因爲它增加了數據，並將其應用到DOM節點，這可能會導致內存如果沒有通過jQuery清理泄漏。另外，反應負責清除它呈現的元素，如組件根（div）和內容（圖像本身）。刪除componentWillUnmount方法，以及jQuery。

順便說一句 - React.createClass autobinds方法this，所以你可以叫 this.showModal代替this.showModal.bind(this, this.props.url)和

showModal: function(){ 
    store.dispatch({type: "SHOW_MODAL", src: this.props.url}); 
    },

來源

2016-07-30 09:22:46

不幸的是，jQuery方法在我發現內存泄漏以便清理之後添加（空刪除了分離的dom節點）。我剛剛刪除它，問題依然存在。感謝指針。這個問題似乎在別處。 – liminal18

嘗試使用chrome開發工具[內存診斷]（https://developers.google.com/web/tools/chrome-devtools/profile/memory-problems/memory-diagnosis?hl=en）方法。 –

是的，我用它來識別罪魁禍首，但我會再看看。現在我正在構建網站的簡化版本，以查看是否可以在其他地方複製該錯誤。 – liminal18

ReactJS Img標籤內存泄漏

回答

相關問題