通过 async 和 defer 属性提高页面速度答案

【问题标题】：Improve page speed by async and defer attribute通过 async 和 defer 属性提高页面速度
【发布时间】：2017-01-11 00:55:36
【问题描述】：

我的网页需要提高页面速度。我阅读了很多关于使用async 和defer attribute 来提高初始页面速度的信息。所有js 脚本都在</body> 标记上方定义。请建议如何在我的页面中有效地使用这些属性？

<html>
<head>

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="/static/css/style/mystyle.css"> 


</head>
<body>
<!--HTML content-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-touch.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-cookies.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-route.min.js"></script>

google analytics script

</body>
</html>

【问题讨论】：

标签： javascript css html src

【解决方案1】：

使用延迟：

<script src="path" defer="defer"></script>

使用异步：

<script src="path" async="async"></script>

何时使用延迟/异步？

如果您需要异步加载脚本，即。在加载 html 和 css 时，带有 asyc 属性的脚本将使浏览器在后台加载它们，即。它们将在其他事情正常工作时被加载。

如果您需要在完全加载 html 和 css 后才加载脚本，那么您可以使用 defer 属性。

因此，由于这些属性，您需要小心使用此技术，因为某些 javascript 代码可能无法按您希望的那样工作。

如何有效地使用它们？

我不建议您使用异步，因为它可能会因为文件大小和/或脚本（因为它是异步加载）而以任何顺序加载任何脚本，因此您的功能会受到阻碍。

所以，只需使用延迟来满足谷歌页面速度的要求，它将按照您希望的顺序加载脚本。

尽管使用 defer，您可能会对您的网站产生影响，因为您可能调用了一些脚本应该在文档准备好之前运行。在这种情况下，你不应该按照谷歌页面速度的指示，让它成为它的样子。

最后，这取决于你和你的脚本。

【讨论】：

我的问题是在这种情况下如何有效地添加这些属性？我已经在 body 标记的末尾定义了所有 js 脚本。所以使用 async 或 defer 会对页面速度产生显着影响
对 Google 分析代码使用异步是否更可取？
@akhilviswam 是的。你可以。但要小心并测试自己是否一切正常......
在上面的 HTML 中我可以应用哪些脚本 defer？

【解决方案2】：

您不应更改任何内容或使用defer。

Bootstrap 需要加载 jQuery （尽管您在这里并没有真正加载 Bootstrap，而是一些 Angular-Bootstrap 模板）。所以你不能使用async 来加载任何这些资源。此外，您正在加载大量依赖于主要 angular.min.js 资源的 Angular 资源，因此您也不能在此处使用 async。

您可以使用defer，但页面渲染速度不会更快。唯一的区别是脚本将在全部加载后执行，而不是一个接一个（下载后执行），但这不会改变页面加载时间。

【讨论】：