javascript - 用于大型 html 的 DOMParser

Question

我有大量来自 Excel 的 html 剪贴板数据，大约 250MB(虽然它包含很多格式，所以在实际粘贴时，数据要小得多)。
目前我正在使用以下 DOMParser ，这只是一行代码，一切都发生在幕后:

const doc3 = parser.parseFromString(htmlString, "text/html");

然而，解析这个需要大约 18 秒，并且在此期间页面完全阻塞直到它完成 - 或者，如果卸载到网络 worker ，一个没有任何进展并且只是“等待”18 秒直到最终发生的操作- 我认为这与卡住几乎相同，即使是的，用户可以从字面上与页面进行交互。
是否有其他方法来解析大型 html/xml 文件？也许使用不会一次加载所有内容的东西，因此可以响应，或者什么可能是一个好的解决方案？我想以下可能与它内联？但不太确定: https://github.com/isaacs/sax-js .

更新:这里是一个示例 Excel 文件: https://drive.google.com/file/d/1GIK7q_aU5tLuDNBVtlsDput8Oo1Ocz01/view?usp=sharing .您可以下载文件，在 Excel 中打开它，按 Cmd-A(全选)和 Cmd-C(复制)，它会将数据粘贴到剪贴板中。对我来说，复制剪贴板中的 text/html 格式需要 249MB。
是的，它在 teext/plain 中也有(我们用作备份)，但是从 text/html 中抓取它的重点是 捕获格式 (两种数据格式，例如 numberType=Percent、3 位小数和风格，例如背景颜色=红色)。请使用它作为任何示例代码的测试。这是实际的 test/html剪贴板中的内容(asci 格式): https://drive.google.com/file/d/1ZUL2A4Rlk3KPqO4vSSEEGBWuGXj7j5Vh/view?usp=sharing

Answer 1

这里的问题不是 html 文件大小，而是它包含的大量 DOM 节点。对于 html 文件中的 900000 行和 8 列，我们有这些数字:
900000 ( TR elements) * ( 8 ( TD elements) + 8 ( Text nodes)) = ~14 millions of DOM nodes!
我没有设法用 DOMParser 加载它，浏览器选项卡在一段时间后崩溃(FF，Chrome，16GB RAM)，尽管看看成功加载时浏览器的行为会很有趣。
无论如何，我遇到了类似的挑战，要在浏览器中处理数百万条记录，我想出的解决方案是一次只为一个屏幕构建表格行。
考虑到 text/html 文件的结构，接下来的方法可能是:

1. use FileReader to load html file as raw text
2. grab rows, save them as text array, remove them from output
3. parse resulting output, insert the table and style into DOM
4. use a view / paging, render the current batch of rows on paging/scroll or search
5. attach events for mouse/keyboard control

下面是一个简单的实现，它提供了基本的控件，如调整 View 大小、分页/滚动、使用正则表达式过滤行。请注意，过滤是在行 html 上完成的，对于 text 仅搜索您可以取消注释“//text: text.match...”行，尽管在这种情况下文件解析时间会增加一点。

let tbody, style;
let rows = [], view = [], viewSize = 20, page = 0, time = 0;

const load = fRead => {
    console.timeEnd('FILE LOAD');
    console.time('GRAB ROWS');
    let thead, trows = '', table = fRead.result
        .replace(/<tr[^]+<\/tr>/i, text => (trows += text) && '');
    console.timeEnd('GRAB ROWS');
    console.time('PARSE/INSERT TABLE & STYLE');
    const html = document.createElement('div');
    html.innerHTML = table;
    table = html.querySelector('table');
    if (!table || !trows) {
        setInfo('NO DATA FOUND');
        return;
    }
    if (style = html.querySelector('style'))
        document.head.appendChild(style);
    table.textContent = '';
    el('viewport').appendChild(table);
    console.timeEnd('PARSE/INSERT TABLE & STYLE');
    console.time('PREPARE ROWS ARRAY');
    rows = trows.split('<tr').slice(1).map(text => ({
        html: '<tr' + text, text,
        //text: text.match(/>.*<\/td>/gi).map(s => s.slice(1, -5)).join(' '),
    }));
    console.timeEnd('PREPARE ROWS ARRAY');
    console.time('RENDER TABLE');
    table.appendChild(thead = document.createElement('thead'));
    table.appendChild(tbody = document.createElement('tbody'));
    thead.innerHTML = rows[0].html;
    view = rows = rows.slice(1);
    renew();
    console.timeEnd('RENDER TABLE');
    console.timeEnd('INIT');
};

