网站建设
网站建设在网站建设优化方面可以做的最有影响力的事情之一是提高页面性能和弹性，以不会延迟页面呈现的方式加载css。这是因为默认情况下，浏览器会同步加载外部css?– 在下载和解析css时会影响所有页面呈现 – 这两种情况都会导致潜在的延迟。当然，在应该允许页面开始渲染之前，应该加载网站的css的至少一部分，并且为了立即将该初始css添加到浏览器，我们建议内联（或http2服务器推送）css。对于整体数量较少的网站，仅此一项就足够了，但如果css很大（例如，大于15到20kb），它可以帮助性能按优先级将其拆分。拆分后，应该在后台-aka中加载不太关键的css异步。在这篇文章中，我的目的是描述我们这些日子的首选方式，这实际上已存在多年。
有几种方法可以异步加载css，但没有一种方法可以像您期望的那样直观。与script元素不同，没有async或defer属性可以简单地应用于link元素，因此多年来我们维护了loadcss项目，使得加载异步css的过程更加容易。最近，浏览器已经标准化了他们的css加载行为，因此可能不再需要像loadcss这样的专用脚本来处理它们的微小差异。
代码今天，我们掌握了浏览器如何处理各种link元素属性的一些知识，我们可以通过一小段html来实现异步加载css的效果。在这里，它是异步加载样式表的最简单方法：
打破这个……这行html简洁，但它不是很直观，所以让我们分解这里发生的事情。
首先，将link‘s?media属性设置为print。“打印”是一种媒体type，它说“应用此样式表的基于打印的媒体的规则”，换句话说，当用户尝试打印页面时应用它们。不可否认，我们希望我们的样式表适用于所有媒体（尤其是屏幕）而不仅仅是打印，但通过声明与当前环境不匹配的媒体类型，我们可以实现一个有趣且有用的效果：浏览器将加载样式表没有延迟页面渲染，异步！这很有帮助，但并不是我们想要的全部。我们还希望css在加载后实际应用于屏幕环境。为此，我们可以使用该onload属性将link媒体设置为all完成加载。
不能rel = preload也这样做吗？是的，同样的！在过去一两年中，我们一直在使用link[rel=preload]（而不是rel=stylesheet）来实现与上面类似的模式（分别rel在加载后切换属性而不是media属性）。使用这种方法仍然可以正常工作，但是，使用时需要考虑几个缺点preload。首先，浏览器对预加载的支持仍然不是很好，因此如果你想依赖它来跨浏览器获取和应用样式表，那么填充（例如一个loadcss提供）是必要的。更重要的是，preload尽可能早地获取文件，优先级最高，可能会优先考虑其他重要下载，并且可能比非关键css实际需要的优先级更高。
幸运的是，如果你碰巧想要提供的高优先级提取rel=preload（在支持它的浏览器中），你可以将它与上面的模式结合起来，如下所示：
鉴于上面代码的简单和声明性质，我们选择覆盖填充，因此打印媒体切换方法现在再次成为我们的首选。
为什么不使用虚假媒体属性？在过去的几年里，任何关注此事的人都会回想起我们使用像“仅x”这样的媒体属性值，通过提供与任何环境都不匹配的值来达到与“print”相同的效果，如x是一种无意义的媒体类型。当浏览器遇到不匹配的媒体类型时，它们当前会对它们进行相同的处理 – 无论如何它们都会加载文件。也就是说，一些浏览器团队开始考虑区分不匹配的媒体类型和无效的媒体类型（或根本不被浏览器识别），并且可能不会请求使用无效媒体类型链接的文件。这会打破很多现有的css加载实现，因此不太可能，但出于安全考虑，我们建议使用有效的非匹配类型print。
您可能不需要loadcss ……我们继续维护loadcss并发现它在某些情况下很有用，特别是以编程方式从javascript中获取css文件，如下所示：loadcss(/path/to/my.css)。如果您已经在使用loadcss或其polyfill?rel=preload模式，则不一定需要更改任何内容。在内部，它使用与本文中描述的相同的机制。
但是，越来越多，我们发现简单的html方法可能就是您所需要的。简单往往是最好的。