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

Question

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

Answer 1

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

例如：

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

Answer 2

尝试这个：

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

Answer 3

利用

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

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

body {
  overflow:hidden;
}

到你的折叠 CSS 并在你的asyncCSS中覆盖它

body {
  overflow:auto;
}

以上只是一个总结。如果你有兴趣，这里有一篇关于该方法的完整文章：Modern Asynchronous CSS Loading，还包含一个用于不支持浏览器的 polyfill。

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

另请阅读预加载内容。支持rel="preload"仅限于 Chrome、Opera 和 Safari，但后续将支持更多（尤其是 Firefox v59）。此外，不支持它并不意味着它不起作用。这仅意味着使用不存在的rel类型没有任何改进。