记一次 React 渲染 markdown 引发的内存泄露

HOHO
663 阅读5分钟

最近在开发的时候遇到了一个性能问题，这里记录一下解决方案，并且借此机会讲一下如果遇到类似的问题大家可以如何排查。

背景

最近在用 React 做一个 AI 产品，目前市面上的 AI 产品有个很常见的效果就是机器人的回答是逐字输出并会解析为 MarkDown 格式。但是同事在使用的时候发现，偶尔的时候页面会突然开始卡顿，然后两三秒后页面直接崩溃并报错误代码 5。而且随着聊天越来越长，这个问题的复现几率会逐渐增大。

image.png

那啥也别说了，开干吧。

分析

首先问题表现是浏览器变卡然后直接崩溃，那么可以排除是普通的代码问题，因为代码报错的话会被项目里的 ErrorBoundary 抓到然后处理掉，并不会让页面崩溃。页面崩溃说明 chrome 已经处理不了了，那最常见的情况就是内存吃满或者 js 线程阻塞了，不过 js 线程阻塞的表现是页面没办法交互，然后浏览器弹窗提示“页面未响应，是否关闭”，并不会直接崩掉。那么大概率就是内存泄漏了，而且内存泄漏的表现也符合浏览器逐渐变卡的特征。

那么盲猜一下，React 的重渲染一直是个比较瞩目的性能问题。而 AI 机器人的逐字输出又会导致 markdown 解析组件频繁渲染，并且由于是 props 变化，所以 React.memo 之类的缓存也是没用的。那大概率就是 markdown 里有啥东西没释放掉导致的这个问题。

OK，有思路了，那么我们就动手验证一下。

验证

打开 devtools，找到 Memory 面板，看一下当前的堆栈：

企业微信截图_1709781492630.png

嗯挺正常，跟机器人交互一下，让它输出个长文章试试：

企业微信截图_1709781275875.png

输出三千字左右：

企业微信截图_17097814015217.png

好家伙，才三千字就敢吃 1G 的内存。后续测试中这个吃内存速度会越来越快，吃到 3G 时开始卡顿，吃到 4085Mb 时触发浏览器的标签内存上限然后挂掉（这里有一个小细节，在我电脑上复现的时候，页面崩溃时准确的提示出了 Out of memory，而在同事的 m1 mac 上则提示 error code: 5）。

那问题基本就可以锁定是内存泄漏了，现在我们抓一下内存堆栈看看，分析类型选择“时间线上的分配检测”，记得勾选“记录分配的堆栈跟踪”，因为我们不仅要确定吃掉内存的是什么类型的数据，还要知道是谁搞出来的这些数据。然后点击开始，操作一下即可：

image.png

操作一会之后点左上角结束，然后等快照生成完就可以通过“统计信息”选项看到占用的具体内容了。

image.png

可以看到字符串和数组占了九成以上的内存，那我们把选项切换成“摘要”，点开字符串和数组，看一下具体是谁搞出来的：

image.png

点开之后就可以发现，里边存着大量的重复字符串，而且都是由 rehype-highlight 这个包搞出来的：

image.png

这里如果一开始录制的时候没有勾选“记录分配的堆栈跟踪”，那就会像下面这样看不到具体的堆栈信息：

image.png

问题修复

ok，到这里我们已经锁定了问题来源，现在过去看一下代码：

<ReactMarkdown
  remarkPlugins={[RemarkMath, RemarkGfm, RemarkBreaks]}
  rehypePlugins={[
    RehypeKatex,
    [
      RehypeHighlight,
      {
        detect: false,
        ignoreMissing: true,
      },
    ],
  ]}>
  {props.content}
</ReactMarkdown>

说实话，如果只让我看代码的话，我肯定猜不出这里会有内存泄漏的问题。既然配置上看不出有什么问题，那干脆不用这个包，自己用 highlight.js 写一个好了：

import hljs from 'highlight.js/lib/core';
import languageJavascript from 'highlight.js/lib/languages/javascript';
import languageJava from 'highlight.js/lib/languages/java';
import languageC from 'highlight.js/lib/languages/c';
import languageYaml from 'highlight.js/lib/languages/yaml';
import languageCsharp from 'highlight.js/lib/languages/csharp';
import languagePython from 'highlight.js/lib/languages/python';
import languageJson from 'highlight.js/lib/languages/json';
import { FC, ReactNode, useMemo } from 'react';
import { Flex } from 'antd';

hljs.registerLanguage('javascript', languageJavascript);
hljs.registerLanguage('java', languageJava);
hljs.registerLanguage('json', languageJson);
hljs.registerLanguage('c', languageC);
hljs.registerLanguage('yaml', languageYaml);
hljs.registerLanguage('csharp', languageCsharp);
hljs.registerLanguage('python', languagePython);

interface Props {
  className?: string;
  children: ReactNode | string;
}

export const Code: FC<Props> = (props) => {
  const { className, children } = props;

  if (typeof children !== 'string') {
    return <code className={className}>{children}</code>;
  }

  const isMultiLine = children?.includes('\n');
  if (!className && !isMultiLine) {
    return <code className={className}>{children}</code>;
  }

  const content = useMemo(() => {
    return hljs.highlightAuto(children).value ?? '';
  }, [children]);

  return (
    <code
        className={className}
        dangerouslySetInnerHTML={{ __html: content }}
    ></code>
  );
};

注意里边进行了一下筛选，如果内容不是纯文本，或者是行内代码块（比如这种 code），就不用高亮渲染。

然后把这个组件丢给 ReactMarkdown 就行了：

<ReactMarkdown
  remarkPlugins={[RemarkMath, RemarkGfm, RemarkBreaks]}
  rehypePlugins={[RehypeKatex]}
  components={{ code: Code }}>
  {props.content}
</ReactMarkdown>

测试之后没什么问题，OK，圆满解决。

总结

从这个问题中我们可以发现，一旦出现问题，重要的是确定原因和找到线索，不要直接去看代码。掌握了思路，那么排查起来问题基本不会有什么阻力。

我之前面试别人的时候都会问类似“你平时是如何做性能优化”或者“出现性能问题你一般是怎么解决的”。有经验的人基本都会从浏览器表现开始，对问题进行归类，然后列举几种常见的性能问题如何进行排查、定因，都有哪些趁手的工具，而最后如何解决的反而不那么重要。而新手基本都是起手 React.memo、useCallback useMemo 就结束了。

avatar
文章
阅读
粉丝