147 lines
5.2 KiB
JavaScript
147 lines
5.2 KiB
JavaScript
/* 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 = 'hammerjs-destroy'
|
|
|
|
;(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(', ')}]
|
|
}]
|
|
}]
|
|
`
|
|
)
|
|
}
|