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

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36

Browser/OS: Chrome 91 on Windows 7

View result in a separate tab

Test name	Executions per second
Fragment	430.2 Ops/sec
Join	1791.4 Ops/sec
Frag + d3	382.4 Ops/sec
Clear	431.9 Ops/sec
Replace2	203.0 Ops/sec

d3test (version: 0)

Checking d3 performance

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

Created: 2 years ago by: Guest

Jump to the latest result

Fragment

Join

Frag + d3

Clear

Replace2

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A