IWMBrowser/iwmlib
4
0
Fork 0
Code Issues 6 Pull Requests Releases Wiki Activity

Implemented InteractionMapper.off

Browse Source
This commit is contained in:
Sebastian Kupke
2019-08-13 12:46:24 +02:00
parent e7bda6af17
commit 6e9ec938fc
85 changed files with 709 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files
test/chart/data.js
+15 -15
View File
File diff suppressed because one or more lines are too long
test/temp/hammerjs-destroy_1565687610453.pdf
BIN
View File
Binary file not shown.
test/temp/hammerjs_1565688090521.pdf
BIN
View File
Binary file not shown.
test/temp/index_1565686526288.pdf
BIN
View File
Binary file not shown.
test/temp/interactionmapper-off_1565692638608.pdf
BIN
View File
Binary file not shown.
test/temp/interactionmapper_1565690280386.pdf
BIN
View File
Binary file not shown.
test/temp/remove_1565686607690.pdf
BIN
View File
Binary file not shown.
test/tests/eventlistener/hammerjs-destroy.js
+8 -17
View File
@@ -5,11 +5,11 @@ const fse = require('fs-extra')
const _ = require('lodash')
const CYCLES = 5000
const TIMEOUT = 250
const ID = 'hammerjs-destroy'
;(async () => {
const browser = await puppeteer.launch({
headless: false,
headless: true,
args: ['--disable-web-security'],
defaultViewport: {
width: 1920,
@@ -17,25 +17,20 @@ const TIMEOUT = 250
hasTouch: true
}
})
const page = await browser.newPage()
await page.goto(`file://${__dirname}/hammerjs-destroy.html`)
console.log('App loaded')
const page = (await browser.pages())[0]
await page.goto(`file://${__dirname}/${ID}.html`)
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++) {
for (let j = 0; j < 5; j++) {
await page.tap('#contentRandom') // button in card
}
await sleep(100)
await page.tap('#delete') // button 2
}
@@ -43,19 +38,15 @@ const TIMEOUT = 250
await page.setViewport({
width: 1920,
height: 1280,
deviceScaleFactor: 1
height: 1280
})
await page.goto(`file://${__dirname}/../../chart/index.html`)
await page.pdf({ path: `${__dirname}/../../temp/${ID}_${Date.now()}.pdf`, scale: 0.5, landscape: true })
//await browser.close()
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))
test/tests/eventlistener/hammerjs.js
+8 -17
View File
@@ -5,11 +5,11 @@ const fse = require('fs-extra')
const _ = require('lodash')
const CYCLES = 5000
const TIMEOUT = 250
const ID = 'hammerjs'
;(async () => {
const browser = await puppeteer.launch({
headless: false,
headless: true,
args: ['--disable-web-security'],
defaultViewport: {
width: 1920,
@@ -17,25 +17,20 @@ const TIMEOUT = 250
hasTouch: true
}
})
const page = await browser.newPage()
await page.goto(`file://${__dirname}/hammerjs.html`)
console.log('App loaded')
const page = (await browser.pages())[0]
await page.goto(`file://${__dirname}/${ID}.html`)
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++) {
for (let j = 0; j < 5; j++) {
await page.tap('#contentRandom') // button in card
}
await sleep(100)
await page.tap('#delete') // button 2
}
@@ -43,19 +38,15 @@ const TIMEOUT = 250
await page.setViewport({
width: 1920,
height: 1280,
deviceScaleFactor: 1
height: 1280
})
await page.goto(`file://${__dirname}/../../chart/index.html`)
await page.pdf({ path: `${__dirname}/../../temp/${ID}_${Date.now()}.pdf`, scale: 0.5, landscape: true })
//await browser.close()
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))
test/tests/eventlistener/index.js
+8 -17
View File
@@ -5,11 +5,11 @@ const fse = require('fs-extra')
const _ = require('lodash')
const CYCLES = 5000
const TIMEOUT = 250
const ID = 'index'
;(async () => {
const browser = await puppeteer.launch({
headless: false,
headless: true,
args: ['--disable-web-security'],
defaultViewport: {
width: 1920,
@@ -17,25 +17,20 @@ const TIMEOUT = 250
hasTouch: false
}
})
const page = await browser.newPage()
await page.goto(`file://${__dirname}/index.html`)
console.log('App loaded')
const page = (await browser.pages())[0]
await page.goto(`file://${__dirname}/${ID}.html`)
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++) {
for (let j = 0; j < 5; j++) {
await page.click('#contentRandom') // button in card
}
await sleep(100)
await page.click('#delete') // button 2
}
@@ -43,19 +38,15 @@ const TIMEOUT = 250
await page.setViewport({
width: 1920,
height: 1280,
deviceScaleFactor: 1
height: 1280
})
await page.goto(`file://${__dirname}/../../chart/index.html`)
await page.pdf({ path: `${__dirname}/../../temp/${ID}_${Date.now()}.pdf`, scale: 0.5, landscape: true })
//await browser.close()
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))
test/tests/eventlistener/interactionmapper-off.html
+93
View File
@@ -0,0 +1,93 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Test EventListener</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" />
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chance/1.0.18/chance.min.js"></script>
<script src="../../../dist/iwmlib.3rdparty.min.js"></script>
<script src="../../../dist/iwmlib.js"></script>
</head>
<body>
<section class="section">
<div class="container">
<h1 class="title">
Memory Test EventListener with InteractionMapper and removal (off)
</h1>
<p class="subtitle">Test EventListener in <strong>dynamic content</strong>!</p>
</div>
</section>
<section class="section">
<div class="container">
<div class="columns">
<div class="column">
<div class="buttons">
<a class="button is-info is-fullwidth" id="add">Add HTML content</a>
<a class="button is-danger is-fullwidth" id="delete">Delete new content</a>
</div>
</div>
<div class="column" id="content"></div>
</div>
</div>
</section>
<script>
const html = `
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="./images/1280x960.png" alt="Placeholder image">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img src="./images/96x96.png" alt="Placeholder image">
</figure>
</div>
<div class="media-content">
<p class="title is-4">John Smith</p>
<p class="subtitle is-6">@johnsmith</p>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus nec iaculis mauris.
</div>
</div>
<footer class="card-footer">
<a href="#" class="card-footer-item" id="contentRandom">Random</a>
<a href="#" class="card-footer-item" id="contentDelete">Delete</a>
</footer>
</div>
`
InteractionMapper.on('tap', document.querySelector('#add'), function() {
document.querySelector('#content').innerHTML = html
InteractionMapper.on('tap', document.querySelector('#contentRandom'), function() {
document.querySelector('.media-content .title').innerHTML = chance.name()
document.querySelector('.media-content .subtitle').innerHTML = chance.email()
document.querySelector('.card-content .content').innerHTML = chance.sentence({ words: 3 })
})
InteractionMapper.on('tap', document.querySelector('#contentDelete'), function() {
InteractionMapper.off(document.querySelector('#contentRandom'))
InteractionMapper.off(document.querySelector('#contentDelete'))
document.querySelector('#content').innerHTML = ''
})
})
InteractionMapper.on('tap', document.querySelector('#delete'), function() {
InteractionMapper.off(document.querySelector('#contentRandom'))
InteractionMapper.off(document.querySelector('#contentDelete'))
document.querySelector('#content').innerHTML = ''
})
</script>
</body>
</html>
test/tests/eventlistener/interactionmapper-off.js
+146
View File
@@ -0,0 +1,146 @@
/* eslint no-console: ["error", { allow: ["log", "warn", "error"] }] */
const puppeteer = require('puppeteer')
const fse = require('fs-extra')
const _ = require('lodash')
const CYCLES = 5000
const ID = 'interactionmapper-off'
;(async () => {
const browser = await puppeteer.launch({
headless: true,
args: ['--disable-web-security'],
defaultViewport: {
width: 1920,
height: 1280,
hasTouch: true
}
})
const page = (await browser.pages())[0]
await page.goto(`file://${__dirname}/${ID}.html`)
const metrics = []
for (let i = 0; i < CYCLES; i++) {
console.log(`Cycle ${i + 1} of ${CYCLES}`)
metrics.push(await page.metrics())
await page.tap('#add') // button 1
for (let j = 0; j < 5; j++) {
await page.tap('#contentRandom') // button in card
}
await page.tap('#delete') // button 2
}
await writeMetrics(metrics)
await page.setViewport({
width: 1920,
height: 1280
})
await page.goto(`file://${__dirname}/../../chart/index.html`)
await page.pdf({ path: `${__dirname}/../../temp/${ID}_${Date.now()}.pdf`, scale: 0.5, landscape: true })
await browser.close()
})()
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(', ')}]
}]
}]
`
)
}
test/tests/eventlistener/interactionmapper.html
+89
View File
@@ -0,0 +1,89 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Test EventListener</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css" />
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chance/1.0.18/chance.min.js"></script>
<script src="../../../dist/iwmlib.3rdparty.min.js"></script>
<script src="../../../dist/iwmlib.js"></script>
</head>
<body>
<section class="section">
<div class="container">
<h1 class="title">
Memory Test EventListener with InteractionMapper
</h1>
<p class="subtitle">Test EventListener in <strong>dynamic content</strong>!</p>
</div>
</section>
<section class="section">
<div class="container">
<div class="columns">
<div class="column">
<div class="buttons">
<a class="button is-info is-fullwidth" id="add">Add HTML content</a>
<a class="button is-danger is-fullwidth" id="delete">Delete new content</a>
</div>
</div>
<div class="column" id="content"></div>
</div>
</div>
</section>
<script>
const html = `
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src="./images/1280x960.png" alt="Placeholder image">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img src="./images/96x96.png" alt="Placeholder image">
</figure>
</div>
<div class="media-content">
<p class="title is-4">John Smith</p>
<p class="subtitle is-6">@johnsmith</p>
</div>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Phasellus nec iaculis mauris.
</div>
</div>
<footer class="card-footer">
<a href="#" class="card-footer-item" id="contentRandom">Random</a>
<a href="#" class="card-footer-item" id="contentDelete">Delete</a>
</footer>
</div>
`
InteractionMapper.on('tap', document.querySelector('#add'), function() {
document.querySelector('#content').innerHTML = html
InteractionMapper.on('tap', document.querySelector('#contentRandom'), function() {
document.querySelector('.media-content .title').innerHTML = chance.name()
document.querySelector('.media-content .subtitle').innerHTML = chance.email()
document.querySelector('.card-content .content').innerHTML = chance.sentence({ words: 3 })
})
InteractionMapper.on('tap', document.querySelector('#contentDelete'), function() {
document.querySelector('#content').innerHTML = ''
})
})
InteractionMapper.on('tap', document.querySelector('#delete'), function() {
document.querySelector('#content').innerHTML = ''
})
</script>
</body>
</html>
test/tests/eventlistener/interactionmapper.js
+146
View File
@@ -0,0 +1,146 @@
/* eslint no-console: ["error", { allow: ["log", "warn", "error"] }] */
const puppeteer = require('puppeteer')
const fse = require('fs-extra')
const _ = require('lodash')
const CYCLES = 5000
const ID = 'interactionmapper'
;(async () => {
const browser = await puppeteer.launch({
headless: true,
args: ['--disable-web-security'],
defaultViewport: {
width: 1920,
height: 1280,
hasTouch: true
}
})
const page = (await browser.pages())[0]
await page.goto(`file://${__dirname}/${ID}.html`)
const metrics = []
for (let i = 0; i < CYCLES; i++) {
console.log(`Cycle ${i + 1} of ${CYCLES}`)
metrics.push(await page.metrics())
await page.tap('#add') // button 1
for (let j = 0; j < 5; j++) {
await page.tap('#contentRandom') // button in card
}
await page.tap('#delete') // button 2
}
await writeMetrics(metrics)
await page.setViewport({
width: 1920,
height: 1280
})
await page.goto(`file://${__dirname}/../../chart/index.html`)
await page.pdf({ path: `${__dirname}/../../temp/${ID}_${Date.now()}.pdf`, scale: 0.5, landscape: true })
await browser.close()
})()
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(', ')}]
}]
}]
`
)
}
test/tests/eventlistener/remove.js
+8 -17
View File
@@ -5,11 +5,11 @@ const fse = require('fs-extra')
const _ = require('lodash')
const CYCLES = 5000
const TIMEOUT = 250
const ID = 'remove'
;(async () => {
const browser = await puppeteer.launch({
headless: false,
headless: true,
args: ['--disable-web-security'],
defaultViewport: {
width: 1920,
@@ -17,25 +17,20 @@ const TIMEOUT = 250
hasTouch: false
}
})
const page = await browser.newPage()
await page.goto(`file://${__dirname}/remove.html`)
console.log('App loaded')
const page = (await browser.pages())[0]
await page.goto(`file://${__dirname}/${ID}.html`)
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++) {
for (let j = 0; j < 5; j++) {
await page.click('#contentRandom') // button in card
}
await sleep(100)
await page.click('#delete') // button 2
}
@@ -43,19 +38,15 @@ const TIMEOUT = 250
await page.setViewport({
width: 1920,
height: 1280,
deviceScaleFactor: 1
height: 1280
})
await page.goto(`file://${__dirname}/../../chart/index.html`)
await page.pdf({ path: `${__dirname}/../../temp/${ID}_${Date.now()}.pdf`, scale: 0.5, landscape: true })
//await browser.close()
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))