1. 首页
  2. css

异步加载CSS的最简单方法

史葛Jehl:。这是因为在默认情况下,浏览器将加载外部CSS,在下载和解析CSS时同步停止所有页面呈现,这两种情况都会导致潜在的延迟。

<link onload=>

Don\"t just up and do this to all your stylesheets though, otherwise, you\"ll get a pretty nasty \"Flash of Unstyled Content\" (FOUC) as the page loads. You need to pair the technique with a way to ship critical CSS. Do that though, and like Scott\"s opening sentence said, it\"s quite impactful.

Interesting side story… on our Pen Editor page over at CodePen, we had a FOUC problem (warning, there is a very fast flash of white in this video):

This has done this for (years?) on CodePen in @firefox.

We have a totally normal <link>

Would love to understand. pic.twitter.com/HGTHwpemiy

— Chris Coyier (@chriscoyier) June 20, 2019

What makes it weird is that we load our CSS in <link>标记在<head>中完全正常,这将阻止呈现并防止FOUC。但是有一些难以复制的错误在起作用。幸运的是我们找到了一个奇怪的解决方案,所以现在我们在<head>中有一个空的<script>标记,它以某种方式解决了这个问题。

直接链接→

异步加载CSS的最简单方法 为WP2原创文章,链接:https://www.wp2.cn/css/%e5%bc%82%e6%ad%a5%e5%8a%a0%e8%bd%bdcss%e7%9a%84%e6%9c%80%e7%ae%80%e5%8d%95%e6%96%b9%e6%b3%95/

发表评论

您的电子邮箱地址不会被公开。