relift-html
Version:
A blazing fast view library that lets you put Javascript Template Literals in HTML
142 lines (120 loc) • 4.65 kB
HTML
<html>
<head>
<title>perf monitor example</title>
<link rel="stylesheet" href="./dbmonster.css">
</head>
<body>
<script src="https://unpkg.com/perf-monitor@^0.3/dist/umd/perf-monitor.js"></script>
<script src="https://mathieuancelin.github.io/js-repaint-perfs/lib/memory-stats.js"></script>
<script src="https://mathieuancelin.github.io/js-repaint-perfs/lib/monitor.js"></script>
<div id="app2"></div>
<div id="app">
<table class="table table-striped latest-data">
<tbody>
<tr r-for="(db, i) in this.dbs" id="${db.dbname}">
<td class="dbname">${db.dbname}</td>
<td class="query-count">
<span class="${db.lastSample.countClassName}">${db.lastSample.nbQueries}</span>
</td>
<td r-for="query in db.lastSample.topFiveQueries" id="${query.elapsedClassName}">
<span class="foo">
${query.formatElapsed}
</span>
<div class="popover left">
<div class="popover-content">
${query.query}
</div>
<div class="arrow"></div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<script type="module">
import reLiftHTML from '../../src/index.js';
//import reLiftHTML from '//unpkg.com/relift-html'
var render = function () {
var databases = ENV.generateData().toArray();
var html = '<table class="table table-striped latest-data"><tbody>';
for (var index = 0; index < databases.length; index++) {
var db = databases[index];
html += '<tr><td class="dbname">' + db.dbname + '</td>';
html += '<td class="query-count">';
html += '<span class="' + db.lastSample.countClassName + '">' + db.lastSample.nbQueries + '</span></td>';
for (var indexQ = 0; indexQ < db.lastSample.topFiveQueries.length; indexQ++) {
var q = db.lastSample.topFiveQueries[indexQ];
html += '<td class="' + q.elapsedClassName + '">';
html += q.formatElapsed || '';
html += '<div class="popover left">';
html += '<div class="popover-content">';
html += q.query || '';
html += '</div>';
html += '<div class="arrow"></div>';
html += '</div>';
html += '</td>';
}
html += '</tr>';
}
html += '</tbody></table>';
document.getElementById("app2").innerHTML = html;
Monitoring.renderRate.ping();
setTimeout(render, ENV.timeout);
};
//render();
reLiftHTML({
el: '#app',
data: {
dbs: [],
},
created() {
console.log('IN PERF', ENV);
this.update();
},
update() {
//requestAnimationFrame(this.update.bind(this));
const data = ENV.generateData().toArray();
perfMonitor.startProfile('render');
this.data.dbs = data;
Monitoring.renderRate.ping();
perfMonitor.endProfile('render');
setTimeout(this.update.bind(this), ENV.timeout);
},
});
</script>
<script>
perfMonitor.startFPSMonitor();
perfMonitor.startMemMonitor();
// perfMonitor.initProfiler('data update');
perfMonitor.initProfiler('render');
// initProfiler will create a new monitor component and inject it into your
// document.
//perfMonitor.initProfiler('a');
//perfMonitor.initProfiler('b');
function tick() {
// save start time of the profiled code
perfMonitor.startProfile('a');
let a = Math.random();
for (let i = 0; i < 100; i++) {
a += Math.random();
}
// measure time between the start of the profiled code and the current time
perfMonitor.endProfile('a');
perfMonitor.startProfile('b');
let b = Math.random();
for (let i = 0; i < 100; i++) {
b *= Math.random();
}
perfMonitor.endProfile('b');
console.log(a);
console.log(b);
setTimeout(tick, 30);
}
//setTimeout(tick, 30);
const template = (strings, ...values) => String.raw(strings, ...values.map(v => Array.isArray(v) ? v.join('') : v));
console.log(template `Ok Voila ${Date.now()}!`)
</script>
<script src="./dbmonster.js"></script>
</body>
</html>