济南招聘网最新招聘,seo模拟点击软件,邵阳建设银行网站是多少钱,做网站的不肯给ftp[css] 异步加载CSS的方式有哪些#xff1f;
异步加载CSS 说到加载 CSS 这种事儿不是很简单吗#xff1f;像这样咯#xff1a; 这不就完事儿了嘛#xff01;
这样是没错#xff01;但是这样有问题啊——会阻塞渲染#xff01;浏览器看到这个标签就会停下手里的活儿…[css] 异步加载CSS的方式有哪些
异步加载CSS 说到加载 CSS 这种事儿不是很简单吗像这样咯 这不就完事儿了嘛
这样是没错但是这样有问题啊——会阻塞渲染浏览器看到这个标签就会停下手里的活儿去加载 CSS 并解析了。
当然了如果这个 CSS 文件是接下来要渲染的内容所需的那无可厚非必须先要有了这个 CSS 才能接着渲染阻塞也是情理之中。
但实际的情况却是我们很多 CSS 内容其实在首屏的时候是不需要起码等到后续才会使用那么这个时候这些 CSS 这样加载去阻塞内容渲染就不对了。
也就是说针对优先级不那么高的暂时用不到CSS就应该要想办法让它异步加载不要阻塞浏览器渲染。
那么怎么弄呢
老方子 现在介绍第一种老办法通过 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“jscourse” 之类的。
这样一来浏览器就会认为这个 CSS 文件优先级非常低就会在不阻塞的情况下进行加载。但是为了让 CSS 规则生效最后还是要将 media 值改对才行。所以这个办法落实到代码就是这样
介绍完了老方子我们再来看看新药方。
新的异步加载方式 新方子就是利用规范中新增加的 rel“preload” 就像这样 通过 preload 属性值就是告诉浏览器这个资源文件随后会用到请提前加载好。但是这只是加载所以你看当它加载完毕后还是需要将 rel 值改回去这才能让 CSS 生效。
你是不是想问这和老方子也没多大区别嘛
看上去确实如此但是呢语义上更加好一些。另外就是你仔细点就会发现 asstyle这个属性所以 preload 不仅仅可以用在 CSS 文件上而是可以用在绝大多数的资源文件上。比如JS 文件 然后要用的时候就创建一个 script 标签指向它
var script document.createElement(“script”); script.src “scriptfile.js”; document.body.appendChild(script); 这个时候浏览器就直接从缓存中拿这个文件了不会再发请求了因为此前已经加载好了。
那么 preload 中的 as 属性支持哪些资源文件呢下面这些都可以
audio document embed fetch font image object script style track worker video 是不是迫不及待想去试试了告诉你个坏消息目前 preload 只有 Chrome 是完美支持的其他浏览器惨不忍睹哎 个人简介
我是歌谣欢迎和大家一起交流前后端知识。放弃很容易 但坚持一定很酷。欢迎大家一起讨论
主目录
与歌谣一起通关前端面试题
