perf tests: show timings of different layout steps

Author: chearon

examples/perf-1.ts

@@ -2,7 +2,7 @@ import * as flow from 'dropflow';
 import parse from 'dropflow/parse.js';
 import fs from 'fs';
 import {createCanvas} from 'canvas';
-import {bench, run} from 'mitata';
+import {bench, run, do_not_optimize} from 'mitata';
 
 const p = (p: string) => new URL(`../assets/${p}`, import.meta.url);
 flow.fonts.add(flow.createFaceFromTablesSync(p('Arimo/Arimo-Bold.ttf')));
@@ -54,12 +54,26 @@ ctx.clearRect(0, 0, canvas.width, canvas.height);
 flow.paintToCanvas(blockContainer, ctx);
 fs.writeFileSync(new URL('perf-1.png', import.meta.url), canvas.toBuffer());
 
-bench('10 paragraphs generate, layout, and paint', () => {
+bench('altogether', () => {
   const blockContainer = flow.generate(rootElement);
   flow.clearWordCache();
   flow.layout(blockContainer, canvas.width, canvas.height);
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   flow.paintToCanvas(blockContainer, ctx);
-});
+}).gc('inner');
+
+bench('generate', () => {
+  do_not_optimize(flow.generate(rootElement));
+}).gc('inner');
+
+bench('layout', () => {
+  flow.clearWordCache();
+  flow.layout(blockContainer, canvas.width, canvas.height);
+}).gc('inner');
+
+bench('paint', () => {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  flow.paintToCanvas(blockContainer, ctx);
+}).gc('inner');
 
 await run();

examples/perf-2.ts

@@ -2,7 +2,7 @@ import * as flow from 'dropflow';
 import parse from 'dropflow/parse.js';
 import fs from 'fs';
 import {createCanvas} from 'canvas';
-import {bench, run} from 'mitata';
+import {bench, run, do_not_optimize} from 'mitata';
 
 const p = (p: string) => new URL(`../assets/${p}`, import.meta.url);
 flow.fonts.add(flow.createFaceFromTablesSync(p('Arimo/Arimo-Bold.ttf')));
@@ -1917,12 +1917,26 @@ flow.paintToCanvas(blockContainer, ctx);
 
 fs.writeFileSync(new URL('perf-2.png', import.meta.url), canvas.toBuffer());
 
-bench('10 paragraphs generate, layout, and paint', () => {
+bench('altogether', () => {
   const blockContainer = flow.generate(rootElement);
   flow.clearWordCache();
   flow.layout(blockContainer, 800, 28696);
   ctx.clearRect(0, 0, 800 , 28696 );
   flow.paintToCanvas(blockContainer, ctx);
-});
+}).gc('inner');
+
+bench('generate', () => {
+  do_not_optimize(flow.generate(rootElement));
+}).gc('inner');
+
+bench('layout', () => {
+  flow.clearWordCache();
+  flow.layout(blockContainer, 800, 28696);
+}).gc('inner');
+
+bench('paint', () => {
+  ctx.clearRect(0, 0, 800 , 28696 );
+  flow.paintToCanvas(blockContainer, ctx);
+}).gc('inner');
 
 await run();

examples/perf-3.ts

@@ -1,7 +1,7 @@
 import * as flow from 'dropflow';
 import fs from 'fs';
 import {createCanvas} from 'canvas';
-import {bench, run} from 'mitata';
+import {bench, run, do_not_optimize} from 'mitata';
 
 const p = (p: string) => new URL(`../assets/${p}`, import.meta.url);
 flow.fonts.add(flow.createFaceFromTablesSync(p('Roboto/Roboto-Regular.ttf')));
@@ -31,13 +31,30 @@ flow.layout(blockContainer, 100, 20);
 flow.paintToCanvas(blockContainer, ctx);
 fs.writeFileSync(new URL('perf-3.png', import.meta.url), canvas.toBuffer());
 
-bench('generate and layout one random word', () => {
+bench('altogether', () => {
   const html = flow.dom(
     flow.h('html', {style}, words[Math.floor(Math.random() * words.length)])
   );
   const blockContainer = flow.generate(html);
   flow.clearWordCache();
   flow.layout(blockContainer, 100, 20);
-});
+}).gc('inner');
+
+bench('dom', () => {
+  const html = flow.dom(
+    flow.h('html', {style}, words[Math.floor(Math.random() * words.length)])
+  );
+  do_not_optimize(html);
+}).gc('inner');
+
+bench('generate', () => {
+  const blockContainer = flow.generate(html);
+  do_not_optimize(blockContainer);
+}).gc('inner');
+
+bench('layout', () => {
+  flow.clearWordCache();
+  flow.layout(blockContainer, 100, 20);
+}).gc('inner');
 
 await run();