Single-File Super App Demo

Single-File Super App Demo

Home
Modules
Virtual List
Assets
Workers

Home (Hash Routing)

This is the home route. Click the nav links to simulate SPA navigation inside one file.

Inject Big Template (Template Tag)

Big Section from <template>

This content was stored in a <template> and cloned on demand.

Modules (Virtual DOM in Strings)

Content is stored as strings and injected only when needed.

Load Module String Unload Module

Virtualized List (DOM Recycling + Paging)

Only a small set of DOM nodes are reused to represent many items.

Compressed Content (Base64)

Large text is stored as base64 and decoded on demand.

Decode Text

Web Worker + Idle-Time Preprocessing

Heavy computation is offloaded to a worker created from a Blob.

Run Worker Task

Idle-time task status: pending…

Shadow DOM Island

IntersectionObserver Lazy Sections

Scroll down to trigger lazy loading of content.

Waiting to load section 1…

Waiting to load section 2…

Inline SVG Sprite

Using an inline icon:

CSS Containment

This box uses contain: content; to limit layout/repaint scope.

Anchor-Based Deep Linking

Jump directly to Virtual List or Modules.

Inline ES Modules

We define a module in a script tag and import it via Blob.

Run Inline Module

Base64 / Blob-URL Asset

Image generated from base64 data URL (1×1 PNG).

Self-Contained Service Worker

This page can register a service worker built from a Blob, all inside this file.

Register Service Worker

Skeleton Loading + Lazy Injection

Load Real Content

`;
const moduleContainer = document.getElementById(‘moduleContainer’); document.getElementById(‘btnLoadModule’).onclick = () => {
moduleContainer.innerHTML = moduleHTML;
};
document.getElementById(‘btnUnloadModule’).onclick = () => { moduleContainer.innerHTML = ”;
};

/* 8: Template Tag Injection */
document.getElementById(‘btnShowBigTemplate’).onclick = () => { const tpl = document.getElementById(‘bigSectionTemplate’);
const clone = tpl.content.cloneNode(true);
document.getElementById(‘bigTemplateTarget’).appendChild(clone); };

/* 3 & 12: DOM Recycling + Memory Paging (simple virtual list) */ const virtualList = document.getElementById(‘virtualList’);
const virtualInner = document.getElementById(‘virtualInner’); const totalItems = 1000;
const itemHeight = 20;
const visibleCount = 20;

virtualInner.style.height = (totalItems * itemHeight) + ‘px’;

const pool = [];
for (let i = 0; i < visibleCount; i++) {
const div = document.createElement(‘div’);
div.className = ‘list-item’;
div.style.position = ‘absolute’;
pool.push(div);
virtualInner.appendChild(div);
}

function renderVirtualList(scrollTop) {
const startIndex = Math.floor(scrollTop / itemHeight);
for (let i = 0; i < visibleCount; i++) {
const itemIndex = startIndex + i;
const node = pool[i];
if (itemIndex >= 0 && itemIndex < totalItems) {
node.style.top = (itemIndex * itemHeight) + ‘px’;
node.textContent = ‘Item #’ + itemIndex;
node.style.display = ”;
} else {
node.style.display = ‘none’;
}
}
}
virtualList.addEventListener(‘scroll’, () => {
renderVirtualList(virtualList.scrollTop);
});
renderVirtualList(0);

/* 4: Content Compression (Base64 text) */
const base64Text = btoa(‘This text was stored as base64 and decoded on demand.’); document.getElementById(‘btnDecodeText’).onclick = () => {
document.getElementById(‘decodedText’).textContent = atob(base64Text); };

/* 5: Web Worker via Blob + 10: Idle-Time Preprocessing */
let worker;
document.getElementById(‘btnRunWorker’).onclick = () => {
if (!worker) {
const workerCode = `
self.onmessage = e => {
let sum = 0;
for (let i = 0; i < 1e6; i++) sum += i;
self.postMessage(‘Worker sum: ‘ + sum);
};
`;
worker = new Worker(URL.createObjectURL(new Blob([workerCode], { type: ‘text/javascript’ }))); worker.onmessage = e => {
document.getElementById(‘workerResult’).textContent = e.data; };
}
worker.postMessage(‘run’);
};

if (‘requestIdleCallback’ in window) {
requestIdleCallback(() => {
// fake preprocessing
document.getElementById(‘idleStatus’).textContent = ‘idle preprocessing complete’; });
} else {
setTimeout(() => {
document.getElementById(‘idleStatus’).textContent = ‘idle preprocessing complete (fallback)’; }, 500);
}

/* 6: Shadow DOM Island */
const shadowHost = document.getElementById(‘shadowHost’);
const shadowRoot = shadowHost.attachShadow({ mode: ‘open’ }); shadowRoot.innerHTML = `