const reset = info => {
    el('info').textContent = info ?? '';
    el('viewport').textContent = '';
    style?.remove();
    style = null;
    tbody = null;
    view = rows = [];
};

const pages = () => Math.ceil(view.length / viewSize) - 1;

const renew = () => {
    if (!tbody)
        return;
    console.time('RENDER VIEW');
    const i = page * viewSize;
    tbody.innerHTML = view.slice(i, i + viewSize)
        .map(row => row.html).join('');
    console.timeEnd('RENDER VIEW');
    setInfo(`
        rows total: ${rows.length},
        rows match: ${view.length},
        pages: ${pages()}, page: ${page}
    `);
};

const gotoPage = num => {
    el('page').value = page = Math.max(0, Math.min(pages(), num));
    renew();
};

const fileInput = () => {
    reset('LOADING...');
    const fRead = new FileReader();
    fRead.onload = load.bind(null, fRead);
    console.time('INIT');
    console.time('FILE LOAD');
    fRead.readAsText(el('file').files[0]);
};

const fileReset = () => {
    reset();
    el('file').files = new DataTransfer().files;
};

const setInfo = text => el('info').innerHTML = text;

const setView = e => {
    let value = +e.target.value;
    value = Number.isNaN(value * 0) ? 20 : value;
    e.target.value = viewSize = Math.max(1, Math.min(value, 100));
    renew();
};

const setPage = e => {
    const page = +e.target.value;
    gotoPage(Number.isNaN(page * 0) ? 0 : page);
};

const setFilter = e => {
    const filter = e.target.value;
    let match;
    try {
        match = new RegExp(filter);
    } catch (e) {
        setInfo(e);
        return;
    }
    view = rows.filter(row => match.test(row.text));
    page = 0;
    renew();
};

const keys = {'PageUp': -1, 'PageDown': 1};

const scroll = e => {
    const dir = e.key ? keys[e.key] ?? 0 : Math.sign(-e.deltaY);
    if (!dir)
        return;
    e.preventDefault();
    gotoPage(page += dir);
};

const el = id => document.getElementById(id);

el('file').addEventListener('input', fileInput);
el('reset').addEventListener('click', fileReset);
el('view').addEventListener('input', setView);
el('page').addEventListener('input', setPage);
el('filter').addEventListener('input', setFilter);
el('viewport').addEventListener('keydown', scroll);
el('viewport').addEventListener('wheel', scroll);

div {
    display: flex;
    flex: 1;
    align-items: center;
    white-space: nowrap;
}
thead td,
tbody tr td:first-child {
    background: grey;
    color: white;
}
td { padding: 0 .5em; }
#menu > * { margin: 0 .25em; }
#file { min-width: 16em; }
#view, #page { width: 8em; }
#filter { flex: 1; }
#info { padding: .5em; color: red; }

<div id="menu">
    <span>FILE:</span>
        <input id="file" type="file" accept="text/html">
        <button id="reset">RESET</button>
    <span>VIEW:</span><input id="view" type="number" value="20">
    <span>PAGE:</span><input id="page" type="number" value="0">
    <span>FILTER:</span><input id="filter">
</div>
<div id="info"></div>
<div id="viewport" tabindex="0"></div>

结果，对于 262 MB html 文件( 900000 表行)，我们在 Chromium 中有下一个计时:

FILE LOAD: 352.57421875 ms

GRAB ROWS: 700.1943359375 ms

PARSE/INSERT TABLE & STYLE: 0.78125 ms

PREPARE ROWS ARRAY: 755.763916015625 ms

RENDER VIEW: 0.926025390625 ms

RENDER TABLE: 4.317138671875 ms

INIT: 1814.19287109375 ms

RENDER VIEW: 5.275146484375 ms

RENDER VIEW: 4.6318359375 ms

因此，直到渲染第一批行的时间(屏幕时间)是 ~1.8 s ，即比 OP 指定的 DOMParser 所花费的时间低一个数量级，随后的行渲染几乎是即时的: ~5 ms