Производительность веб-приложения

function renderPage(data) {
  const model = normalize(data);
  return render(model);
}

performance.mark("search-start");
await runSearch();
performance.mark("search-end");
performance.measure("search", "search-start", "search-end");

for (let i = 0; i < 30; i++) samples.push(await benchmark());

<script type="module" src="/app.js"></script>
<link rel="preload" href="/critical.woff2" as="font" crossorigin>

const cache = new Map();
function mount() {
  const modal = createModal();
  cache.set("last", modal);
  document.body.append(modal);
  return () => modal.remove();
}

function mount(panel) {
  const id = setInterval(() => update(panel), 1000);
  return () => clearInterval(id);
}

const metadata = new WeakMap();
metadata.set(element, { mountedAt: Date.now() });

function step() {
  doChunk();
  queueMicrotask(step);
}
step();

async function processAll(items, signal) {
  for (let i = 0; i < items.length;) {
    const end = Math.min(i + 500, items.length);
    while (i < end) consume(items[i++]);
    signal.throwIfAborted();
    await nextTask();
  }
}

worker.postMessage(input, transferable);
worker.onmessage = event => show(event.data);

button.addEventListener("click", () => {
  const end = performance.now() + 120;
  while (performance.now() < end) {}
});

button.addEventListener("click", async () => {
  const { openEditor } = await import("./editor.js");
  openEditor();
});

<link rel="preload" href="rare-widget.js" as="script">

<img src="gallery-42.jpg" loading="lazy" alt="...">

Cache-Control: public, max-age=31536000, immutable
Content-Type: text/javascript

expect(median(samples)).toBeLessThan(baseline * 1.15);

reportMetric({ name, value, buildId: APP_BUILD });

const model = memoizeById(buildModel);
render(model(entity));