Added EventListener test.
This commit is contained in:
parent
53654349b5
commit
74b5d69389
@ -8,6 +8,7 @@
|
|||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "node bin/testrunner.js",
|
"test": "node bin/testrunner.js",
|
||||||
|
"test-eventlistener": "node ./test/tests/eventlistener/index.js",
|
||||||
"build": "rollup --config ./rollup.config.js",
|
"build": "rollup --config ./rollup.config.js",
|
||||||
"watch": "rollup --watch --config ./rollup.config.js",
|
"watch": "rollup --watch --config ./rollup.config.js",
|
||||||
"3rdparty": "gulp",
|
"3rdparty": "gulp",
|
||||||
|
|||||||
7
test/chart/Chart.min.js
vendored
Normal file
7
test/chart/Chart.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
75
test/chart/data.js
Normal file
75
test/chart/data.js
Normal file
@ -0,0 +1,75 @@
|
|||||||
|
|
||||||
|
var data = [{
|
||||||
|
labels: [0, 0.7, 1.3, 1.9, 2.6, 3.5, 4.2, 4.9, 5.5, 6.2, 6.8, 7.4, 8.1, 8.7, 9.3, 10, 10.6, 11.2, 11.9, 12.5, 13.1, 13.8, 14.4, 15, 15.7, 16.3, 16.9, 17.6, 18.2, 18.8, 19.5, 20.1, 20.7, 21.4, 22, 22.6, 23.3, 23.9, 24.6, 25.2, 25.8, 26.5, 27.1, 27.7, 28.4, 29, 29.6, 30.3, 30.9, 31.5],
|
||||||
|
datasets: [{
|
||||||
|
label: 'Documents',
|
||||||
|
backgroundColor: 'rgba(205, 37, 44, 0.2)',
|
||||||
|
borderColor: 'rgba(205, 37, 44, 1.00)',
|
||||||
|
data: [3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
|
||||||
|
}, {
|
||||||
|
label: 'Frames',
|
||||||
|
backgroundColor: 'rgba(239, 116, 55, 0.2)',
|
||||||
|
borderColor: 'rgba(239, 116, 55, 1.00)',
|
||||||
|
data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
labels: [0, 0.7, 1.3, 1.9, 2.6, 3.5, 4.2, 4.9, 5.5, 6.2, 6.8, 7.4, 8.1, 8.7, 9.3, 10, 10.6, 11.2, 11.9, 12.5, 13.1, 13.8, 14.4, 15, 15.7, 16.3, 16.9, 17.6, 18.2, 18.8, 19.5, 20.1, 20.7, 21.4, 22, 22.6, 23.3, 23.9, 24.6, 25.2, 25.8, 26.5, 27.1, 27.7, 28.4, 29, 29.6, 30.3, 30.9, 31.5],
|
||||||
|
datasets: [{
|
||||||
|
label: 'JSEventListeners',
|
||||||
|
backgroundColor: 'rgba(248, 189, 64, 0.2)',
|
||||||
|
borderColor: 'rgba(248, 189, 64, 1.00)',
|
||||||
|
data: [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 4, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 52, 54, 56, 58, 60, 62, 64, 66, 68, 70, 72, 74, 76]
|
||||||
|
}, {
|
||||||
|
label: 'Nodes',
|
||||||
|
backgroundColor: 'rgba(181, 202, 62, 0.2)',
|
||||||
|
borderColor: 'rgba(181, 202, 62, 1.00)',
|
||||||
|
data: [75, 183, 291, 399, 507, 615, 723, 831, 939, 1047, 1155, 1263, 111, 111, 219, 327, 435, 543, 651, 759, 867, 975, 1083, 1191, 1299, 1407, 1515, 1623, 1731, 1839, 1947, 2055, 2163, 2271, 2379, 2487, 2595, 2703, 2811, 2919, 3027, 3135, 3243, 3351, 3459, 3567, 3675, 3783, 3891, 3999]
|
||||||
|
}, {
|
||||||
|
label: 'LayoutCount',
|
||||||
|
backgroundColor: 'rgba(50, 184, 79, 0.2)',
|
||||||
|
borderColor: 'rgba(50, 184, 79, 1.00)',
|
||||||
|
data: [3, 18, 31, 44, 57, 70, 83, 96, 109, 122, 135, 148, 161, 174, 187, 200, 213, 226, 239, 252, 265, 278, 291, 304, 317, 330, 343, 356, 369, 382, 395, 408, 421, 434, 447, 460, 473, 486, 499, 512, 525, 538, 551, 564, 577, 590, 603, 616, 629, 642]
|
||||||
|
}, {
|
||||||
|
label: 'RecalcStyleCount',
|
||||||
|
backgroundColor: 'rgba(37, 180, 171, 0.2)',
|
||||||
|
borderColor: 'rgba(37, 180, 171, 1.00)',
|
||||||
|
data: [2, 31, 60, 89, 119, 148, 179, 228, 257, 286, 315, 344, 373, 402, 431, 460, 489, 518, 547, 576, 605, 634, 663, 692, 721, 750, 779, 808, 837, 866, 895, 924, 953, 982, 1011, 1040, 1069, 1098, 1127, 1156, 1185, 1214, 1243, 1272, 1301, 1330, 1359, 1388, 1417, 1446]
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
labels: [0, 0.7, 1.3, 1.9, 2.6, 3.5, 4.2, 4.9, 5.5, 6.2, 6.8, 7.4, 8.1, 8.7, 9.3, 10, 10.6, 11.2, 11.9, 12.5, 13.1, 13.8, 14.4, 15, 15.7, 16.3, 16.9, 17.6, 18.2, 18.8, 19.5, 20.1, 20.7, 21.4, 22, 22.6, 23.3, 23.9, 24.6, 25.2, 25.8, 26.5, 27.1, 27.7, 28.4, 29, 29.6, 30.3, 30.9, 31.5],
|
||||||
|
datasets: [{
|
||||||
|
label: 'LayoutDuration',
|
||||||
|
backgroundColor: 'rgba(45, 134, 203, 0.2)',
|
||||||
|
borderColor: 'rgba(45, 134, 203, 1.00)',
|
||||||
|
data: [0.034717, 0.045234, 0.052591, 0.060077, 0.067149, 0.071509, 0.076464, 0.083082, 0.090573, 0.100478, 0.110227, 0.118513, 0.127812, 0.135397, 0.143446, 0.152105, 0.158883, 0.165507, 0.17236, 0.179002, 0.186141, 0.192941, 0.200185, 0.207068, 0.215006, 0.224683, 0.233793, 0.242402, 0.253824, 0.263647, 0.274202, 0.280719, 0.287725, 0.294708, 0.301861, 0.308844, 0.316033, 0.32277, 0.329336, 0.337564, 0.345527, 0.353553, 0.362964, 0.372258, 0.382831, 0.392567, 0.401285, 0.408552, 0.415288, 0.422008]
|
||||||
|
}, {
|
||||||
|
label: 'RecalcStyleDuration',
|
||||||
|
backgroundColor: 'rgba(100, 58, 195, 0.2)',
|
||||||
|
borderColor: 'rgba(100, 58, 195, 1.00)',
|
||||||
|
data: [0.002738, 0.006824, 0.010537, 0.014037, 0.018236, 0.020886, 0.024098, 0.029695, 0.033175, 0.037279, 0.041541, 0.045205, 0.049411, 0.054237, 0.058096, 0.062371, 0.065937, 0.069282, 0.072792, 0.076427, 0.08009, 0.084139, 0.08768, 0.091037, 0.094712, 0.098608, 0.102891, 0.106416, 0.110557, 0.114785, 0.119077, 0.12265, 0.126408, 0.13009, 0.133841, 0.137573, 0.141269, 0.1447, 0.148171, 0.15194, 0.155498, 0.159181, 0.163059, 0.167256, 0.17212, 0.176481, 0.180456, 0.184155, 0.187568, 0.191164]
|
||||||
|
}, {
|
||||||
|
label: 'ScriptDuration',
|
||||||
|
backgroundColor: 'rgba(161, 59, 195, 0.2)',
|
||||||
|
borderColor: 'rgba(161, 59, 195, 1.00)',
|
||||||
|
data: [0.011806, 0.01932, 0.024839, 0.029735, 0.035304, 0.039916, 0.044773, 0.049431, 0.053814, 0.058653, 0.062587, 0.066457, 0.070276, 0.074693, 0.079702, 0.083712, 0.088783, 0.093909, 0.098117, 0.104154, 0.108997, 0.114945, 0.118872, 0.122772, 0.127332, 0.131368, 0.135275, 0.138926, 0.143478, 0.147394, 0.151377, 0.15608, 0.161111, 0.165037, 0.169151, 0.173286, 0.177763, 0.182366, 0.186596, 0.190741, 0.194672, 0.199272, 0.203283, 0.207111, 0.211225, 0.215767, 0.219568, 0.224003, 0.228104, 0.232082]
|
||||||
|
}, {
|
||||||
|
label: 'TaksDuration',
|
||||||
|
backgroundColor: 'rgba(221, 65, 150, 0.2)',
|
||||||
|
borderColor: 'rgba(221, 65, 150, 1.00)',
|
||||||
|
data: [0.084179, 0.146628, 0.195962, 0.243041, 0.295599, 0.34297, 0.391556, 0.444207, 0.491842, 0.541939, 0.591301, 0.63829, 0.692105, 0.743808, 0.791797, 0.839578, 0.888443, 0.934595, 0.979944, 1.027176, 1.075164, 1.124315, 1.170777, 1.217007, 1.263484, 1.312175, 1.362752, 1.408734, 1.460274, 1.510012, 1.559248, 1.604944, 1.653554, 1.699409, 1.746603, 1.795274, 1.844479, 1.888634, 1.934995, 1.984076, 2.031683, 2.080534, 2.130563, 2.180306, 2.231364, 2.280398, 2.326837, 2.375887, 2.42164, 2.466577]
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
labels: [0, 0.7, 1.3, 1.9, 2.6, 3.5, 4.2, 4.9, 5.5, 6.2, 6.8, 7.4, 8.1, 8.7, 9.3, 10, 10.6, 11.2, 11.9, 12.5, 13.1, 13.8, 14.4, 15, 15.7, 16.3, 16.9, 17.6, 18.2, 18.8, 19.5, 20.1, 20.7, 21.4, 22, 22.6, 23.3, 23.9, 24.6, 25.2, 25.8, 26.5, 27.1, 27.7, 28.4, 29, 29.6, 30.3, 30.9, 31.5],
|
||||||
|
datasets: [{
|
||||||
|
label: 'JSHeapUsedSize',
|
||||||
|
backgroundColor: 'rgba(163, 104, 70, 0.2)',
|
||||||
|
borderColor: 'rgba(163, 104, 70, 1.00)',
|
||||||
|
data: [5.3194427490234375, 6.03155517578125, 5.985557556152344, 6.4153289794921875, 5.796791076660156, 6.239433288574219, 6.671974182128906, 6.0579833984375, 6.404762268066406, 6.7397918701171875, 6.041435241699219, 6.315025329589844, 4.508964538574219, 4.4370880126953125, 4.7804718017578125, 5.0569915771484375, 5.3494720458984375, 4.672340393066406, 4.985466003417969, 5.2745513916015625, 5.53814697265625, 4.9271087646484375, 5.1971893310546875, 5.4645843505859375, 4.841468811035156, 5.109764099121094, 5.3697357177734375, 5.626617431640625, 4.9893798828125, 5.25299072265625, 5.529792785644531, 5.773414611816406, 5.109161376953125, 5.3402252197265625, 5.575325012207031, 5.8134765625, 6.044158935546875, 5.3932952880859375, 5.6724395751953125, 5.908287048339844, 6.143058776855469, 5.5333709716796875, 5.774436950683594, 6.010490417480469, 6.24365234375, 5.625343322753906, 5.8661651611328125, 5.6792449951171875, 5.911216735839844, 6.144889831542969]
|
||||||
|
}, {
|
||||||
|
label: 'JSHeapTotalSize',
|
||||||
|
backgroundColor: 'rgba(118, 118, 118, 0.2)',
|
||||||
|
borderColor: 'rgba(118, 118, 118, 1.00)',
|
||||||
|
data: [9.87109375, 10.12109375, 10.62109375, 10.62109375, 10.62109375, 10.66796875, 10.66796875, 10.66796875, 10.66796875, 10.66796875, 7.66796875, 7.66796875, 7.5390625, 7.0390625, 7.0390625, 7.0390625, 7.0390625, 7.0390625, 7.0390625, 7.0390625, 7.0390625, 7.0390625, 7.0390625, 7.0390625, 7.0390625, 7.0390625, 7.0390625, 7.0390625, 7.0390625, 7.0390625, 7.0390625, 7.0390625, 7.0390625, 7.0390625, 7.0390625, 7.0390625, 7.0390625, 7.0390625, 7.0390625, 7.0390625, 7.0390625, 7.2890625, 7.2890625, 7.2890625, 7.2890625, 7.2890625, 7.2890625, 7.2890625, 7.2890625, 7.2890625]
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
|
||||||
97
test/chart/index.html
Normal file
97
test/chart/index.html
Normal file
@ -0,0 +1,97 @@
|
|||||||
|
<!doctype html>
|
||||||
|
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
|
||||||
|
<title>Metrics Chart</title>
|
||||||
|
<meta name="description" content="Metrics for functional tests">
|
||||||
|
<meta name="author" content="Sebastian Kupke">
|
||||||
|
|
||||||
|
<style>
|
||||||
|
canvas {
|
||||||
|
margin-bottom: 60px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<canvas id="chart1"></canvas>
|
||||||
|
<canvas id="chart2"></canvas>
|
||||||
|
<canvas id="chart3"></canvas>
|
||||||
|
<canvas id="chart4"></canvas>
|
||||||
|
|
||||||
|
<script src="./Chart.min.js"></script>
|
||||||
|
<script src="./data.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
new Chart('chart1', {
|
||||||
|
type: 'line',
|
||||||
|
data: data[0],
|
||||||
|
options: {
|
||||||
|
scales: {
|
||||||
|
xAxes: [{
|
||||||
|
scaleLabel: {
|
||||||
|
display: true,
|
||||||
|
labelString: '[Seconds]'
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
new Chart('chart2', {
|
||||||
|
type: 'line',
|
||||||
|
data: data[1],
|
||||||
|
options: {
|
||||||
|
scales: {
|
||||||
|
xAxes: [{
|
||||||
|
scaleLabel: {
|
||||||
|
display: true,
|
||||||
|
labelString: '[Seconds]'
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
new Chart('chart3', {
|
||||||
|
type: 'line',
|
||||||
|
data: data[2],
|
||||||
|
options: {
|
||||||
|
scales: {
|
||||||
|
xAxes: [{
|
||||||
|
scaleLabel: {
|
||||||
|
display: true,
|
||||||
|
labelString: '[Seconds]'
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
new Chart('chart4', {
|
||||||
|
type: 'line',
|
||||||
|
data: data[3],
|
||||||
|
options: {
|
||||||
|
scales: {
|
||||||
|
xAxes: [{
|
||||||
|
scaleLabel: {
|
||||||
|
display: true,
|
||||||
|
labelString: '[Seconds]'
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
yAxes: [{
|
||||||
|
scaleLabel: {
|
||||||
|
display: true,
|
||||||
|
labelString: '[MegaByte]'
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
85
test/tests/eventlistener/index.html
Normal file
85
test/tests/eventlistener/index.html
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
<!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>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<section class="section">
|
||||||
|
<div class="container">
|
||||||
|
<h1 class="title">
|
||||||
|
Memory Test EventListener
|
||||||
|
</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="https://bulma.io/images/placeholders/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="https://bulma.io/images/placeholders/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>
|
||||||
|
`
|
||||||
|
|
||||||
|
document.querySelector('#add').addEventListener('click', function() {
|
||||||
|
document.querySelector('#content').innerHTML = html
|
||||||
|
document.querySelector('#contentRandom').addEventListener('click', 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 })
|
||||||
|
}, false)
|
||||||
|
document.querySelector('#contentDelete').addEventListener('click', function() {
|
||||||
|
document.querySelector('#content').innerHTML = ''
|
||||||
|
}, false)
|
||||||
|
}, false)
|
||||||
|
|
||||||
|
document.querySelector('#delete').addEventListener('click', function() {
|
||||||
|
document.querySelector('#content').innerHTML = ''
|
||||||
|
}, false)
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
155
test/tests/eventlistener/index.js
Normal file
155
test/tests/eventlistener/index.js
Normal file
@ -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 = 50
|
||||||
|
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}/index.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(', ')}]
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
`
|
||||||
|
)
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user