我有大量来自 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
最佳答案
这里的问题不是 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
文件的结构,接下来的方法可能是:
- use
FileReader
to load html file as raw text- grab rows, save them as text array, remove them from output
- parse resulting output, insert the table and style into DOM
- use a view / paging, render the current batch of rows on paging/scroll or search
- 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
关于javascript - 用于大型 html 的 DOMParser,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66645084/