Javascript 通过异步和延迟属性提高页面速度
我需要在我的网页中提高页面速度。我读了很多关于使用Javascript 通过异步和延迟属性提高页面速度,javascript,css,html,src,Javascript,Css,Html,Src,我需要在我的网页中提高页面速度。我读了很多关于使用async和defer属性来提高初始页面速度的文章。所有js脚本都是在标记上方定义的。请建议如何有效地在我的页面中使用这些属性 <html> <head> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <link rel="stylesheet" href="h
asyncdefer属性来提高初始页面速度的文章。所有js
脚本都是在
标记上方定义的。请建议如何有效地在我的页面中使用这些属性
<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代码无法按您希望的方式工作
如何有效地使用它们？
我不建议您使用async，因为它可能会因为文件大小和/或脚本（异步加载）而以任何顺序加载任何脚本，因此您的功能将受到阻碍
因此，只需使用defer来满足google页面速度的要求，这将按照您希望的顺序加载脚本
尽管使用“延迟”，您可能会对您的网站产生影响，因为您可能调用了一些脚本，这些脚本应该在文档准备就绪之前运行。在这种情况下，你不应该遵循谷歌页面速度的指示，所以就让它保持原样吧
最后，这取决于您和您的脚本。您不应该更改任何内容，也不应该使用延迟
Bootstrap
需要加载jQuery
（虽然这里不是真正加载引导，而是一些角度引导模板）。因此，您不能使用async
加载任何这些资源。此外，您正在加载大量的Angular
资源，这些资源依赖于主Angular.min.js
资源，因此在这里也不能使用async
您可以对所有页面使用defer
，但页面渲染速度不会更快。唯一的区别是，脚本将在全部加载后执行，而不是逐个执行（下载后执行），但这并不会改变页面加载时间。我的问题是在这种情况下如何有效地添加这些属性？我已经在body标记的末尾定义了所有js脚本。所以使用async或defer对页面速度有任何显著影响谷歌分析代码使用async是否更可取？@akhilviswam yes。你可以。但是要小心并测试自己，如果所有的东西都在工作…在上面的HTML中，我可以应用哪些脚本？