D3 Examples - Simple JavaScript benchmarking tool

Simple Benchmarking Tool
Runs benchmarks and generates the results in a table.
Setup benchmarks to run in an array of objects with two properties:
name: a title for the table column of results
run: a function that is called to run the benchmark and returns a value
Start the benchmarks by passing the table element where the results are to be placed and an array of benchmarks to run.
Here's another example where this benchmarking tool is used: Simple Molecules
xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta content='text/html;charset=utf-8' http-equiv='Content-Type' />
    <title>Simple Benchmarking Tool</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@12.10.3/d3.time.js"></script>
    <script type="text/javascript" src="benchmark.js"></script>
    <style type="text/css">
      body {
        font: 13px sans-serif;
      }
      table {
        font: 11px/24px Verdana, Arial, Helvetica, sans-serif;
        border-collapse: collapse; }
      th {
        padding: 0 1em;
        text-align: left; }
      td {
        border-top: 1px solid #cccccc;
        padding: 0 1em; }
    </style>
  </head>
  <body>
​
    <h1>Example of simple benchmarking tool</h1>
    <p>
      This benchmarking tool can be used to run a collection of benchmarks and render the results into a table.
    </p>
    <p>
      The example below measures the computational performance of a browser calculating the 
      <a href='https://en.wikipedia.org/wiki/Lennard-Jones_potential'>Lennard-Jones Potential</a>
      1,000,000 times. First calculating the value and pushing the result into an array. 
      The second test pre-calculates the 1,000,000 values and only measures the time it takes
      to read values from the pre-calculated array and store them into the result array.
    </p>
    <p>
      Update 20200113: very suprising results: Chrome is about 9 times slower calculating
      the Lennard-Jones Potential than FireFox and Safari!
    </p>
    <table>
      <tr>
        <th>browser</th>
        <th>version</th>
        <th>cpu/os</th>
        <th>date</th>
        <th>Lennard-Jones, 1,000,000 iterations (ms)</th>
        <th>Lennard-Jones transferring from pre-calculated array, 1,000,000 iterations (ms)</th>
      </tr>
      <tr>
        <td>Safari</td>
        <td>13.0.4</td>
        <td>Intel Mac OS X 10_15_2</td>
        <td>2020-01-13 23:30</td>
        <td>18</td>
        <td>10</td>
      </tr>
      <tr>
        <td>Firefox</td>
        <td>72.0</td>
        <td>Intel Mac OS X 10.15</td>
        <td>2020-01-13 23:29</td>
        <td>20</td>
        <td>13</td>
      </tr>
      <tr>
        <td>Chrome</td>
        <td>79.0.3945.88</td>
        <td>Intel Mac OS X 10_15_2</td>
        <td>2020-01-13 23:37</td>
        <td>179</td>
        <td>26</td>
      </tr>
    </table>    
​
    <br>
    <button id='run-benchmarks'>Run Benchmarks</button>
    <table id="benchmark-results" />
    <div id='benchmarks'>
​
    <script type='text/javascript'>
​
      var benchmark_results = document.getElementById("benchmark-results");
      var run_benchmarks = document.getElementById("run-benchmarks");
​
      var benchmarks_to_run = [
        {
          name: "Lennard-Jones, 1,000,000 iterations (ms)",
          run: function() {
            var epsilon = -0.4,                   // depth of the potential well
                sigma   =  4.0,                   // finite distance at which the inter-particle potential is zero
                rmin = Math.pow(2, 1/6) * sigma,  // distance at which the potential well reaches its minimum
​
                alpha = 4 * epsilon * Math.pow(sigma, 12),
                beta  = 4 * epsilon * Math.pow(sigma, 6);
​
            var start = +Date.now();
            var results = [];
            for (var i = 0; i <= 100; i+=0.0001) {
              results.push((alpha/Math.pow(i, 12) - beta/Math.pow(i, 6)) * -1);
            }
            return Date.now() - start;
          }
        },
        {
          name: "Lennard-Jones transferring from pre-calculated array, 1,000,000 iterations (ms)",
          run: function() {
            var epsilon = -0.4,                   // depth of the potential well
                sigma   =  4.0,                   // finite distance at which the inter-particle potential is zero
                rmin = Math.pow(2, 1/6) * sigma,  // distance at which the potential well reaches its minimum
​
                alpha = 4 * epsilon * Math.pow(sigma, 12),
                beta  = 4 * epsilon * Math.pow(sigma, 6),
                ljf_index = [];
            
            
            for (var i = 0; i <= 100; i+=0.0001) {
              ljf_index.push((alpha/Math.pow(i, 12) - beta/Math.pow(i, 6)) * -1);
            }
​
            var start = +Date.now();
            var results = [];
            for (var i = 0; i <= 100; i+=0.0001) {
              results.push(ljf_index[ ~~ (0.5 + i*10000)])
              // results.push(ljf_index[ (0.5 + i*10000) << 0])
              // results.push(Math.floor(i*10000)])
            }
            return Date.now() - start;
          }
        }
      ];
​
      window.onload = function() {
        run_benchmarks.onclick = function() {
          benchmark.run(benchmark_results, benchmarks_to_run)
        }
      };
​
    </script>
  </body>
</html>
​
    