Source code

Revision control

Other Tools

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Custom page for the Console</title>
</head>
<body>
<script>
// These query parameters are set in damp.js:customConsole and define the number
// of console API calls we do in this test.
const searchParams = new URLSearchParams(location.search);
const sync = searchParams.get("sync");
const stream = searchParams.get("stream");
const batch = searchParams.get("batch");
const simple = searchParams.get("simple");
// We log complex objects:
// * a complex js object (window)
// * a DOM node (body)
// * a large array
const bigArray = Array.from({length: 10000}, (_, i) => i);
// Fill up the console with many logs synchronously during page load.
for (let i = 0; i < sync; i++) {
console.log("sync log", i, window, document.body, bigArray);
}
// Then, do streamlogs, log asynchronously a lot of messages
let n = 0;
function streamLogs() {
console.log("stream log", n++, window, document.body, bigArray);
if (n < stream) {
requestAnimationFrame(streamLogs);
} else {
requestIdleCallback(batchLogs);
}
}
requestIdleCallback(streamLogs);
// We batch log by small bulk asynchronously slightly more slowly thanks to idle callback
let x = 0;
function batchLogs() {
const batchSize = 10;
for (let i = 0; i < batchSize; i++) {
console.log("batch log", x++, window, document.body, bigArray);
}
if (x < batch) {
requestIdleCallback(batchLogs);
} else {
requestIdleCallback(simpleLogs);
}
}
// We log simple messages, too, as a way to test performance of a high volume of log messages
function simpleLogs() {
for (let i = 0; i < simple; i++) {
console.log("simple log", i);
}
}
</script>
</body>
</html>