Performance

import { enhance } from 'weblisk';
import { time, getEntries } from 'weblisk/perf/marks.js';

enhance('#demo-marks', (el, { $ }) => {
  $('#btn-marks').addEventListener('click', async () => {
    const [result, duration] = await time('demo-task', async () => {
      await new Promise(r =>
        setTimeout(r, Math.random() * 200 + 50)
      );
      return 42;
    });

    const entries = getEntries();
    $('#output-marks').textContent =
      `time('demo-task') completed:\n` +
      `  Result: ${result}\n` +
      `  Duration: ${duration.toFixed(2)}ms\n\n` +
      `Total wl: marks: ${entries.marks.length}\n` +
      `Total wl: measures: ${entries.measures.length}`;
  });
});

import { effect, enhance } from 'weblisk';
import { vitals } from 'weblisk/perf/vitals.js';

enhance('#demo-vitals', (el, { $ }) => {
  const v = vitals();

  effect(() => {
    $('#output-vitals').textContent = [
      `LCP:  ${Math.round(v.lcp())}ms`,
      `CLS:  ${v.cls().toFixed(4)}`,
      `FID:  ${Math.round(v.fid())}ms`,
      `INP:  ${Math.round(v.inp())}ms`,
      `FCP:  ${Math.round(v.fcp())}ms`,
      `TTFB: ${Math.round(v.ttfb())}ms`,
    ].join('\n');
  });
});