updated: fix benchmarks

riot · Sep 13, 2024 · 899d429 · 899d429
1 parent 400cb74
commit 899d429
Show file tree

Hide file tree

Showing 15 changed files with 4,802 additions and 1,929 deletions.
diff --git a/benchmarks/bundle.js b/benchmarks/bundle.js
diff --git a/benchmarks/events.cjs → benchmarks/events.js b/benchmarks/events.cjs → benchmarks/events.js
@@ -4,14 +4,14 @@ function fireEvent(el, name) {
   el.dispatchEvent(e)
 }
 
-module.exports = function (suite, testName, domBindings) {
+export default function (suite, testName, domBindings, rootNode) {
   function generateItems(amount, hasChildren) {
     const items = []
     while (amount--) {
       // eslint-disable-line
       items.push({
         name: `foo ${Math.random()}`,
-        props: hasChildren ? generateItems(5, false) : [],
+        props: hasChildren ? generateItems(3, false) : [],
       })
     }
     return items
@@ -25,7 +25,7 @@ module.exports = function (suite, testName, domBindings) {
       evaluate(scope) {
         return scope.items
       },
-      template: domBindings.template('<!----><p expr1></p>', [
+      template: domBindings.template(' <p expr1></p>', [
         {
           expressions: [
             {
@@ -60,7 +60,7 @@ module.exports = function (suite, testName, domBindings) {
           evaluate(scope) {
             return scope.item.props
           },
-          template: domBindings.template('<!---->', [
+          template: domBindings.template(' ', [
             {
               expressions: [
                 {
@@ -77,29 +77,30 @@ module.exports = function (suite, testName, domBindings) {
       ]),
     },
   ])
-
-  const loopTag = document.createElement('div')
-
-  suite
-    .on('start', function () {
-      // setup
-      tag.mount(loopTag, { items: [] })
-    })
-    .on('complete', function () {
-      tag.unmount()
-    })
-    .add(testName, () => {
-      const items = generateItems(10, true)
+  suite.add(
+    testName,
+    function () {
+      const items = generateItems(3, true)
       tag.update({ items })
-      const beforeLi = loopTag.querySelector('li:nth-child(2)')
+      const beforeLi = rootNode.querySelector('li:nth-child(2)')
       fireEvent(beforeLi, 'click')
       fireEvent(beforeLi, 'hover')
       items.splice(2, 1)
       items.splice(9, 1)
-      tag.update({ items: items.concat(generateItems(5, true)) })
+      tag.update({ items: items.concat(generateItems(3, true)) })
 
-      const afterLi = loopTag.querySelector('li:nth-child(2)')
+      const afterLi = rootNode.querySelector('li:nth-child(2)')
       fireEvent(afterLi, 'click')
       fireEvent(afterLi, 'hover')
-    })
+    },
+    {
+      onStart: function () {
+        document.body.appendChild(rootNode)
+        tag.mount(rootNode, { items: [] })
+      },
+      onComplete: function () {
+        tag.unmount({}, {}, true)
+      },
+    },
+  )
 }
diff --git a/benchmarks/if.cjs → benchmarks/if.js b/benchmarks/if.cjs → benchmarks/if.js
@@ -1,12 +1,12 @@
-module.exports = function (suite, testName, domBindings) {
+export default function (suite, testName, domBindings, rootNode) {
   const tag = domBindings.template('<div></div><p expr0></p>', [
     {
       selector: '[expr0]',
       type: domBindings.bindingTypes.IF,
       evaluate(scope) {
         return scope.isVisible
       },
-      template: domBindings.template('<b expr0><!----></b>', [
+      template: domBindings.template('<b expr0> </b>', [
         {
           selector: '[expr0]',
           expressions: [
@@ -23,17 +23,23 @@ module.exports = function (suite, testName, domBindings) {
     },
   ])
 
-  suite
-    .on('start', function () {
-      // setup
-      const ifTag = document.createElement('div')
-      tag.mount(ifTag, { isVisible: true, text: 'Hello' })
-    })
-    .on('complete', function () {
-      tag.unmount()
-    })
-    .add(testName, () => {
+  suite.add(
+    testName,
+    () => {
       tag.update({ isVisible: false, text: 'Hello' })
       tag.update({ isVisible: true, text: 'Hello' })
-    })
+    },
+    {
+      onStart: function () {
+        document.body.appendChild(rootNode)
+        tag.mount(rootNode, {
+          isVisible: true,
+          text: 'Hello',
+        })
+      },
+      onComplete: function () {
+        tag.unmount({}, {}, true)
+      },
+    },
+  )
 }
diff --git a/benchmarks/index.cjs b/benchmarks/index.cjs
diff --git a/benchmarks/index.html b/benchmarks/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+
+    <script src="https://unpkg.com/lodash@4.17.21/lodash.js"></script>
+    <script src="https://unpkg.com/platform@1.3.6/platform.js"></script>
+    <script src="https://unpkg.com/benchmark@2.1.4/benchmark.js"></script>
+    <script async src="./bundle.js"></script>
+  </head>
+
+  <body></body>
+</html>
diff --git a/benchmarks/index.js b/benchmarks/index.js
@@ -0,0 +1,45 @@
+/* eslint-disable no-console */
+import jsdomGlobal from 'jsdom-global'
+import Benchmark from 'benchmark'
+import * as domBindings from '../dist/dom-bindings.js'
+import * as oldVersion from './old-version.js'
+
+import keyedListBench from './keyed.list.js'
+import eventsBench from './events.js'
+import listBench from './list.js'
+import ifBench from './if.js'
+import mountBench from './mount.js'
+
+// created the dom only on node env
+if (globalThis.process) jsdomGlobal()
+
+const suite = new Benchmark.Suite()
+
+const benchmarks = {
+  'List with keys': keyedListBench,
+  Events: eventsBench,
+  'Normal list': listBench,
+  'Toggle if': ifBench,
+  'Simple mount': mountBench,
+}
+
+Object.entries(benchmarks).forEach(([key, bench]) => {
+  bench(suite, key, domBindings, document.createElement('div'))
+  bench(suite, `${key} (old)`, oldVersion, document.createElement('div'))
+})
+
+suite
+  .on('cycle', function (event) {
+    if (!globalThis.process) {
+      console.log(String(event.target))
+      return
+    }
+
+    const mem = (process.memoryUsage().heapUsed / 1024 / 1024).toFixed(2)
+    console.log(String(event.target), `Memory usage: ${mem} MiB`)
+    global.gc()
+  })
+  .on('error', function (e) {
+    console.log(e.target.error)
+  })
+  .run({ async: true })
diff --git a/benchmarks/keyed.list.cjs → benchmarks/keyed.list.js b/benchmarks/keyed.list.cjs → benchmarks/keyed.list.js
@@ -1,11 +1,11 @@
-module.exports = function (suite, testName, domBindings) {
+export default function (suite, testName, domBindings, rootNode) {
   function generateItems(amount, hasChildren) {
     const items = []
     while (amount--) {
       // eslint-disable-line
       items.push({
         name: `foo ${Math.random()}`,
-        props: hasChildren ? generateItems(5, false) : [],
+        props: hasChildren ? generateItems(3, false) : [],
       })
     }
     return items
@@ -22,7 +22,7 @@ module.exports = function (suite, testName, domBindings) {
       evaluate(scope) {
         return scope.items
       },
-      template: domBindings.template('<!----><p expr1></p>', [
+      template: domBindings.template(' <p expr1></p>', [
         {
           expressions: [
             {
@@ -44,7 +44,7 @@ module.exports = function (suite, testName, domBindings) {
           evaluate(scope) {
             return scope.item.props
           },
-          template: domBindings.template('<!---->', [
+          template: domBindings.template(' ', [
             {
               expressions: [
                 {
@@ -62,22 +62,26 @@ module.exports = function (suite, testName, domBindings) {
     },
   ])
 
-  suite
-    .on('start', function () {
-      // setup
-      const loopTag = document.createElement('div')
-      tag.mount(loopTag, { items: [] })
-    })
-    .on('complete', function () {
-      tag.unmount()
-    })
-    .add(testName, () => {
-      const items = generateItems(10, true)
+  suite.add(
+    testName,
+    () => {
+      const items = generateItems(3, true)
       tag.update({ items })
       items.splice(2, 1)
       items.splice(4, 1)
       items.splice(6, 1)
       items.splice(9, 1)
-      tag.update({ items: items.concat(generateItems(5, true)) })
-    })
+      tag.update({ items: items.concat(generateItems(3, true)) })
+      tag.update({ items: [] })
+    },
+    {
+      onStart: function () {
+        document.body.appendChild(rootNode)
+        tag.mount(rootNode, { items: [] })
+      },
+      onComplete: function () {
+        tag.unmount({}, {}, true)
+      },
+    },
+  )
 }
diff --git a/benchmarks/list.cjs → benchmarks/list.js b/benchmarks/list.cjs → benchmarks/list.js
@@ -1,4 +1,4 @@
-module.exports = function (suite, testName, domBindings) {
+export default function (suite, testName, domBindings, rootNode) {
   function generateItems(amount, hasChildren) {
     const items = []
     while (amount--) {
@@ -19,7 +19,7 @@ module.exports = function (suite, testName, domBindings) {
       evaluate(scope) {
         return scope.items
       },
-      template: domBindings.template('<!----><p expr1></p>', [
+      template: domBindings.template(' <p expr1></p>', [
         {
           expressions: [
             {
@@ -38,7 +38,7 @@ module.exports = function (suite, testName, domBindings) {
           evaluate(scope) {
             return scope.item.props
           },
-          template: domBindings.template('<!---->', [
+          template: domBindings.template(' ', [
             {
               expressions: [
                 {
@@ -56,18 +56,22 @@ module.exports = function (suite, testName, domBindings) {
     },
   ])
 
-  suite
-    .on('start', function () {
-      // setup
-      const loopTag = document.createElement('div')
-      tag.mount(loopTag, { items: [] })
-    })
-    .on('complete', function () {
-      tag.unmount()
-    })
-    .add(testName, () => {
-      const items = generateItems(50, true)
+  suite.add(
+    testName,
+    () => {
+      const items = generateItems(3, true)
       tag.update({ items })
-      tag.update({ items: items.concat(generateItems(30, true)) })
-    })
+      tag.update({ items: items.concat(generateItems(3, true)) })
+      tag.update({ items: [] })
+    },
+    {
+      onStart: function () {
+        document.body.appendChild(rootNode)
+        tag.mount(rootNode, { items: [] })
+      },
+      onComplete: function () {
+        tag.unmount({}, {}, true)
+      },
+    },
+  )
 }
diff --git a/benchmarks/mount.cjs b/benchmarks/mount.cjs