test: refine memory benchmark

package.json

@@ -20,6 +20,9 @@
     "build:i18n-docs": "node ./bin/generateI18nDocs",
     "build:typedoc": "typedoc --out docs-tmp --theme markdown --excludePrivate --excludeNotExported --hideSources --hideBreadcrumbs ./src/types && node ./bin/generateTypeDocs && rm -fr docs-tmp",
     "build:types": "tsc -d --outDir ./ts-tmp ./src/types/*.ts && mv ./ts-tmp/*.d.ts ./ && rm -fr ts-tmp",
+    "benchmark:memory": "run-p --race benchmark:memory:server benchmark:memory:test",
+    "benchmark:memory:server": "node ./test/memory/server.js",
+    "benchmark:memory:test": "node ./test/memory/test.js",
     "dev": "NODE_ENV=development rollup -c -w",
     "lint": "standard && stylelint '**/*.scss'",
     "lint:fix": "standard --fix && stylelint --fix '**/*.scss'",

test/memory/index.html

@@ -17,7 +17,7 @@
       document.body.appendChild(picker)
     } else if (params.has('compact')) {
       window.json = await (await fetch('/node_modules/emojibase-data/en/compact.json')).json()
-    } else { // full json
+    } else if (params.has('full')) {
       window.json = await (await fetch('/node_modules/emojibase-data/en/data.json')).json()
     }
   })()

test/memory/server.js

@@ -6,6 +6,8 @@ const port = 3000
 app.use(express.static('./'))
 
 app.get('/', (req, res) => {
+  // these headers are required for performance.measureMemory()
+  // https://web.dev/why-coop-coep/
   res.set('Cross-Origin-Embedder-Policy', 'require-corp')
     .set('Cross-Origin-Opener-Policy', 'same-origin')
     .type('text/html')

test/memory/test.js

@@ -1,8 +1,10 @@
 import puppeteer from 'puppeteer'
 import prettyBytes from 'pretty-bytes'
 import table from 'markdown-table'
+import fetch from 'node-fetch'
 
 const scenarios = [
+  'blank',
   'picker',
   'compact',
   'full'
@@ -10,9 +12,9 @@ const scenarios = [
 
 async function measureMemory (scenario) {
   const browser = await puppeteer.launch({
-    headless: false,
+    headless: false, // required for performance.measureMemory()
     args: [
-      '-enable-experimental-web-platform-features'
+      '-enable-experimental-web-platform-features' // required for performance.measureMemory()
     ]
   })
   const page = await browser.newPage()
@@ -25,17 +27,36 @@ async function measureMemory (scenario) {
   return bytes
 }
 
+function printBytes (bytes) {
+  return `${prettyBytes(bytes)} (${bytes})`
+}
+
 async function main () {
+  while (true) {
+    const resp = await fetch('http://localhost:3000')
+    if (resp.status === 200) {
+      break
+    } else {
+      console.log('Waiting for localhost:3000 to be availble')
+      await new Promise(resolve => setTimeout(resolve, 1000))
+    }
+  }
   const results = []
   for (const scenario of scenarios) {
     const bytes = await measureMemory(scenario)
-    results.push([
+    const relativeBytes = results.length ? (bytes - results[0].bytes) : 0
+    results.push({
       scenario,
       bytes,
-      prettyBytes(bytes)
-    ])
+      relativeBytes
+    })
   }
-  console.log(table([['Scenario', 'Bytes', 'Pretty bytes'], ...results]))
+  console.log(table([
+    ['Scenario', 'Bytes', 'Relative to blank page'],
+    ...results.map(({ scenario, bytes, relativeBytes }) => (
+      [scenario, printBytes(bytes), printBytes(relativeBytes)]
+    ))
+  ]))
 }
 
 main().catch(err => {