Html页面异步加载资源文件

同步加载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
none
最后修改于:2021年05月19日 23:55

添加新评论