HTML展示大体积二进制文件时渲染缓慢、页面冻结问题求助

我需要实现一个文件展示功能，支持用户上传任意类型文件（包括二进制），部分文件体积可达10MB。目前遇到的问题是：加载JSON、CSV这类文本文件时，渲染流畅仅需1-2秒；但加载二进制文件时，页面会卡顿长达一分钟，即使只加载部分内容，滚动时仍有明显卡顿。Firefox中表现相对较好，仅需几秒完成渲染。

复现代码如下：

HTML代码 #

<button id="load_json"> Load JSON </button>
<button id="load_binary"> Load Binary </button>

<pre id="display"></pre>

JavaScript代码 #

const createDataLoader = (url) => async () => {
  const response = await fetch(url);
  const text = await response.text();
  display.innerText = text;
};

load_json.addEventListener(
  "click",
  createDataLoader(
    "https://raw.githubusercontent.com/HKGx/repro/main/10mb-sample.json"
  )
);

load_binary.addEventListener(
  "click",
  createDataLoader("https://raw.githubusercontent.com/HKGx/repro/main/file.bin")
);

问题原因 #

二进制文件通过response.text()转换后，会生成大量不可打印的控制字符、乱码字符。浏览器渲染这类文本时，需要处理异常字符的排版、换行等逻辑，尤其是Chrome内核的浏览器，对这类字符的解析渲染开销远高于正常结构化文本，导致主线程被长时间阻塞，引发页面卡顿。

解决方案 #

1. 将二进制数据转换为十六进制/Base64格式展示 #

避免直接输出原始二进制转文本的乱码，转成浏览器易渲染的格式化文本：

const createBinaryLoader = (url) => async () => {
  const response = await fetch(url);
  const buffer = await response.arrayBuffer();
  const bytes = new Uint8Array(buffer);
  // 转换为十六进制字符串，每16个字符换行
  const hexStr = bytes.reduce((acc, byte, idx) => {
    const hex = byte.toString(16).padStart(2, '0');
    return acc + hex + (idx % 16 === 15 ? '\n' : ' ');
  }, '');
  display.innerText = hexStr;
};

// 替换原二进制加载逻辑
load_binary.addEventListener("click", createBinaryLoader("你的二进制文件地址"));

2. 虚拟滚动优化大文件渲染 #

不管是文本还是二进制，大文件都适合用虚拟滚动，只渲染当前视口内的内容，减少DOM节点数量：

// 简单虚拟滚动实现思路
const display = document.getElementById('display');
let fullContent = '';
const viewportHeight = 500; // 视口高度
const lineHeight = 18; // 每行高度
const linesPerViewport = Math.floor(viewportHeight / lineHeight) + 2;

function renderVisibleLines(scrollTop) {
  const startLine = Math.floor(scrollTop / lineHeight);
  const endLine = startLine + linesPerViewport;
  const visibleContent = fullContent.split('\n').slice(startLine, endLine).join('\n');
  display.innerText = visibleContent;
  // 设置padding-top模拟滚动位置
  display.style.paddingTop = `${startLine * lineHeight}px`;
}

// 加载文件后初始化
const createOptimizedLoader = (url, isBinary = false) => async () => {
  const response = await fetch(url);
  if (isBinary) {
    const buffer = await response.arrayBuffer();
    const bytes = new Uint8Array(buffer);
    fullContent = bytes.reduce((acc, byte, idx) => {
      const hex = byte.toString(16).padStart(2, '0');
      return acc + hex + (idx % 16 === 15 ? '\n' : ' ');
    }, '');
  } else {
    fullContent = await response.text();
  }
  // 设置容器高度
  display.style.height = `${fullContent.split('\n').length * lineHeight}px`;
  display.addEventListener('scroll', (e) => renderVisibleLines(e.target.scrollTop));
  renderVisibleLines(0);
};

// 使用优化后的加载器
load_json.addEventListener("click", createOptimizedLoader("JSON文件地址"));
load_binary.addEventListener("click", createOptimizedLoader("二进制文件地址", true));

3. 异步分块渲染 #

如果需要展示原始文本格式，可将内容分块，用requestAnimationFrame分批插入DOM，避免主线程阻塞：

const chunkRender = (element, content, chunkSize = 1000) => {
  let idx = 0;
  function renderChunk() {
    const end = Math.min(idx + chunkSize, content.length);
    element.innerText += content.slice(idx, end);
    idx = end;
    if (idx < content.length) {
      requestAnimationFrame(renderChunk);
    }
  }
  element.innerText = '';
  renderChunk();
};

// 修改加载逻辑
const createChunkedLoader = (url) => async () => {
  const response = await fetch(url);
  const text = await response.text();
  chunkRender(display, text);
};

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