+ 
+ 
diff --git a/test/tests/eventlistener/index.js b/test/tests/eventlistener/index.js
index e202b9a..69c02df 100644
--- a/test/tests/eventlistener/index.js
+++ b/test/tests/eventlistener/index.js
@@ -4,7 +4,7 @@ const puppeteer = require('puppeteer')
const fse = require('fs-extra')
const _ = require('lodash')
-const CYCLES = 50
+const CYCLES = 5000
const TIMEOUT = 250
;(async () => {
diff --git a/test/tests/eventlistener/remove.html b/test/tests/eventlistener/remove.html
new file mode 100644
index 0000000..c3884f0
--- /dev/null
+++ b/test/tests/eventlistener/remove.html
@@ -0,0 +1,91 @@
+
+
+
+
+
+ Test EventListener
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/test/tests/eventlistener/remove.js b/test/tests/eventlistener/remove.js
new file mode 100644
index 0000000..77e2d9c
--- /dev/null
+++ b/test/tests/eventlistener/remove.js
@@ -0,0 +1,155 @@
+/* eslint no-console: ["error", { allow: ["log", "warn", "error"] }] */
+
+const puppeteer = require('puppeteer')
+const fse = require('fs-extra')
+const _ = require('lodash')
+
+const CYCLES = 5000
+const TIMEOUT = 250
+
+;(async () => {
+ const browser = await puppeteer.launch({
+ headless: false,
+ args: ['--disable-web-security'],
+ defaultViewport: {
+ width: 1920,
+ height: 1280,
+ hasTouch: false
+ }
+ })
+ const page = await browser.newPage()
+ await page.goto(`file://${__dirname}/remove.html`)
+
+ console.log('App loaded')
+
+ const metrics = []
+
+ for (let i = 0; i < CYCLES; i++) {
+ console.log(`Cycle ${i + 1} of ${CYCLES}`)
+
+ await sleep(TIMEOUT)
+ metrics.push(await page.metrics())
+
+ await page.click('#add') // button 1
+ await sleep(100)
+ for (let j = 0; j < 10; j++) {
+ await page.click('#contentRandom') // button in card
+ }
+ await sleep(100)
+ await page.click('#delete') // button 2
+ }
+
+ await writeMetrics(metrics)
+
+ await page.setViewport({
+ width: 1920,
+ height: 1280,
+ deviceScaleFactor: 1
+ })
+
+ await page.goto(`file://${__dirname}/../../chart/index.html`)
+
+ //await browser.close()
+})()
+
+function sleep(milliseconds) {
+ return new Promise(resolve => setTimeout(resolve, milliseconds))
+}
+
+async function writeMetrics(metrics) {
+ const first = metrics[0].Timestamp
+ const timestamp = metrics.map(it => _.round(it.Timestamp - first, 1))
+ const documents = metrics.map(it => it.Documents)
+ const frames = metrics.map(it => it.Frames)
+ const jsEventListeners = metrics.map(it => it.JSEventListeners)
+ const nodes = metrics.map(it => it.Nodes)
+ const layoutCount = metrics.map(it => it.LayoutCount)
+ const recalcStyleCount = metrics.map(it => it.RecalcStyleCount)
+ const layoutDuration = metrics.map(it => it.LayoutDuration)
+ const recalcStyleDuration = metrics.map(it => it.RecalcStyleDuration)
+ const scriptDuration = metrics.map(it => it.ScriptDuration)
+ const taskDuration = metrics.map(it => it.TaskDuration)
+ const jsHeapUsedSize = metrics.map(it => it.JSHeapUsedSize / 1024 / 1024)
+ const jsHeapTotalSize = metrics.map(it => it.JSHeapTotalSize / 1024 / 1024)
+
+ const labels = `[${timestamp.join(', ')}]`
+
+ await fse.outputFile(
+ `${__dirname}/../../chart/data.js`,
+ `
+ var data = [{
+ labels: ${labels},
+ datasets: [{
+ label: 'Documents',
+ backgroundColor: 'rgba(205, 37, 44, 0.2)',
+ borderColor: 'rgba(205, 37, 44, 1.00)',
+ data: [${documents.join(', ')}]
+ }, {
+ label: 'Frames',
+ backgroundColor: 'rgba(239, 116, 55, 0.2)',
+ borderColor: 'rgba(239, 116, 55, 1.00)',
+ data: [${frames.join(', ')}]
+ }]
+ }, {
+ labels: ${labels},
+ datasets: [{
+ label: 'JSEventListeners',
+ backgroundColor: 'rgba(248, 189, 64, 0.2)',
+ borderColor: 'rgba(248, 189, 64, 1.00)',
+ data: [${jsEventListeners.join(', ')}]
+ }, {
+ label: 'Nodes',
+ backgroundColor: 'rgba(181, 202, 62, 0.2)',
+ borderColor: 'rgba(181, 202, 62, 1.00)',
+ data: [${nodes.join(', ')}]
+ }, {
+ label: 'LayoutCount',
+ backgroundColor: 'rgba(50, 184, 79, 0.2)',
+ borderColor: 'rgba(50, 184, 79, 1.00)',
+ data: [${layoutCount.join(', ')}]
+ }, {
+ label: 'RecalcStyleCount',
+ backgroundColor: 'rgba(37, 180, 171, 0.2)',
+ borderColor: 'rgba(37, 180, 171, 1.00)',
+ data: [${recalcStyleCount.join(', ')}]
+ }]
+ }, {
+ labels: ${labels},
+ datasets: [{
+ label: 'LayoutDuration',
+ backgroundColor: 'rgba(45, 134, 203, 0.2)',
+ borderColor: 'rgba(45, 134, 203, 1.00)',
+ data: [${layoutDuration.join(', ')}]
+ }, {
+ label: 'RecalcStyleDuration',
+ backgroundColor: 'rgba(100, 58, 195, 0.2)',
+ borderColor: 'rgba(100, 58, 195, 1.00)',
+ data: [${recalcStyleDuration.join(', ')}]
+ }, {
+ label: 'ScriptDuration',
+ backgroundColor: 'rgba(161, 59, 195, 0.2)',
+ borderColor: 'rgba(161, 59, 195, 1.00)',
+ data: [${scriptDuration.join(', ')}]
+ }, {
+ label: 'TaksDuration',
+ backgroundColor: 'rgba(221, 65, 150, 0.2)',
+ borderColor: 'rgba(221, 65, 150, 1.00)',
+ data: [${taskDuration.join(', ')}]
+ }]
+ }, {
+ labels: ${labels},
+ datasets: [{
+ label: 'JSHeapUsedSize',
+ backgroundColor: 'rgba(163, 104, 70, 0.2)',
+ borderColor: 'rgba(163, 104, 70, 1.00)',
+ data: [${jsHeapUsedSize.join(', ')}]
+ }, {
+ label: 'JSHeapTotalSize',
+ backgroundColor: 'rgba(118, 118, 118, 0.2)',
+ borderColor: 'rgba(118, 118, 118, 1.00)',
+ data: [${jsHeapTotalSize.join(', ')}]
+ }]
+ }]
+ `
+ )
+}
+
+ + Memory Test EventListener with removal +
+Test EventListener in dynamic content!
+
+
+
+
+
+
+
+
+