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

Question

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

Answer 1

使用

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

除此之外，如果您想永久禁用 FOUC，请添加

body {
  overflow:hidden;
}

到首屏 CSS 并在 async CSS 中用

覆盖它

body {
  overflow:auto;
}

以上只是一个总结。如果您感兴趣，这里有一个关于该方法的完整 post：Modern Asynchronous CSS Loading，还包含一个用于 non-supporting 浏览器的 polyfill。

This may not look like a big improvement over other approaches, but one advantage that rel="preload" brings is that supporting browsers will start downloading the file earlier than they would with say, a stylesheet with a non-matching media value.

另请阅读 Preloading content。对 rel="preload" 的支持仅限于 Chrome、Opera 和 Safari，但随后会支持更多（尤其是 Firefox v59）。此外，不支持 并不意味着它不起作用。这仅意味着使用 non-existent rel 类型没有任何改进。

Answer 2

试试这个：

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

Answer 3

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

例如：

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

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

Load CSS only when template is completely done rendering

css

jquery

render-blocking