javascript - Deferring CSS load, why is including preload <link> faster? -


i'm testing out preloading , i'd know why including preload link before preload script faster tenth of second.

rel="preload" tells browser start downloading stylesheet not block loading. script creates stylesheet url , applies page. why stand-alone-script not performant?

<link rel="preload" href="https://unpkg.com/tachyons@4.8.0/css/tachyons.min.css" as="style" onload="this.rel='tachyons.min.css'">   <script type="text/javascript">   //<![cdata[   if(document.createstylesheet) {     document.createstylesheet("https://unpkg.com/tachyons@4.8.0/css/tachyons.min.css");   }   else {     var styles = "@import url('https://unpkg.com/tachyons@4.8.0/css/tachyons.min.css');";     var newss=document.createelement('link');     newss.rel='stylesheet';     newss.href='data:text/css,'+escape(styles);     document.getelementsbytagname("head")[0].appendchild(newss);   }   //]]>   </script> 

preload + script: https://codepen.io/juliannorton/full/gvxpvr/

script only: https://codepen.io/juliannorton/pen/vjrlbk


Comments

Popular posts from this blog

python - Operations inside variables -

Generic Map Parameter java -

arrays - What causes a java.lang.ArrayIndexOutOfBoundsException and how do I prevent it? -