如何使用 jQuery 加载外部 css

Question

我使用 jQuery 加载外部 css 文件，但 Google Page Speed 显示消除阻塞 css。

索引.html。我把库的链接和javascript文件的链接放在了：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js" defer></script>
<script src="general.js" defer ></script>

general.js。我加载css：

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

CSS 运行良好。但谷歌页面速度仍然说 消除首屏内容中的渲染阻塞 JavaScript 和 CSS。您的页面有 1 个阻塞的 CSS 资源。https://www.example.com/style.css 这会导致您的页面呈现延迟。

我应该如何使用外部 css 的链接来获得良好的页面速度并通过 Google Page Speed 测试？

Answer 1

如果您只是像这样在标头中包含 css 文件：

<link href="style.css" type="text/css" rel="stylesheet" />

谷歌速度还抱怨吗？

发生阻塞是因为您使用 jQuery 动态加载它。在较慢的连接上，这可能会阻止文件的执行（并且您的样式不会被加载）。

如果这没有帮助，您仍然可以在页面的关闭 </body> 之前移动 jQuery sn-p。 不确定谷歌是否会接受它作为解决方案，但毕竟页面加载速度会更快。