JSFiddle - React, Tailwind, and code Playground

by David Storey

HTML

<p id="name">Is PerformanceEntry name supported?</p>
<p id="entryType">Is PerformanceEntry entryType supported?</p>
<p id="startTime">Is PerformanceEntry startTime supported?</p>
<p id="duration">Is PerformanceEntry duration supported?</p>

CSS

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

JavaScript

var attributes =  ["name", "entryType", "startTime", "duration"];

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