improve benchmark (#1533)

glimmerjs · Dec 23, 2023 · 8b470f4 · 8b470f4
1 parent 41f1528
commit 8b470f4
Show file tree

Hide file tree

Showing 22 changed files with 493 additions and 268 deletions.
diff --git a/.github/workflows/perf.yml b/.github/workflows/perf.yml
@@ -12,13 +12,14 @@ env:
   EXPERIMENT_BRANCH_NAME: ${{ github.head_ref || github.ref_name }}
   CONTROL_BRANCH_NAME: 'main'
   FIDELITY: 100
+  THROTTLE: 2
   FORK_NAME: ${{ github.event.pull_request.head.repo.full_name }}
 
 jobs:
   master-krausest-comparison:
     name: Glimmer Krausest Benchmark
     runs-on: ubuntu-latest
-    timeout-minutes: 20
+    timeout-minutes: 35
     steps:
       - uses: actions/checkout@v4
         with:
@@ -30,6 +31,9 @@ jobs:
       - name: RUN
         run: pnpm run benchmark:setup
 
+      - name: Remove unused artifacts
+        run: rm -rf ./tracerbench-results/traces && rm -rf ./tracerbench-results/traces.zip
+
       - name: Upload Tracerbench Artifacts
         if: failure() || success()
         uses: actions/upload-artifact@v3

diff --git a/benchmark/.eslintrc.cjs b/benchmark/.eslintrc.cjs
diff --git a/benchmark/benchmarks/krausest/index.html b/benchmark/benchmarks/krausest/index.html
@@ -4,6 +4,173 @@
     <meta charset="UTF-8" />
     <title>krausest benchmark</title>
   </head>
+  <style>
+    /* http://meyerweb.com/eric/tools/css/reset/
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+    html,
+    body,
+    div,
+    span,
+    applet,
+    object,
+    iframe,
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p,
+    blockquote,
+    pre,
+    a,
+    abbr,
+    acronym,
+    address,
+    big,
+    cite,
+    code,
+    del,
+    dfn,
+    em,
+    img,
+    ins,
+    kbd,
+    q,
+    s,
+    samp,
+    small,
+    strike,
+    strong,
+    sub,
+    sup,
+    tt,
+    var,
+    b,
+    u,
+    i,
+    center,
+    dl,
+    dt,
+    dd,
+    ol,
+    ul,
+    li,
+    fieldset,
+    form,
+    label,
+    legend,
+    table,
+    caption,
+    tbody,
+    tfoot,
+    thead,
+    tr,
+    th,
+    td,
+    article,
+    aside,
+    canvas,
+    details,
+    embed,
+    figure,
+    figcaption,
+    footer,
+    header,
+    hgroup,
+    menu,
+    nav,
+    output,
+    ruby,
+    section,
+    summary,
+    time,
+    mark,
+    audio,
+    video {
+      margin: 0;
+      padding: 0;
+      border: 0;
+      font-size: 100%;
+      font: inherit;
+      vertical-align: baseline;
+    }
+    h1 {
+      font-family: Arial;
+      font-size: 28px;
+    }
+    /* HTML5 display-role reset for older browsers */
+    article,
+    aside,
+    details,
+    figcaption,
+    figure,
+    footer,
+    header,
+    hgroup,
+    menu,
+    nav,
+    section {
+      display: block;
+    }
+    body {
+      line-height: 1;
+    }
+    ol,
+    ul {
+      list-style: none;
+    }
+    blockquote,
+    q {
+      quotes: none;
+    }
+    blockquote:before,
+    blockquote:after,
+    q:before,
+    q:after {
+      content: "";
+      content: none;
+    }
+    table {
+      border-collapse: collapse;
+      border-spacing: 0;
+    }
+
+    .jumbotron {
+      background-color: #7b7;
+    }
+    .btn {
+      width: 200px;
+    }
+    .table {
+      table-layout: fixed;
+      font-family: Arial;
+      font-size: 15px;
+    }
+    .table tr {
+      height: 20px;
+      border-top: 1px solid #000;
+      border-bottom: 1px solid #000;
+    }
+    .table td.col-md-1 {
+      width: 50px;
+    }
+    .table td.col-md-4 {
+      width: 350px;
+    }
+    .table td.col-md-6 {
+      width: 400px;
+    }
+    .glyphicon-remove:after {
+      content: "x";
+    }
+    tr.danger td {
+      background-color: #faa;
+    }
+  </style>
   <script type="module">
     import run from "./browser.js";
     run();

diff --git a/benchmark/benchmarks/krausest/lib/components/Application.hbs b/benchmark/benchmarks/krausest/lib/components/Application.hbs
@@ -1,6 +1,52 @@
 <div class="container">
-  <table class="table table-hover table-striped test-data"><tbody>
-      {{#each @items as |item|}}<Row @select={{this.select}} @item={{item}} />{{/each}}
-    </tbody></table>
-  <span className="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
+  <div class="jumbotron">
+    <div class="row">
+      <div class="col-md-6">
+        <h1>Glimmer-VM</h1>
+      </div>
+      <div class="col-md-6">
+        <div class="row">
+          <div class="col-sm-6 smallpad">
+            <BsButton id="run" {{on "click" this.create}}>
+              Create 1,000 rows
+            </BsButton>
+          </div>
+          <div class="col-sm-6 smallpad">
+            <BsButton id="runlots" {{on "click" this.runLots}}>
+              Create 10,000 rows
+            </BsButton>
+          </div>
+          <div class="col-sm-6 smallpad">
+            <BsButton id="add" {{on "click" this.add}}>
+              Append 1,000 rows
+            </BsButton>
+          </div>
+          <div class="col-sm-6 smallpad">
+            <BsButton id="update" {{on "click" this.update}}>
+              Update every 10th row
+            </BsButton>
+          </div>
+          <div class="col-sm-6 smallpad">
+            <BsButton id="clear" {{on "click" this.clear}}>
+              Clear
+            </BsButton>
+          </div>
+          <div class="col-sm-6 smallpad">
+            <BsButton id="swaprows" {{on "click" this.swapRows}}>
+              Swap Rows
+            </BsButton>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <table class="table table-hover table-striped test-data">
+    <tbody>
+      {{#each this.items as |item|}}
+        <Row @select={{this.select}} @remove={{this.remove}} @item={{item}} />
+      {{/each}}
+    </tbody>
+  </table>
+  <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
 </div>
diff --git a/benchmark/benchmarks/krausest/lib/components/Application.js b/benchmark/benchmarks/krausest/lib/components/Application.js