Chrome DevTools Heap Snapshot Loading Benchmark

chrome-devtools-heapsnapshot-Loading-benchmark.md

Chrome DevTools Heap Snapshot Loading Benchmark

Benchmark of the Chrome DevTools to determine if it can load large Heap Snapshots. Specs of the environment used are available at Environment Specs.

Results

Time to Load is an approximate value, as there's no way (that I'm aware of) to measure the loading time of a heap snapshot in Chrome DevTools.

Size	File	Time to Load
100.0.heapsnapshot	3,1M	< 1s
100.1.heapsnapshot	3,4M	< 1s
100.5.heapsnapshot	5,0M	1s
100.10.heapsnapshot	6,9M	1s
100.25.heapsnapshot	13M	1s
100.50.heapsnapshot	23M	2s
100.100.heapsnapshot	43M	2s
500.0.heapsnapshot	13M	1s
500.1.heapsnapshot	23M	1s
500.5.heapsnapshot	61M	3s
500.10.heapsnapshot	109M	5s
500.25.heapsnapshot	258M	12s
500.50.heapsnapshot	508M	22s
500.100.heapsnapshot	1006M	49s
1000.0.heapsnapshot	43M	2s
1000.1.heapsnapshot	83M	4s
1000.5.heapsnapshot	240M	10s
1000.10.heapsnapshot	441M	20s
5000.0.heapsnapshot	1010M	44s
5000.1.heapsnapshot	2,1G	1m30s

Environment Specs

$ lsb_release -a
No LSB modules are available.
Distributor ID:	Ubuntu
Description:	Ubuntu 16.04.3 LTS
Release:	16.04
Codename:	xenial

$ uname -a
Linux berlin 4.4.0-104-generic #127-Ubuntu SMP Mon Dec 11 12:16:42 UTC 2017 x86_64 x86_64 x86_64 GNU/Linux

$ lscpu
Architecture:          x86_64
CPU op-mode(s):        32-bit, 64-bit
Byte Order:            Little Endian
CPU(s):                4
On-line CPU(s) list:   0-3
Thread(s) per core:    2
Core(s) per socket:    2
Socket(s):             1
NUMA node(s):          1
Vendor ID:             GenuineIntel
CPU family:            6
Model:                 58
Model name:            Intel(R) Core(TM) i5-3210M CPU @ 2.50GHz
Stepping:              9
CPU MHz:               1279.980
CPU max MHz:           3100,0000
CPU min MHz:           1200,0000
BogoMIPS:              4988.80
Virtualization:        VT-x
L1d cache:             32K
L1i cache:             32K
L2 cache:              256K
L3 cache:              3072K
NUMA node0 CPU(s):     0-3
Flags:                 fpu vme de pse tsc msr pae mce cx8 apic sep mtrr pge mca cmov pat pse36 clflush dts acpi mmx fxsr sse sse2 ss ht tm pbe syscall nx rdtscp lm constant_tsc arch_perfmon pebs bts rep_good nopl xtopology nonstop_tsc aperfmperf eagerfpu pni pclmulqdq dtes64 monitor ds_cpl vmx est tm2 ssse3 cx16 xtpr pdcm pcid sse4_1 sse4_2 x2apic popcnt tsc_deadline_timer aes xsave avx f16c rdrand lahf_lm epb tpr_shadow vnmi flexpriority ept vpid fsgsbase smep erms xsaveopt dtherm ida arat pln pts

$ free
              total        used        free      shared  buff/cache   available
Mem:        8074920     6745668      178716      513388     1150536      471048
Swap:       8286204     1981664     6304540

Chromium           63.0.3239.84 (Official Build) Built on Ubuntu , running on Ubuntu 16.04 (64-bit)
Revision           0f53a5abc7a405fbe9f1cfd3db38f2092c8a7816-
OS                 Linux
JavaScript         V8 6.3.292.46
Flash              (Disabled)
User Agent         Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/63.0.3239.84 Chrome/63.0.3239.84 Safari/537.36
Command Line       /usr/lib/chromium-browser/chromium-browser --enable-pinch --remote-debugging-port=9222 --flag-switches-begin --flag-switches-end
Executable Path    /usr/lib/chromium-browser/chromium-browser
Profile Path       /home/matheus/.config/chromium/Default

$ node -e "console.log(process.versions)"
{ http_parser: '2.7.0',
  node: '8.9.4',
  v8: '6.1.534.50',
  uv: '1.15.0',
  zlib: '1.2.11',
  ares: '1.10.1-DEV',
  modules: '57',
  nghttp2: '1.25.0',
  openssl: '1.0.2n',
  icu: '59.1',
  unicode: '9.0',
  cldr: '31.0.1',
  tz: '2017b' }

Script

The script below is used to generate all heap snapshots used. Multiple snapshots are created, each one with a different number of Lala objects created and with different depth for Bar recursive objects creation. The main goal is to generate a lot of objects in the heap with a variable number of heap depths.

const heapdump = require('heapdump');
const fs = require("fs");

class Foo {

}

class Bar {
  constructor(number, depth) {
    this.anotherString = "just another string";
    for(i=0; i < number; i++) {
      this[i] = number;
      this[number + i] = new Foo();
    }
    if(depth > 0) {
      this.child = new Bar(number, depth - 1);
    }
  }
}

class Lala {
  constructor(number, depth) {
    this.simpleString = "simple string";
    this.complexString = `complex string number #${number}`;
    this.bar = new Bar(number, depth);
  }
}

function generateLotsOfStuff(number, depth) {
  let arrayOfObjects = [];
  console.log("------------------------------------------------");
  console.log(`Generating ${number} objects...`);
  for(i=0; i < number; i++) {
    arrayOfObjects.push(new Lala(i, depth));
  }
  console.log("Generating snapshot...");
  const heapFileName = `./${number}.${depth}.heapsnapshot`;
  heapdump.writeSnapshot(heapFileName);

  const stats = fs.statSync(heapFileName);
  const fileSize = stats.size / (1024 * 1024);
  console.log(`Snapshot generated! Size: ${fileSize.toFixed()}Mb`);
}

// 100 iterations
generateLotsOfStuff(100, 0);
generateLotsOfStuff(100, 1);
generateLotsOfStuff(100, 5);
generateLotsOfStuff(100, 10);
generateLotsOfStuff(100, 25);
generateLotsOfStuff(100, 50);
generateLotsOfStuff(100, 100);

// 500 iterations
generateLotsOfStuff(500, 0);
generateLotsOfStuff(500, 1);
generateLotsOfStuff(500, 5);
generateLotsOfStuff(500, 10);
generateLotsOfStuff(500, 25);
generateLotsOfStuff(500, 50);
generateLotsOfStuff(500, 100);

// 1000 iterations
generateLotsOfStuff(1000, 0);
generateLotsOfStuff(1000, 1);
generateLotsOfStuff(1000, 5);
generateLotsOfStuff(1000, 10);

// 5000 iterations
generateLotsOfStuff(5000, 0);
generateLotsOfStuff(5000, 1);

Some heap snapshots are very huge. We need to increase the memory accepted by Node to be able to create all snapshots:

$ node --max-old-space-size=4096 index.js