React.js 应用占用大量内存(几乎是原始实现的两倍)

IT技术 javascript memory google-chrome-devtools reactjs
2021-05-09 12:09:49

我最近将一个重磅页面移植到 React。我保持 html 几乎相同。主要区别在于,之前服务器渲染的 html 直接提供给浏览器,现在,react 重写通过服务器端 API 拉取 json 并使用 React 来管理 DOM。

我已经看到早期实现的堆快照高达55 MB对于相同的数据,React.js 实现的堆快照大约为100+ MB(几乎是两倍)

Chrome 开发工具堆快照截图

我知道保存在内存中的 json 数据会导致消耗的内存有所增加。但是,当我检查堆快照时,我发现大约 60% 的保留大小是由于某些对象的保留路径包含deleteAllListeners > .... > unmountComponentAtNode我试图了解这在减少使用的内存方面意味着什么。

此外,React 添加到 DOM“data-reactid”属性是否会导致不可忽略的内存消耗增加?

这个问题有一些可能有帮助的更多细节。

1个回答

React 正在使用一种叫做 Virtual DOM 的东西。基本上它在内存中构建替代 DOM 树,除了现有的浏览器 DOM 树,但为了执行有效更新,它必须将上次显示的虚拟 DOM 树保留在内存中,因此它可以对浏览器 DOM 树生成快速有效的更新。

从第二个问题的细节来看,我知道您有一个无限滚动,当用户向下滚动页面时,您基本上可以添加新组件(不删除新组件)。所以这应该是增加内存使用量的来源(因为现在你在内存中有数据 + 虚拟 dom,与之前的解决方案相比)

它的修复方法是仅呈现用户实际可见的组件,您可以尝试使用react-list,或为此实现您自己的组件。