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

背景

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

那啥也别说了，开干吧。

分析

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

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

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

验证

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

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

输出三千字左右：

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

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

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

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

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

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

问题修复

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

复制 1<ReactMarkdown
 2  remarkPlugins={[RemarkMath, RemarkGfm, RemarkBreaks]}
 3  rehypePlugins={[
 4    RehypeKatex,
 5    [
 6      RehypeHighlight,
 7      {
 8        detect: false,
 9        ignoreMissing: true,
10      },
11    ],
12  ]}>
13  {props.content}
14</ReactMarkdown>

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

复制 1import hljs from 'highlight.js/lib/core';
 2import languageJavascript from 'highlight.js/lib/languages/javascript';
 3import languageJava from 'highlight.js/lib/languages/java';
 4import languageC from 'highlight.js/lib/languages/c';
 5import languageYaml from 'highlight.js/lib/languages/yaml';
 6import languageCsharp from 'highlight.js/lib/languages/csharp';
 7import languagePython from 'highlight.js/lib/languages/python';
 8import languageJson from 'highlight.js/lib/languages/json';
 9import { FC, ReactNode, useMemo } from 'react';
10import { Flex } from 'antd';
11
12hljs.registerLanguage('javascript', languageJavascript);
13hljs.registerLanguage('java', languageJava);
14hljs.registerLanguage('json', languageJson);
15hljs.registerLanguage('c', languageC);
16hljs.registerLanguage('yaml', languageYaml);
17hljs.registerLanguage('csharp', languageCsharp);
18hljs.registerLanguage('python', languagePython);
19
20interface Props {
21  className?: string;
22  children: ReactNode | string;
23}
24
25export const Code: FC<Props> = (props) => {
26  const { className, children } = props;
27
28  if (typeof children !== 'string') {
29    return <code className={className}>{children}</code>;
30  }
31
32  const isMultiLine = children?.includes('\n');
33  if (!className && !isMultiLine) {
34    return <code className={className}>{children}</code>;
35  }
36
37  const content = useMemo(() => {
38    return hljs.highlightAuto(children).value ?? '';
39  }, [children]);
40
41  return (
42    <code
43        className={className}
44        dangerouslySetInnerHTML={{ __html: content }}
45    ></code>
46  );
47};

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

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

复制 1<ReactMarkdown
 2  remarkPlugins={[RemarkMath, RemarkGfm, RemarkBreaks]}
 3  rehypePlugins={[RehypeKatex]}
 4  components={{ code: Code }}>
 5  {props.content}
 6</ReactMarkdown>

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

总结

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

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