仅在模板完全完成渲染时加载 CSS

Question

我有一个指向boostrap样式表cdn的链接，该问题导致一些渲染阻塞问题，根据Google页面速度见解，该问题正在执行我的网站性能。我通过仅获取所需的折叠引导 css 并将其放入"critic_bootstrap.css"文件中来解决此问题。当页面完全呈现时，我确实想为所有其他不在首屏的样式加载该引导 CDN。我怎样才能做到这一点？我尝试在jquery document.ready函数中将其附加到文档的头部，但它似乎仍然会导致PSI渲染阻塞问题，就像在页面呈现之前加载一样。

Answer 1

试试这个：

$(document).ready(function(){
   $('head').append('<link rel="stylesheet" type="text/css" href="bootstrap.css">');
}

Answer 2

使用

<link rel="preload" href="mystyles.css" as="style" onload="this.rel='stylesheet'">

最重要的是，如果您想永久禁用 FOUC，请添加

body {
  overflow:hidden;
}

到你的首屏 CSS 并在你的async CSS 中覆盖它

body {
  overflow:auto;
}

以上只是一个总结。如果你有兴趣，这里有一篇关于该方法的完整文章：现代异步CSS加载，也包含一个用于不支持浏览器的polyfill。

与其他方法相比，这可能看起来没有太大的改进，但是rel="preload"带来的一个优点是，支持浏览器将比使用具有不匹配媒体值的样式表更早开始下载文件。

另请阅读预加载内容。对rel="preload"的支持仅限于Chrome，Opera和Safari，但更多的支持将随之而来(特别是Firefox v59(。此外，在不支持的情况下，并不意味着它不起作用。这仅意味着与使用不存在的rel类型相比没有改进。

Answer 3

尝试在 $(window).load() 而不是 $(document).ready() 加载 css 。

例如：

  $(window).load(function() {
          $('head').append('<link rel="stylesheet" href="common.css" type="text/css" />');
    });