JSFiddle - React, Tailwind, and code Playground

by David Storey

HTML

<p id="mark">Is performance.mark supported?</p>
<p id="clearMarks">Is performance.clearMarks supported?</p>
<p id="measure">Is performance.measure supported?</p>
<p id="clearMeasures">Is performance.clearMeasures supported?</p>

CSS

.supported {
    background-color: lime;
}
.unsupported {
    background-color: red;
}
.prefixed {
 background-color: orange;
}

JavaScript

var methods =  ["mark", "clearMarks", "measure", "clearMeasures"];

if (window.performance) {
    for (var i = 0; i < methods.length; i++) {
        var el = document.getElementById(methods[i]);
        if (typeof window.performance[methods[i]] !== "undefined") {
            el.textContent = "performance." + methods[i] + " is supported!";
            el.className = "supported";
        } else {
            el.textContent = "performance." + methods[i] + " is not supported :(";
            el.className = "unsupported";
        }
    }
            
} else {
    console.log("Performance is not supported at all");
}