JSFiddle - React, Tailwind, and code Playground

by David Storey

HTML

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

<p id="initiatorType">Is PerformanceResourceTiming initiatorType supported?</p>
<p id="redirectStart">Is PerformanceResourceTiming redirectStart supported?</p>
<p id="redirectEnd">Is PerformanceResourceTiming redirectEnd supported?</p>
<p id="fetchStart">Is PerformanceResourceTiming fetchStart supported?</p>
<p id="domainLookupStart">Is domainLookupEnd domainLookupStart supported?</p>
<p id="domainLookupEnd">Is PerformanceResourceTiming domainLookupEnd supported?</p>
<p id="connectStart">Is PerformanceResourceTiming connectStart supported?</p>
<p id="connectEnd">Is PerformanceResourceTiming connectEnd supported?</p>
<p id="secureConnectionStart">Is secureConnectionStart name supported?</p>
<p id="requestStart">Is PerformanceResourceTiming requestStart supported?</p>
<p id="responseStart">Is PerformanceResourceTiming responseStart supported?</p>
<p id="responseEnd">Is PerformanceResourceTiming responseEnd supported?</p>

CSS

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

JavaScript

var attributes =  ["name", "entryType", "startTime", "duration", "initiatorType", "redirectStart", "redirectEnd", "fetchStart", "domainLookupStart", "domainLookupEnd", "connectStart", "connectEnd", "secureConnectionStart", "requestStart", "responseStart", "responseEnd"];

if (window.performance && typeof window.performance.getEntriesByType !== "undefined") {
    var entry = window.performance.getEntriesByType("resource")[0];
    console.log(Object.prototype.toString.call(entry));

    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");
}