Add cold-startup benchmark (navigation start to first frame)

frameworks/blits/src/App.js

@@ -31,6 +31,10 @@ export default Blits.Application({
   routes: [
     { path: '/', component: Benchmark },
     { path: '/memory', component: Memory },
+    // Hash-routed alias so `#startup` mounts Benchmark (same as `#memory`
+    // mounts Memory). Benchmark.ready branches on the hash and runs the
+    // cold-startup measurement instead of the throughput sequence.
+    { path: '/startup', component: Benchmark },
   ],
   hooks: {
     async ready() {

frameworks/blits/src/pages/Benchmark.js

@@ -17,11 +17,13 @@
 
 import Blits from '@lightningjs/blits'
 import { warmup } from '../../../../shared/utils/warmup.js'
+import { reportStartup } from '../../../../shared/utils/startup.js'
 import {
   clearTest,
   sequence,
   printResults,
   createMany,
+  createStartup,
   updateMany,
   updateRandom,
   swapRows,
@@ -56,6 +58,15 @@ export default Blits.Component('Benchmark', {
   },
   hooks: {
     async ready() {
+      // `#startup` shares the `/` route (hash only), so branch here instead
+      // of adding a route: single cold load of 1,000 rows, timed from
+      // navigation start to first idle (see createStartup in perf.js).
+      const hash = window.location.hash.substring(1);
+      if (hash === 'startup') {
+        const { time } = await createStartup.call(this, 1000)
+        reportStartup(time)
+        return
+      }
       sequence([
         () => this.testCreateMany(),
         () => this.testUpdateMany(),

frameworks/blits/src/perf.js

@@ -125,6 +125,32 @@ const createMany = function (amount) {
   })
 }
 
+const createStartup = function (amount = 1000) {
+  return new Promise((resolve) => {
+    // Cold startup: navigation start -> first idle after rendering `amount`
+    // rows. A startTime of 0 makes waitUntilIdle resolve with
+    // `performance.now()`, i.e. time since navigation start, so JS
+    // download/parse/execute, framework init and font load are all included.
+    // No clear() first: items are empty on fresh load.
+    waitUntilIdle(renderer, 0).then((time) => {
+      resolve({ time })
+    })
+
+    const items = []
+
+    let x = 0
+    let y = 0
+    for (let i = 1; i < amount + 1; i++) {
+      items.push(createItem(x, y))
+
+      x = (i % 27) * 40
+      y = ~~(i / 27) * 40
+    }
+
+    this.items = items
+  })
+}
+
 const createManyWithoutText = function (amount = 20000) {
   return new Promise((resolve) => {
     clear.call(this).then(() => {
@@ -242,6 +268,7 @@ export {
   printResults,
   createMany,
   createManyWithoutText,
+  createStartup,
   updateMany,
   updateRandom,
   swapRows,

frameworks/ftl-canvas-bitmap/index.js

@@ -5,6 +5,7 @@ import bitmapTextEngine from 'ftl/text/bitmap';
 
 import { adjectives, nouns } from '../../shared/data.js';
 import { warmup } from '../../shared/utils/warmup.js';
+import { reportStartup } from '../../shared/utils/startup.js';
 import { run } from '../../shared/utils/run.js';
 
 
@@ -297,6 +298,18 @@ const createMemoryBenchmark = async () => {
   console.log('Memory!', results);
 };
 
+const runStartupBenchmark = async () => {
+  // Cold startup: navigation start -> first idle after rendering 1,000 rows.
+  // waitUntilIdle resolves `performance.now() - startTime`, so a startTime of 0
+  // yields time since navigation start: JS download/parse/execute, framework
+  // init, bitmap font load and scene build are all included. Runs after
+  // fontLoadedPromise resolves, same as the regular benchmark.
+  const startupPromise = waitUntilIdle(0);
+  for (let i = 0; i < 1000; i++) createRow(rootNode, i);
+  const time = await startupPromise;
+  reportStartup(time);
+};
+
 const runBenchmark = async () => {
   const results = {};
 
@@ -354,6 +367,8 @@ const hash = window.location.hash.substring(1);
 fontLoadedPromise.then(() => {
   if (hash === 'memory') {
     createMemoryBenchmark();
+  } else if (hash === 'startup') {
+    runStartupBenchmark();
   } else {
     runBenchmark();
   }

frameworks/ftl-canvas/index.js

@@ -5,6 +5,7 @@ import canvasTextEngine from 'ftl/text/canvas';
 
 import { adjectives, nouns } from '../../shared/data.js';
 import { warmup } from '../../shared/utils/warmup.js';
+import { reportStartup } from '../../shared/utils/startup.js';
 import { run } from '../../shared/utils/run.js';
 
 const canvas = document.querySelector('canvas')
@@ -287,6 +288,17 @@ const createMemoryBenchmark = async () => {
   console.log('Memory!', results);
 };
 
+const runStartupBenchmark = async () => {
+  // Cold startup: navigation start -> first idle after rendering 1,000 rows.
+  // waitUntilIdle resolves `performance.now() - startTime`, so a startTime of 0
+  // yields time since navigation start: JS download/parse/execute, framework
+  // init and scene build are all included.
+  const startupPromise = waitUntilIdle(0);
+  for (let i = 0; i < 1000; i++) createRow(rootNode, i);
+  const time = await startupPromise;
+  reportStartup(time);
+};
+
 const runBenchmark = async () => {
   const results = {};
 
@@ -342,6 +354,8 @@ const runAndLog = async (fn, args, repeat) => {
 const hash = window.location.hash.substring(1);
 if (hash === 'memory') {
   createMemoryBenchmark();
+} else if (hash === 'startup') {
+  runStartupBenchmark();
 } else {
   runBenchmark();
 }

frameworks/ftl-webgl-bitmap/index.js

@@ -7,6 +7,7 @@ import { createShader } from 'ftl/shaders/create';
 
 import { adjectives, nouns } from '../../shared/data.js';
 import { warmup } from '../../shared/utils/warmup.js';
+import { reportStartup } from '../../shared/utils/startup.js';
 import { run } from '../../shared/utils/run.js';
 
 const shaders = {
@@ -301,6 +302,18 @@ const createMemoryBenchmark = async () => {
   console.log('Memory!', results);
 };
 
+const runStartupBenchmark = async () => {
+  // Cold startup: navigation start -> first idle after rendering 1,000 rows.
+  // waitUntilIdle resolves `performance.now() - startTime`, so a startTime of 0
+  // yields time since navigation start: JS download/parse/execute, framework
+  // init, bitmap font load and scene build are all included. Runs after
+  // fontLoadedPromise resolves, same as the regular benchmark.
+  const startupPromise = waitUntilIdle(0);
+  for (let i = 0; i < 1000; i++) createRow(rootNode, i);
+  const time = await startupPromise;
+  reportStartup(time);
+};
+
 const runBenchmark = async () => {
   const results = {};
 
@@ -358,6 +371,8 @@ const hash = window.location.hash.substring(1);
 fontLoadedPromise.then(() => {
   if (hash === 'memory') {
     createMemoryBenchmark();
+  } else if (hash === 'startup') {
+    runStartupBenchmark();
   } else {
     runBenchmark();
   }

frameworks/ftl/index.js

@@ -7,6 +7,7 @@ import { createShader } from 'ftl/shaders/create';
 
 import { adjectives, nouns } from '../../shared/data.js';
 import { warmup } from '../../shared/utils/warmup.js';
+import { reportStartup } from '../../shared/utils/startup.js';
 import { run } from '../../shared/utils/run.js';
 
 const shaders = {
@@ -304,6 +305,23 @@ const createMemoryBenchmark = async () => {
   console.log('Memory!', results);
 };
 
+const runStartupBenchmark = async () => {
+  // Cold startup: navigation start -> first idle after rendering 1,000 rows.
+  // waitUntilIdle resolves `performance.now() - startTime`, so a startTime of 0
+  // yields time since navigation start: JS download/parse/execute, framework
+  // init, font atlas load and scene build are all included.
+  await loadFont('msdf', {
+    family: 'Ubuntu',
+    atlas: './assets/Ubuntu-Regular.msdf.png',
+    fontData: './assets/UbuntuRegularMsdf.json'
+  })
+
+  const startupPromise = waitUntilIdle(0);
+  for (let i = 0; i < 1000; i++) createRow(rootNode, i);
+  const time = await startupPromise;
+  reportStartup(time);
+};
+
 const runBenchmark = async () => {
 
   await loadFont('msdf', {
@@ -367,6 +385,8 @@ const runAndLog = async (fn, args, repeat) => {
 const hash = window.location.hash.substring(1);
 if (hash === 'memory') {
   createMemoryBenchmark();
+} else if (hash === 'startup') {
+  runStartupBenchmark();
 } else {
   runBenchmark();
 }

frameworks/lightning2-core/index.js

@@ -7,6 +7,7 @@ import Lightning from '@lightningjs/core';
 
 import { adjectives, nouns } from '../../shared/data';
 import { warmup } from '../../shared/utils/warmup';
+import { reportStartup } from '../../shared/utils/startup.js';
 import { run } from '../../shared/utils/run.js';
 
 // apply CSS styling
@@ -81,6 +82,9 @@ export class App extends Lightning.Application {
         if (hash === 'memory') {
             console.log('Running memory benchmark');
             this.createMemoryBenchmark();
+        } else if (hash === 'startup') {
+            console.log('Running startup benchmark');
+            this.runStartupBenchmark();
         } else {
             this.runBenchmark();
         }
@@ -376,6 +380,23 @@ export class App extends Lightning.Application {
         console.log('Done!', results);
     }
 
+    async runStartupBenchmark() {
+        // Cold startup: navigation start -> first stage idle after rendering
+        // 1,000 rows. Items is empty on fresh load; a startTime of 0 makes
+        // waitUntilIdle resolve with `performance.now()`, i.e. time since
+        // navigation start, so JS download/parse/execute and framework init
+        // are included.
+        const startupPromise = this.waitUntilIdle(0);
+
+        const items = this.tag('Items');
+        for (let i = 0; i < 1000; i++) {
+            this._createRow(items, i);
+        }
+
+        const time = await startupPromise;
+        reportStartup(time);
+    }
+
     async createMemoryBenchmark() {
         const results = {};
 

frameworks/lightning2/index.js

@@ -6,6 +6,7 @@ import Lightning from '@lightningjs/core';
 
 import { adjectives, nouns } from '../../shared/data.js';
 import { warmup } from '../../shared/utils/warmup.js';
+import { reportStartup } from '../../shared/utils/startup.js';
 import { run } from '../../shared/utils/run.js';
 
 // apply CSS styling
@@ -129,6 +130,9 @@ export class App extends Lightning.Application {
         if (hash === 'memory') {
             console.log('Running memory benchmark');
             this.createMemoryBenchmark();
+        } else if (hash === 'startup') {
+            console.log('Running startup benchmark');
+            this.runStartupBenchmark();
         } else {
             this.runBenchmark();
         }
@@ -383,6 +387,23 @@ export class App extends Lightning.Application {
         console.log('Done!', results);
     }
 
+    async runStartupBenchmark() {
+        // Cold startup: navigation start -> first stage idle after rendering
+        // 1,000 rows. Items is empty on fresh load; a startTime of 0 makes
+        // waitUntilIdle resolve with `performance.now()`, i.e. time since
+        // navigation start, so JS download/parse/execute and framework init
+        // are included.
+        const startupPromise = this.waitUntilIdle(0);
+
+        const items = this.tag('Items');
+        for (let i = 0; i < 1000; i++) {
+            this._createRow(items, i);
+        }
+
+        const time = await startupPromise;
+        reportStartup(time);
+    }
+
     async createMemoryBenchmark() {
         const results = {};
 

frameworks/renderer-canvasfonts/index.js

@@ -22,6 +22,7 @@ import { CanvasCoreRenderer, CanvasTextRenderer } from '@lightningjs/renderer/ca
 import { colours, adjectives, nouns } from '../../shared/data.js';
 import { warmup } from '../../shared/utils/warmup.js';
 import { waitUntilIdle } from '../../shared/utils/waitUntilIdle.js';
+import { reportStartup } from '../../shared/utils/startup.js';
 import { run } from '../../shared/utils/run.js';
 
 const appHeight = 1080;
@@ -278,6 +279,26 @@ const createMemoryBenchmark = async () => {
     console.log('Memory!', results);
 }
 
+const runStartupBenchmark = async () => {
+    // Cold startup: navigation start -> first idle after rendering 1,000 rows.
+    // A startTime of 0 makes waitUntilIdle resolve with `performance.now()`,
+    // i.e. time since navigation start, so JS download/parse/execute,
+    // framework init and font atlas load are all included.
+    const startupPromise = waitUntilIdle(renderer, 0);
+
+    for (let i = 0; i < 1000; i++) {
+        createRow(rootNode, {
+            index: i,
+            color: pick(colours),
+            textColor: pick(colours),
+            text: `${pick(adjectives)} ${pick(nouns)}`
+        });
+    }
+
+    const time = await startupPromise;
+    reportStartup(time);
+}
+
 const runBenchmark = async () => {
     const results = {};
 
@@ -357,6 +378,9 @@ const hash = window.location.hash.substring(1);
 if (hash === 'memory') {
     console.log('Running memory benchmark');
     createMemoryBenchmark();
+} else if (hash === 'startup') {
+    console.log('Running startup benchmark');
+    runStartupBenchmark();
 } else {
     runBenchmark();
 }