同步加载cssjs资源文件造成阻塞，网页打开慢

异步加载方法一

• 通过 JS 动态插入 link 标签来异步载入 CSS 代码，就像这样：

var myCSS = document.createElement( "link" );
myCSS.rel = "stylesheet";
myCSS.href = "mystyles.css";
document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling );

• 实现原理: 后续 JS 执行的时候，去创建一个 link 标签来加载 CSS 代码

异步加载二

• 利用 link 上的 media 属性，将它设置为和用户当前浏览器环境不匹配的值，比如：media="print"，甚至可以设置为一个完全无效的值 media="css-async" 之类的, 浏览器就会进行异步加载。加载完成后让css 生效, 使用onload="this.media='all'

<link rel="stylesheet" href="path/cssfile.css" media="jscourse" media="css-async" onload="if(media!='all')media='all'" rel="stylesheet">

异步方法三

• 使用新规范rel="preload",例子如下

  • 加载完成后通过onload修改rel

  <link rel="preload" href="cssfile.css" as="style" onload="this.rel='stylesheet'">

  • 使用as预设属性

  <link rel="preload" href="scriptfile.js" as="script">

• preload 中的 as 属性支持一下属性

audio
document
embed
fetch
font
image
object
script
style
track
worker
video