好程序员web前端教程分享异步加载CSS的一些方法，在我们写页面的时候，我们做最主要的任务就是提高页面的性能和弹性加载速度，以不会延迟页面的呈现的形式来加载CSS。这是因为在默认情况下，
-浏览器会同步加载外部的CSS
- 在下载和解析CSS时会影响所有页面呈现
这两种情况都会导致潜在的延迟。
当然，这也是在开始渲染页面之前，应该至少加载网站的CSS的一部分，并且为了立即将该初始CSS添加到浏览器，我们建议内联css。对于整体数量较少的网站，仅此一项就足够了，但如果CSS很大（例如，大于15到20kb），它可以帮助性能按优先级将其拆分。拆分后，应该在后台-aka中加载不太关键的CSS异步。在这篇文章中，我的目的是描述我在这些日子的首选方式，这实际上已存在很长的时间段了。
有几种方法可以异步加载CSS，但没有一种方法可以像您期望的那样直观。与script元素不同，没有async或defer属性可以简单地应用于link元素，因此多年来我们维护了loadCSS项目，使得加载异步CSS的过程更加容易。最近，浏览器已经标准化了它们的CSS加载行为，因此可能不再需要像loadCSS这样的专用脚本来处理它们的微小差异。
今天，我们掌握了浏览器如何处理各种link元素属性的一些知识，我们可以通过一小段HTML来实现异步加载CSS的效果。在这里，它是异步加载样式表的最简单方法：
<link rel="stylesheet" href="/styles/index.css" media="print" onload="this.media='all'">
这行HTML简洁，但它不是很直观，所以让我们分解这里发生的事情。
首先，将link's media属性设置为print。“打印”是一种媒体type，它说“应用此样式表的基于打印的媒体的规则”，换句话说，当用户尝试打印页面时应用它们。不可否认，我们希望我们的样式表适用于所有媒体（尤其是屏幕）而不仅仅是打印，但通过声明与当前环境不匹配的媒体类型，我们可以实现一个有趣且有用的效果：浏览器将加载样式表没有延迟页面渲染，异步！这很有帮助，但并不是我们想要的全部。我们还希望CSS在加载后实际应用于屏幕环境。为此，我们可以使用该onload属性将link媒体设置为all完成加载。
介绍完了老方子，我们再来看看新药方，是的，同样的！在过去一两年中，我们一直在使用link[rel=preload]（而不是rel=stylesheet）来实现与上面类似的模式（分别rel在加载后切换属性而不是media属性）。使用这种方法仍然可以正常工作，但是，使用时需要考虑几个缺点preload。首先，浏览器对于加载的支持依旧不是特别的好因此如果你想依赖它来跨浏览器获取和应用样式表，那么填充（例如一个loadCSS）是必要的。更主要的是，preload尽可能早地获取文件，优先级最高，可能会优先考虑其他重要下载，并且可能比非关键CSS实际需要的优先级更高。
幸运的是，如果你碰巧想要提供的高优先级提取rel=preload（在支持它的浏览器中），你可以将它与上面的模式结合起来。
<link rel="preload" href="styles/index.css" as="style" onload="this.rel='stylesheet'">
这和之前的方法没什么区别啊！是的确实如此，但是呢，语法上更加好一些。另外就是你仔细点就会发现 as="style"这个属性，所以 preload 不仅仅可以用在 CSS 文件上，而是可以用在绝大多数的资源文件上。
<link rel="preload" href="styles/index.css" as="script">
我们可以新建一个script标签来指向它：
var script = document.createElement("script");
script.src = "scriptfile.js";
document.body.appendChild(script);
在这个时候浏览器就直接从缓存中拿这个文件了，不会再发请求了，因为此前已经加载好了。
那么 preload 中的 as 属性支持哪些资源文件呢？下面这些都可以
· font
· image
· object
· script
· style
不要想太多，只有谷歌太对它做出完美的支持。
也可以用JavaScript来实现：
$(window).load(function () {
//异步延迟加载样式
var link = $('<link />');
link.attr('href', '/styles/index.css');
link.attr('rel', 'stylesheet');
link.appendTo($('head'));
link.load(function () {
console.info('加载成功...');
});
好程序员web前端培训官网：http://www.goodprogrammer.org/
本内容伪原创文章，转载请注明出处。
网友评论