Benchmark: d3test - MeasureThat.net

HTML Preparation code:

<div id="test3"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.0/d3.min.js"></script>

Script Preparation code:

function compile3(arr){
  console.time('a')
  d3.select("#test3").selectAll('div')
    .data(arr)
    .join(
    enter => {
      const box = enter.append("div")
      .style('width', '150px')  
      .style('border', '1px solid')
      box.append('span')
      box.append('div')
	  update(box)
    }
  )
    .call(update)

  console.timeEnd('a')

  function update(box) {
    box.select('span').text(d => d.title)
    box.select('div').text(d => d.text)
  }
}

function compile2(arr){
  console.time('a')
  d3.select("#test3").html('').selectAll('div')
    .data(arr)
    .enter()
    .append('div')
    .style('width', '150px')  
    .style('border', '1px solid')
    .each(html)
  console.timeEnd('a')

  function html(d) {
    const box = d3.select(this)
    box.append('span').text(d.title)
    box.append('div').text(d.text)
  }
}

function compile1a(arr){
  console.time('a')
  const fragment = new DocumentFragment()

  arr.forEach(html)
  const wrap = document.getElementById('test3')
  wrap.innerHTML = ''
  wrap.appendChild(fragment)
  console.timeEnd('a')
  
  function html(d) {
    const box = document.createElement('div')
	box.style.width = '150px'
	box.style.border = '1px solid'
	const span = document.createElement('span')
	span.textContent = d.title
	const div = document.createElement('div')
	div.textContent = d.text
    box.appendChild(span)
	box.appendChild(div)
    fragment.append(box)
  }
}

function compile1(arr){
  console.time('a')
  const fragment = new DocumentFragment()

  arr.forEach(html)
  const wrap = d3.select("#test3").html('')
  wrap.node().append(fragment)
  console.timeEnd('a')
  function html(d) {
    const box = d3.create('div')
    .style('width', '150px')  
    .style('border', '1px solid')
    box.append('span').text(d.title)
    box.append('div').text(d.text)
    fragment.append(box.node())
  }
}

function compile(arr){
  console.time('a')
  const el = arr.map(html).join('')
  d3.select("#test3").html(el)
  console.timeEnd('a')

  function html(d) {
    const box = d3.create('div')
    .style('width', '150px')  
    .style('border', '1px solid')
    box.append('span').text(d.title)
    box.append('div').text(d.text)
    return box.node().outerHTML
  }
}
//https://observablehq.com/@d3/selection-join
function getArr() {
  const arr = []

  function addOne() {
    const rand = Math.round(Math.random()*100)
    const title = 'title'+rand
    const text = 'asljfla aslj a asllj sa lsj'
    arr.push({title, text})
  }
  const count = 100
  for (let i = 0; i < count; i++) addOne()
  return arr
}

Tests:

Fragment
const arr = getArr() compile1a(arr) const arr2 = getArr() compile1a(arr2)
Join
const arr = getArr() compile3(arr) const arr2 = getArr() compile3(arr2)
Frag + d3
const arr = getArr() compile1(arr) const arr2 = getArr() compile1(arr2)
Clear
const arr = getArr() compile2(arr) const arr2 = getArr() compile2(arr2)
Replace2
const arr = getArr() compile(arr) const arr2 = getArr() compile(arr2)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Fragment
Join
Frag + d3
Clear
Replace2

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

**Benchmark Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided JSON represents a benchmark definition, which consists of two main components: an HTML preparation code and individual test cases.

**Html Preparation Code**

The Html Preparation Code is the basic HTML structure for the benchmark:
```
<div id="test3"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.0.0/d3.min.js"></script>
```
This code sets up a `<div>` element with an ID of "test3" and includes a reference to the D3.js library.

**Individual Test Cases**

There are four individual test cases, each represented by a JSON object:
```javascript
[
  {
    "Benchmark Definition": "const arr = getArr()\r\ncompile1a(arr)\r\nconst arr2 = getArr()\r\ncompile1a(arr2)",
    "Test Name": "Fragment"
  },
  {
    "Benchmark Definition": "const arr = getArr()\r\ncompile3(arr)\r\nconst arr2 = getArr()\r\ncompile3(arr2)",
    "Test Name": "Join"
  },
  {
    "Benchmark Definition": "const arr = getArr()\r\ncompile1(arr)\r\nconst arr2 = getArr()\r\ncompile1(arr2)",
    "Test Name": "Frag + d3"
  },
  {
    "Benchmark Definition": "const arr = getArr()\r\ncompile2(arr)\r\nconst arr2 = getArr()\r\ncompile2(arr2)",
    "Test Name": "Clear"
  }
]
```
Each test case defines a specific scenario, where the `getArr()` function generates an array of objects, and then one of four benchmark functions (`compile1a`, `compile3`, `compile1`, or `compile2`) is called to generate the final result.

**Benchmark Functions**

The benchmark functions are defined in the Benchmark Definition object:
```
[
  {
    "Benchmark Definition": "const arr = getArr()\r\ncompile1a(arr)\r\nconst arr2 = getArr()\r\ncompile1a(arr2)",
    "Test Name": "Fragment"
  },
  // ...
]
```
The four benchmark functions are:

* `compile1a`: Creates a fragment by generating an array of objects and then appending them to the DOM using `append()` function.
* `compile3`: Performs a join operation between two arrays of objects using `join()` function.
* `compile1`: Appends the generated array of objects to the DOM without clearing the previous content.
* `compile2`: Clears the existing content in the DOM before appending the new array of objects.

**Latest Benchmark Results**

The latest benchmark results are:
```
[
  {
    "RawUAString": "Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36",
    "Browser": "Chrome 91",
    "DevicePlatform": "Desktop",
    "OperatingSystem": "Windows 7",
    "ExecutionsPerSecond": 1791.3890380859375,
    "TestName": "Join"
  },
  // ...
]
```
The results show the execution rate per second for each test case, along with the raw User Agent string and other metadata.

**Key Observations**

From the benchmark results, we can observe that:

* The `Fragment` test case has a higher execution rate than all other test cases.
* The `Join` test case performs better on desktop devices compared to other platforms.
* The `Clear` test case has a relatively low execution rate, suggesting that clearing the DOM might be expensive.
* The `Replace2` test case is the slowest among all four benchmark functions.

These observations can help developers optimize their code and identify areas for improvement in terms of performance and scalability.

Related benchmarks:

d3test (version: 0)

Checking d3 performance

Comparing performance of: Fragment vs Join vs Frag + d3 vs Clear vs Replace2

Created: 4 years ago by: Guest

Jump to the latest result

Fragment

Join

Frag + d3

Clear

Replace2

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):