import * as scrawl from '../../source/scrawl.js';Scrawl-canvas DOM element snippets
Related files:
Purpose: (roughly) measure and display the time taken between calls to RequestAnimationFrame, and the resultant animated frames-per-second performance of the web page.
Function input: an empty <div> element.
Function output: true if snippet builds; false otherwise
import { pagePerformance } from './relative/or/absolute/path/to/this/page-performance-snippet.js';
let myElements = document.querySelectorAll('.some-class');
myElements.forEach(el => pagePerformance(el));
Import the Scrawl-canvas object
import * as scrawl from '../../source/scrawl.js';Effects on the element:
innerHTML data, which will replace any child elements or text placed between the element’s opening and closing tags.export default function (el) {Define the report function that will record the time taken for each Display cycle animation
let report = function () {
let testTicker = Date.now(),
testTime, testNow,
testMessage = document.querySelector(`#${el.id}`);
let history = [],
averageTime = 0;
const addTime = (t) => {
if (history.length > 20) history.shift();
history.push(t);
averageTime = history.reduce((p, c) => p + c, 0);
averageTime /= history.length;
}
return function () {
testNow = Date.now();
testTime = testNow - testTicker;
testTicker = testNow;
addTime(testTime);
testMessage.textContent = `Screen refresh: ${Math.ceil(averageTime)}ms; fps: ${Math.floor(1000 / averageTime)}`;
};
}();Apply the snippet to the DOM element
let snippet = scrawl.makeSnippet({
domElement: el,
animationHooks: {
afterShow: report,
},
includeCanvas: false,
})The return value for this snippet is a boolean, not a JS Object containing links to major actors/actions in the snippet
return (snippet) ? true : false;
};