如何异步加载CSS和JavaScript

Question

好的，我怎样才能使用loadCSS（ https://github.com/filamentgroup/loadCSS/blob/master/README.md ）来允许浏览器异步加载CSS和JavaScript？

我头上有这个标签：

<link rel="preload" href="http://zoidstudios.com/assets/css/main.css" as="style" onload="this.rel='stylesheet">
<noscript><link rel="stylesheet" href="http://zoidstudios.com/assets/css/main.css"></noscript>

这在我的html文件的底部：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://use.fontawesome.com/eb515f50a5.js"></script>
<script src="http://zoidstudios.com/assets/js/functions.min.js"></script>
<script src="http://zoidstudios.com/assets/js/loadcss.min.js"></script>

<script>
    loadCSS( "http://zoidstudios.com/assets/css/main.css" );
</script>

Answer 1

你有没有看过像RequireJS或webpack这样的加载器？ 大多数加载器本身都支持CSS和/或提供CSS插件来异步加载CSS，JS等，同时确保依赖性。 如果您要加载许多文件，我建议您查看您喜欢的加载程序。

Answer 2

问题不在于CSS。 如果PageSpeed认为您的页面加载陷入困境，则可能是<body>标记末尾的所有<script>标记的结果。 仅仅因为它们被放置在body标签中并不意味着它们是异步的。

您可以将它们全部保留在<head>标记中。 您可以包含属性async或defer以获取异步加载：请查看此说明。

所以，这样的事情应该做：

<script
    src="http://zoidstudios.com/assets/js/functions.min.js"
    defer>
</script>

请注意，如果任何这些脚本期望解析DOM（即，他们希望某些元素已经存在），则应使用defer而不是async ，如链接文章中所述。 或者，您可以将它们保留在<body>标记中，并使用async 。

更新

如果我的假设是正确的（PageSpeed不支持<link>标签上的rel='preload' ），请注意您的问题中链接的文档建议您

包括loadCSS脚本，以及页面中的loadCSS rel = preload polyfill脚本（内联立即运行，如果CSS是低优先级，则在外部文件中）

您可以使用推荐的polyfill消除最终警告。

一般问题，“我如何异步加载CSS？” 已经在StackOverflow上被多次询问和回答，因为我相信你知道！

如何异步加载CSS和JavaScript

问题描述

2 个解决方案

解决方案1
1 2016-08-01 20:03:21

解决方案2
0 2016-08-01 21:20:40

更新

如何异步加载CSS和JavaScript

问题描述

2 个解决方案

解决方案1 1 2016-08-01 20:03:21

解决方案2 0 2016-08-01 21:20:40

更新

解决方案1
1 2016-08-01 20:03:21

解决方案2
0 2016-08-01 21:20:40