吾所试之 JSON 觀察器，皆作同樣之事：美觀化呈現。加縮進，著色於鍵，摺疊括號。用於十行配置——無用於開發者每日所處理之實際數據形態，其為物象之列请提供需要翻译的英文文本。
雅致排版之五十行API响应，犹五百行自上而下而观之。尔岂能言哉示我仅管理员不须重读每条记录。不可按日期排序。不可跨行搜索。
此非观者之过，乃格式有误。数组之物欲为案几:
┌────┬───────┬───────┬────────┐
│ ID │ NAME │ ROLE │ ACTIVE │
├────┼───────┼───────┼────────┤
│ 1 │ Alice │ admin │ ● Yes │
│ 2 │ Bob │ user │ ● Yes │
│ 3 │ Carol │ user │ ● No │
│ 4 │ Dave │ admin │ ● Yes │
└────┴───────┴───────┴────────┘
可排序之列。可搜索之行。点击任一行以展开完整嵌套之详。同数据——然汝扫描彼而非此阅之之。
吾乃筑之PrettyJsonXml(BeautifulJsonXml)— 一JSON与XML之观览器，能化数组为真表格（兼有可折叠之树形视窗、格式化、压缩、Base64图像预览之能）。唯有一HTML文件。无后端。无构建步骤。纯在浏览器中运行；汝之数据，永不离汝之机器。
所不期者：使表格视图于九兆字节API响应中实速，其难远甚于表象。此未经删改之始末是也。
粗浅之法：初效，后废
V1之制甚直：
const data = JSON.parse(text);
renderTable(data);
function renderTable(items) {
const tbody = document.querySelector('tbody');
items.forEach(row => {
const tr = document.createElement('tr');
// ... build cells
tbody.appendChild(tr);
});
}
于我所试五行之例，颇美。继而，我贴入真实API响应。瀏覽器凍結凡一點五秒
凍結之由有二
-
JSON.parse九兆之塊，主線停頓約五百毫秒 - 創三十萬乘二行之表（主詳並列），即六十萬DOM節點，阻礙復約一千五百毫秒
此二者難速，然可使其不使界面凍結.
第一階段：content-visibility: auto — 一行胜千言
今之浏览器，若告之可，则于屏外之内容，不为之布局。一CSS之则：
.data-table tr.row-main {
content-visibility: auto;
contain-intrinsic-size: auto 40px;
}
content-visibility: auto，此乃告浏览器："此元素未将入视，勿费心为之计算布局。" contain-intrinsic-size 为之设一虚高，使滚动条犹能代表全文。
总渲染时未改，工犹在焉，然感效大跃，盖浏览器得先绘可见之部也。用之甚寡，然近今之浏览器约九五者皆可之。
第二阶段：以 Web Workers 处理JSON.parse — 此乃逆理之训也
次寒至JSON.parse其自身也。常理云：宜以Web Worker将昂贵之解析移离主线程。
const worker = new Worker(URL.createObjectURL(new Blob([`
self.onmessage = (e) => {
const parsed = JSON.parse(e.data);
self.postMessage(parsed);
};
`], { type: 'application/javascript' })));
worker.postMessage(largeJsonString);
worker.onmessage = (e) => render(e.data);
既毕。主线程犹应。然耶？
实觉迟缓。
此故也：当工者将解析之对象返送于postMessage，主线程须结构克隆全部对象图以接收之。三十万对象之数组，此克隆需时三百至五百毫秒——亦在主线程。
故我已成功将五百毫秒之JSON.parse移离主线程，而增四百毫秒之结构克隆于其上。净赢：约百毫秒。然用户犹觉冻结。稍后于流转之中，俟其点按按钮，冀得立时之效。
Web Workers乃为CPU所系之务，其果不必复归。若九五之劳皆为解析之象，则结构克隆之费，胜于其益。
吾持工匠以成格式/精简（输出为字符串，易复制）。至于解析后渲染之流，实乃微利。真解在他处。
第三段：虚拟滚动——实解
对于有三万行之表，不渲染三万行。但渲染五十行左右，用户所能见者，随其滚动而换之。
<table>之难处：不可position: absolute 行不可用（表格布局所限）。当用 spacer 行：
<table>
<thead>...</thead>
<tbody>
<tr style="height:850px"></tr> <!-- spacer for rows above viewport -->
<tr>row 21</tr>
<tr>row 22</tr>
...
<tr>row 70</tr>
<tr style="height:1200px"></tr> <!-- spacer for rows below viewport -->
</tbody>
</table>
每滚动时，重算可视行并换之：
function onScroll() {
const tbodyRect = tbody.getBoundingClientRect();
const viewTop = Math.max(0, -tbodyRect.top);
const viewBottom = viewTop + scrollContainer.clientHeight;
const startRow = Math.max(0, Math.floor(viewTop / ROW_HEIGHT) - 10);
const endRow = Math.min(items.length, Math.ceil(viewBottom / ROW_HEIGHT) + 10);
// Remove old visible rows, build new ones from items[startRow..endRow]
// Adjust spacer heights so scrollbar position stays correct
}
三十萬行之JSON數組，此由「完全無應」變為「順滑六十帧滾動」。猶至較謹慎之尺寸——譬如數百行之內——其勝在搜尋與排序立時，蓋因其今操作於JavaScript數組，非由巡行千數DOM節點也。
吾所失二十分鐘之癥結：吾之虛擬滾動器聽於window.scroll然吾之页有body { overflow: hidden }且<main> { overflow: auto }— 乃window.scroll 永无革职。其实卷轴之变，起于<main>请提供需要翻译的英文文本。
// Walk up to find the nearest ancestor that actually scrolls
function findScrollContainer(el) {
let p = el.parentElement;
while (p && p !== document.body) {
const oy = getComputedStyle(p).overflowY;
if ((oy === 'auto' || oy === 'scroll') && p.scrollHeight > p.clientHeight) return p;
p = p.parentElement;
}
return window;
}
常于运行时解卷之器。勿臆其然。window.
文本框之困
又遇寒冰之阻，非所期也：赋一兆九百字之符于<textarea>.value，独可滞主线程约三五百毫秒。浏览器虽知其文多隐于屏下，犹须算其布局。
其解：凡>五兆之文，空其文本框，而显一饰文之"已载"面板。
if (file.size > 5 * 1024 * 1024) {
editor.value = '';
showLoadedOverlay(file.name, file.size);
} else {
editor.value = text;
}
数据犹可解析呈示于观者——惟非见于可编辑之文本区。九兆字节之文件，亦无人欲手篡耳。
吾所异行者
- 当以虚拟滚动始勿作第三阶段增之。此乃唯一可扩之事。他者皆属文饰耳
- 质疑"移诸工"之习。此工者，于计算甚善，无待于反。然于解析后克隆之流，则非其宜。
-
凡所适用之处，皆宜用
content-visibility: auto。此实无本之利也。 - 宜早以实产之数据试之。吾之五行测试，已隐尽其妙。
至于单文件之利，
吾心自辩，当增构建之步否。"但束之，但分诸模块，但加 TypeScript…" 其初制，技则愈洁，质则愈劣——今复须主更多之文，忧缓存之破，持工具之链。
夫器之全誉在"百不涉服务器，尽在浏览器"，然载之为单一HTML之文，汝可Save As 而离线运行，乃正道也。 pragmatic 优于 purity.
终极：~225 KB 单 HTML，无依赖，无需构建，直接由 Cloudflare Pages 提供.
欲试之者：prettyjsonxml.com — 任意粘贴 JSON 或 XML，可视作可排序之表或可折叠之树。所建者，因所需也。所享者，或汝亦需也。
尔为大数据之界面，所用幻术何哉？吾素好奇，尤喜惊世之奇术。