diff --git a/package.json b/package.json index 60c98f0..f84acfa 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "test-eventlistener": "node ./test/tests/eventlistener/index.js", "test-eventlistener-remove": "node ./test/tests/eventlistener/remove.js", "test-eventlistener-hammerjs": "node ./test/tests/eventlistener/hammerjs.js", + "test-eventlistener-hammerjs-destroy": "node ./test/tests/eventlistener/hammerjs-destroy.js", "build": "rollup --config ./rollup.config.js", "watch": "rollup --watch --config ./rollup.config.js", "3rdparty": "gulp", diff --git a/test/tests/eventlistener/hammerjs-destroy.html b/test/tests/eventlistener/hammerjs-destroy.html new file mode 100644 index 0000000..cc6e677 --- /dev/null +++ b/test/tests/eventlistener/hammerjs-destroy.html @@ -0,0 +1,99 @@ + + + + + + Test EventListener + + + + + + +
+
+

+ Memory Test EventListener with HammerJS and destroy +

+

Test EventListener in dynamic content!

+
+
+ +
+
+
+
+
+ Add HTML content + Delete new content +
+
+
+
+
+
+ + + + diff --git a/test/tests/eventlistener/hammerjs-destroy.js b/test/tests/eventlistener/hammerjs-destroy.js new file mode 100644 index 0000000..f297e4b --- /dev/null +++ b/test/tests/eventlistener/hammerjs-destroy.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: true + } + }) + const page = await browser.newPage() + await page.goto(`file://${__dirname}/hammerjs-destroy.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.tap('#add') // button 1 + await sleep(100) + for (let j = 0; j < 10; j++) { + await page.tap('#contentRandom') // button in card + } + await sleep(100) + await page.tap('#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(', ')}] + }] + }] + ` + ) +}