akh*_*wam 2 javascript css html5 src
我需要在我的网页中提高页面速度.我阅读了很多关于使用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>
何时使用延迟/异步？
如果您需要异步加载脚本,即.在加载html和css时,带有asyc属性的脚本会让浏览器在后台加载它们,即.当其他东西工作时,它们将被加载.
如果你需要在完全加载html和css之后加载你的脚本,那么你可以使用defer属性.
所以,你需要小心使用这种技术,因为这些属性有些javascript代码可能无法按你希望的那样工作.
如何有效地使用它们？
我不建议您使用异步,因为它可能以任何顺序加载任何脚本,因为文件大小和/或脚本(因为它异步加载),因此您的功能将受到阻碍.
因此,只需按照谷歌页面速度使用延迟来满足要求,这将按照您希望的顺序加载脚本.
虽然,使用延迟,您可能会对您的网站产生影响,因为您可能已经调用了一些应该在文档准备好之前运行的脚本.在这种情况下,您不应该按照谷歌页面速度的说明,所以让它成为现实.
最后,它取决于您和您的脚本.
| 归档时间： |
|
| 查看次数： |
3725 次 |
| 最近记录： |