Question

我已经使用AngularJS构建了一个Jekyll博客，并且除了光滑的内容之外，还使用了它。滑块需要JQuery，所以我已经将它添加到我的应用程序中，但是我的角度脚本引用了它。因为这是人们第一眼看到我希望它首先加载但是我不太清楚如何做到这一点，因为如果我把它放在Angular脚本之前它就不会工作。我的脚本如下：

<script src="{{ site.baseurl}}/bower_components/angular/angular.min.js"></script>
<script src="{{ site.baseurl }}/bower_components/angular-animate/angular-animate.min.js"></script>
<script src="{{ site.baseurl }}/bower_components/angular-aria/angular-aria.min.js"></script>
<script src="{{ site.baseurl }}/bower_components/angular-material/angular-material.min.js"></script>

<script src="{{ site.baseurl }}/bower_components/jquery/dist/jquery.min.js"></script>
<script src="{{ site.baseurl }}/bower_components/slick-carousel/slick/slick.min.js"></script>
<script src="{{ site.baseurl }}/bower_components/angular-slick/dist/slick.min.js"></script>

<script src="{{ site.baseurl }}/js/app.module.js"></script>
<script src="{{ site.baseurl }}/js/app.controller.js"></script>

我添加了一个用于延迟加载的脚本，并将其放在关闭的body标签上方，如下所示：

<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "/js/defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

在我的defer.js文件中，我已经能够添加一些小脚本来帮助延迟加载社交按钮，但我仍然坚持如何使用它以便我的滑块是第一个加载的东西。我非常感谢任何人对此类问题的任何帮助或提示。如果您需要查看源代码，我的Github是Glasser88，该网站在Github Pages上托管为www.lifeofglass.com。先感谢您！

Answer 1

首先，Google会反对旋转木马，因为它们高于首屏，加载缓慢等等。但谷歌网页充其量只是功利，所以你可以在某种程度上忽略他们的劝告。

也就是说，考虑将所有那些.js文件合并到一个缩小的.js中，这应该会对您的加载时间产生重大影响。在构建快速应用程序时，.js文件的 number 通常比这些文件的 size 具有更大的影响。

如何消除上层内容中的渲染阻止JavaScript和CSS

1 个答案: