React渲染大体积转换后HTML文件卡顿，求虚拟滚动实现方案

核心问题分析 #

50MB的HTML文件直接渲染会生成数万甚至数十万DOM节点，React的虚拟DOM diff和浏览器的实际渲染都会被严重阻塞，导致页面长时间卡顿。虚拟化渲染（仅渲染当前视口内的内容）是解决这类问题的最优方案，但需要先将大HTML拆分成可分片的单元，再结合react-window实现视口渲染。

具体实现步骤 #

1. 预处理HTML，拆分为可渲染的块

首先需要把整段HTML按块级元素（如<p>、<div>、<section>）拆分成独立的字符串片段，避免单个列表项包含过多DOM节点。可以用浏览器原生的DOMParser在前端完成解析：

const parseHtmlIntoChunks = (htmlString) => {
  const parser = new DOMParser();
  const doc = parser.parseFromString(htmlString, 'text/html');
  // 提取body下所有子元素，转成HTML字符串数组
  return Array.from(doc.body.children).map(el => el.outerHTML);
};

如果遇到超大的单个元素（比如包含上万行代码的<pre>），可以进一步拆分：比如按换行符分割成多个小片段，确保每个块的DOM节点数量不会过多。

2. 用react-window实现虚拟化列表

安装依赖：

npm install react-window

实现基础的固定高度列表（如果每个块高度差异不大）：

import { FixedSizeList as List } from 'react-window';
import { useEffect, useState } from 'react';

const LargeHtmlViewer = ({ htmlContent }) => {
  const [htmlChunks, setHtmlChunks] = useState([]);

  useEffect(() => {
    if (htmlContent) {
      // 解析HTML为分片数组
      const chunks = parseHtmlIntoChunks(htmlContent);
      setHtmlChunks(chunks);
    }
  }, [htmlContent]);

  // 渲染单个HTML分片
  const renderChunk = ({ index, style }) => {
    return (
      <div 
        style={style} 
        dangerouslySetInnerHTML={{ __html: htmlChunks[index] }} 
      />
    );
  };

  return (
    <List
      height={window.innerHeight} // 视口高度
      itemCount={htmlChunks.length}
      itemSize={120} // 根据实际内容调整预估高度
      width="100%"
    >
      {renderChunk}
    </List>
  );
};

如果各块高度差异较大，改用VariableSizeList避免滚动时的跳动：

import { VariableSizeList as List } from 'react-window';
import { useEffect, useState } from 'react';

const LargeHtmlViewer = ({ htmlContent }) => {
  const [htmlChunks, setHtmlChunks] = useState([]);
  const [itemHeights, setItemHeights] = useState([]);

  useEffect(() => {
    if (htmlContent) {
      const chunks = parseHtmlIntoChunks(htmlContent);
      setHtmlChunks(chunks);
    }
  }, [htmlContent]);

  // 预计算每个分片的实际高度
  useEffect(() => {
    if (htmlChunks.length === 0) return;
    
    const tempContainer = document.createElement('div');
    tempContainer.style.cssText = 'position: absolute; visibility: hidden; width: 100%;';
    document.body.appendChild(tempContainer);

    const heights = htmlChunks.map(chunk => {
      tempContainer.innerHTML = chunk;
      return tempContainer.offsetHeight;
    });

    document.body.removeChild(tempContainer);
    setItemHeights(heights);
  }, [htmlChunks]);

  const renderChunk = ({ index, style }) => {
    return (
      <div 
        style={{ ...style, height: itemHeights[index] || 120 }} 
        dangerouslySetInnerHTML={{ __html: htmlChunks[index] }} 
      />
    );
  };

  return (
    <List
      height={window.innerHeight}
      itemCount={htmlChunks.length}
      itemSize={index => itemHeights[index] || 120} // 动态返回高度
      width="100%"
    >
      {renderChunk}
    </List>
  );
};

3. 关键优化点

• 预解析优化：如果HTML内容是固定的，尽量在组件挂载前或后端完成分片处理，避免前端重复解析消耗性能
• XSS防护：如果HTML来自不可信来源，必须在解析前过滤危险标签（如<script>、<iframe>）和属性（如onclick、onload），防止注入攻击
• 加载状态：添加加载提示，因为解析大HTML需要一定时间，避免用户误以为页面无响应
• 滚动优化：可以给列表添加节流滚动监听，或者使用react-window的内置优化参数减少重绘

内容的提问来源于stack exchange，提问作者MADHAN BABU