gpt4 book ai didi

javascript - 通过异步和延迟属性提高页面速度

转载 作者:太空宇宙 更新时间:2023-11-04 14:58:46 26 4
gpt4 key购买 nike

我的网页需要提高页面速度。我阅读了很多关于使用 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>

最佳答案

使用延迟:

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

使用异步:

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

什么时候使用 defer/async?

如果您需要异步加载脚本,即。在加载 html 和 css 时,具有 asyc 属性的脚本将使浏览器在后台加载它们,即。它们将在其他东西工作时加载。

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

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

如何有效地使用它们?

我不建议您使用异步,因为由于文件大小和/或脚本(因为它异步加载),它可能以任何顺序加载任何脚本,因此您的功能会受到阻碍。

因此,只需根据谷歌页面速度使用延迟来满足要求,这将按照您希望的顺序加载脚本。

尽管使用延迟,您可能会对您的网站产生影响,因为您可能已经调用了一些本应在文档准备好之前运行的脚本。在这种情况下,您不应该遵循 google 页面速度的指示,让它保持原样。

最后,这取决于您和您的脚本。

关于javascript - 通过异步和延迟属性提高页面速度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37389161/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com