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