根据Google Page Speed Insights，我有一个指向boostrap样式表cdn的链接，导致一些渲染阻止问题正在执行我的网站性能。我解决了这个问题，只需要在fold bootstrap css上面获取所需的内容并将其放在'critic_bootstrap.css'文件中。当页面完全呈现时，我确实想要为所有其他不在首页的样式加载该引导程序CDN。我怎么能做到这一点？我尝试在jquery document.ready函数中将它附加到我的文档的头部，但它似乎仍然导致PSI渲染阻塞问题，直到在呈现页面之前加载。
答案 0 :(得分：1)
使用
<link rel="preload" href="mystyles.css" as="style" onload="this.rel='stylesheet'">
除此之外，如果要暂时禁用FOUC，请添加
body {
overflow:hidden;
}
到您的折叠CSS上方并使用
覆盖async CSS
body {
overflow:auto;
}
以上只是一个总结。如果您对这里感兴趣的是关于该方法的完整帖子：Modern Asynchronous CSS Loading，还包含非支持浏览器的polyfill。
这可能看起来不像其他方法有很大改进，但rel =“preload”带来的一个好处是，支持浏览器会比他们更早开始下载文件，例如，具有不匹配媒体价值的样式表
另请阅读Preloading content。对rel="preload"的支持仅限于Chrome，Opera和Safari，但会有更多支持（特别是Firefox v59）。此外，如果不支持，它并不意味着它不起作用。这只意味着使用不存在的rel类型没有任何改进。
答案 1 :(得分：1)
试试这个：
cmd答案 2 :(得分：1)
尝试在$(window).load()而不是$(document).ready()加载css。
表示实例：
$(window).load(function() {
$('head').append('<link rel="stylesheet" href="common.css" type="text/css" />');
});