CSS 加载新方式
【第182期】CSS 加载新方式
CSS精选
Chrome 浏览器有意改变<link rel="stylesheet">的加载方式，当其出现在<body>中时，这一变化将更加明显。笔者决定在本文中进行详细说明这种改变可能带来影响与好处。
一.目前CSS文件的加载方式
…content…CSS 会阻碍渲染，因此在all-of-my-styles.css全部加载完之前，用户就只能面对一片空白的屏幕。
通常，我们将某个站点的所有 CSS 样式合并为一到两个资源，这意味着用户会下载一堆当前页面根本就用不上的规则。这是因为网站可能包含许多不同类型的页面，每个页面都有自己的「组件」；而在组件级别传递 CSS 的话，会降低 HTTP/1 的性能。
然而，对 SPDY 和 HTTP/2 来说，事实却并非如此。在这些协议中，许多小资源只需要很小的代价就能完成递送，并且被独立缓存。
…content…这样一来就解决了冗余问题，但也意味着你需要知道输出<head>时页面将包含的内容，从而防止 streaming。与此同时，浏览器还是只能等待所有 CSS 样式加载完毕，才能开始渲染。如果加载 /site-footer.css的速度不够快，就会耽误所有页面的渲染。
二.目前最先进的 CSS 加载方法
// https://github.com/filamentgroup/loadCSS
!function(e){"use strict"
var n=function(n,t,o){function i(e){return f.body?e():void setTimeout(function(){i(e)})}var d,r,a,l,f=e.document,s=f.createElement("link"),u=o||"all"
return t?d=t:(r=(f.body||f.getElementsByTagName("head")[0]).childNodes,d=r[r.length-1]),a=f.styleSheets,s.rel="stylesheet",s.href=n,s.media="only x",i(function(){d.parentNode.insertBefore(s,t?d:d.nextSibling)}),l=function(e){for(var n=s.href,t=a.length;t--;)if(a[t].href===n)return e()
setTimeout(function(){l(e)})},s.addEventListener&&s.addEventListener("load",function(){this.media=u}),s.onloadcssdefined=l,l(function(){s.media!==u&&(s.media=u)}),s}
"undefined"!=typeof exports?exports- 上一篇 »外部动态加载css
- 下一篇 »使用async属性异步加载执行JavaScript