How to Identify non-render blocking (async) css using javascript

[rasam25]

Hi

I want to track render Blocking & non-blocking CSS using javascript on every pageview on my site

CSS is treated as a render blocking resource but there are async CSS loading approaches such as
Using media tag -
<link rel="stylesheet" href="mystyles.css" media="nope!" onload="this.media='all'">

Using alternate -
<link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'">
OR
loading CSS in body

I am using async/defer tag to identify non-blocking js, but for CSS I am not able to figure out as my script will execute after onLoad event & will check No of blocking CSS, till the time media/rel attribute value is changed

how webpagetest identify it