⚡ [RUM-2633] Optimize DOM iteration in the recorder

[thomas-lebeau]

Motivation

It was suggesting that we could improve the performance of the child node iteration by using a more efficient method.

This benchmark suggest that using nextSibling is 5 times faster than using childNodes.forEach.

In reality the improvement is not so significant for our use case (see below), however the change is pretty small and safe so it's can't hurt to implement.

Changes

Refactor forEachChildNodes() to use nextSibling instead of childNodes.forEach.

Benchmark

I've ran some benchmarks locally to get numbers that matches better our use-case.

• ran the benchmark on https://app.datadoghq.com
• measure the time it takes to make a full session replay recording

results:

	childNodes.forEach	nextSibling
average time of a full snapshot	136.7 ms	131.8 ms
ops / sec	7.4	7.6

We observe a ~4% improvement which is not very significant and suggests that the bottleneck is somewhere else.

test script

const warmupStart = performance.now()

while (performance.now() - warmupStart < 2000) {
  DD_RUM.stopSessionReplayRecording()
  DD_RUM.startSessionReplayRecording()
}

const testStart = performance.now()
const measures = []

while (performance.now() - testStart < 5000) {
  const measureStart = performance.now()

  DD_RUM.stopSessionReplayRecording()
  DD_RUM.startSessionReplayRecording()

  measures.push(performance.now() - measureStart)
}

Testing

• Local
• Staging
• Unit
• End to end

---

I have gone over the contributing documentation.

[thomas-lebeau]

/to-staging

[dd-devflow]

🚂 Branch Integration: starting soon, merge in < 10m

Commit a0b82dae80 will soon be integrated into staging-12.

This build is going to start soon! (estimated merge in less than 10m)

Use /to-staging -c to cancel this operation!

[dd-devflow]

🚂 Branch Integration: This commit was successfully integrated

Commit a0b82dae80 has been merged into staging-12 in merge commit ea927b4819.

Check out the triggered pipeline on Gitlab 🦊