Mihaela Mihaljevic
01b38309e8
Built by scripts/build-wasm-site.sh; the loader fetches the gzipped module and decompresses client-side, and coi-serviceworker.js supplies COOP/COEP so SharedArrayBuffer works without server headers.
107 lines
3.3 KiB
HTML
107 lines
3.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>PureYAMLStreaming WASM Benchmark</title>
|
|
<link rel="stylesheet" href="./style.css" />
|
|
<script src="./coi-serviceworker.js"></script>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<section class="card">
|
|
<p class="eyebrow">PureYAMLStreaming</p>
|
|
<h1>Live WASM YAML Benchmark</h1>
|
|
<p>
|
|
Pick a public real-world YAML file. The browser fetches it, feeds the
|
|
bytes to the Swift WASI executable through stdin, and reports
|
|
Swift-measured document parse timing live. The Run Log distinguishes
|
|
browser buffering from Swift-side chunked scanning.
|
|
</p>
|
|
<label for="sampleSelect">Public YAML example</label>
|
|
<select id="sampleSelect"></select>
|
|
<label for="urlInput">URL</label>
|
|
<input id="urlInput" type="url" autocomplete="off" />
|
|
<button id="runButton" type="button">Run Buffered Benchmark</button>
|
|
<button id="streamButton" type="button">Run True Streaming Benchmark</button>
|
|
<div id="status" class="status idle">Idle</div>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2>Streaming Capability</h2>
|
|
<dl class="metrics">
|
|
<div>
|
|
<dt>Isolation</dt>
|
|
<dd id="isolationMetric">-</dd>
|
|
</div>
|
|
<div>
|
|
<dt>SharedArrayBuffer</dt>
|
|
<dd id="sabMetric">-</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Worker</dt>
|
|
<dd id="workerMetric">-</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Mode</dt>
|
|
<dd id="modeMetric">-</dd>
|
|
</div>
|
|
</dl>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2>Timing</h2>
|
|
<dl class="metrics">
|
|
<div>
|
|
<dt>Bytes</dt>
|
|
<dd id="bytesMetric">-</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Fetch</dt>
|
|
<dd id="fetchMetric">-</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Swift parse</dt>
|
|
<dd id="parseMetric">-</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Throughput</dt>
|
|
<dd id="throughputMetric">-</dd>
|
|
</div>
|
|
<div>
|
|
<dt>Documents</dt>
|
|
<dd id="documentsMetric">-</dd>
|
|
</div>
|
|
</dl>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<div class="section-header">
|
|
<h2>Run Log</h2>
|
|
<button id="copyRunLogButton" class="secondary-button" type="button">Copy Run Log</button>
|
|
</div>
|
|
<div id="runLog" class="run-log" role="log" aria-live="polite">
|
|
<div class="log-entry muted">Waiting for benchmark run.</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2>Document Stream</h2>
|
|
<p>
|
|
In true streaming mode this panel appends decoded YAML chunks as the
|
|
browser receives them. In buffered mode it shows the fetched body after
|
|
the browser buffer is complete.
|
|
</p>
|
|
<pre id="streamDocument" class="stream-document">Waiting for YAML bytes.</pre>
|
|
</section>
|
|
|
|
<section class="card">
|
|
<h2>Output</h2>
|
|
<pre id="output">Pick a YAML file and choose a benchmark mode.</pre>
|
|
</section>
|
|
</main>
|
|
|
|
<script type="module" src="./main.js"></script>
|
|
</body>
|
|
</html>
|