React App - Chrome Big Content

问题

在系统内有个地方会显示设备传上来的系统堆栈, 有时候在windows上这段堆栈会非常大. 而它是已经自带格式的了, 之前的做法是直接用一个pre显示这段内容就可以. 但是最近发现了一个问题, 在chrome下, 如果内容超过1M, 就会非常卡顿, firefox下就不会出现这个问题.

最开始还以为是我们系统元素过多, 导致了这个问题, 但是实测发现, 即时是一个空的html, 一个纯文本节点内容超过1M的时, chrome渲染都需要5s以上, 而firefox是秒开, 所以定位到了这个问题.

解决

尝试了一下, 只要把节点划分得越多, chrome就渲染得越快. 但也不能太多, 如果节点太多同样会导致dom渲染较慢, 取一个中间值, 分成30-50个节点, 就可以实现性能的平衡.

react实现

const strArr = useMemo(() => {
  const result: string[] = [];
  if (!data) {
    return result;
  }
  const rows = data.split(/\n/);
  let currentIndex = 0;
  _.map(rows, (row) => {
    const rowStr = `${row}\n`;
    if (!result[currentIndex]) {
      result[currentIndex] = rowStr;
    } else if (result[currentIndex]) {
      if (result[currentIndex].length + rowStr.length <= 8000) {
        result[currentIndex] += rowStr;
      } else {
        currentIndex++;
        result[currentIndex] = rowStr;
      }
    }
  });
  return result;
}, [data]);

return (
  <div className='code-font-family'>
    {_.map(strArr, (str, index) => (
      <pre key={index}>{str}</pre>
    ))}
  </div>
);

其他

在测试的时候额外尝试了一下极端情况, 发现不管是否分多个节点, 在超过20M的文本内容情况下, chrome打开都会直接崩溃, 而firefox没有这个问题. 看来chrome和firefox还是有区别的