Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
355 views
in Technique[技术] by (71.8m points)

javascript - 脚本标记 - 异步和延迟(Script Tag - async & defer)

I have a couple of questions about the attributes async & defer for the <script> tag which to my understanding only work in HTML5 browsers.(我有几个关于<script>标签的asyncdefer属性的问题,据我所知,只能在HTML5浏览器中使用。)

One of my sites has two external JavaScript files that currently sit just above the </body> tag;(我的一个网站有两个外部JavaScript文件,目前位于</body>标记的上方;) the first is sourced from google and the second is a local external script.(第一个是来自谷歌的 ,第二个是本地外部脚本。) With respects to site load speed(关于网站加载速度) Is there any advantage in adding async to the two scripts I have at the bottom of the page?(将async添加到页面底部的两个脚本中是否有任何优势?) Would there be any advantage in adding the async option to the two scripts and putting them at the top of the page in the <head> ?(将async选项添加到两个脚本并将它们放在<head>页面的顶部是否有任何优势?) Would this mean they download as the page loads?(这是否意味着他们下载页面加载?) I assume this would cause delays for HTML4 browsers, but would it speed up page load for HTML5 browsers?(我认为这会导致HTML4浏览器的延迟,但是它会加速HTML5浏览器的页面加载吗?) Using <script defer src=...(使用<script defer src=...) Would loading the two scripts inside <head> with the attribute defer the same affect as having the scripts before </body> ?(使用属性加载<head>的两个脚本是否会defer</body>之前的脚本相同的影响?) Once again I assume this would slow up HTML4 browsers.(我再次假设这会降低HTML4浏览器的速度。) Using <script async src=...(使用<script async src=...) If I have two scripts with async enabled(如果我有两个启用了async脚本) Would they download at the same time?(他们会同时下载吗?) Or one at a time with the rest of the page?(或者与页面的其余部分一次一个?) Does the order of scripts then become a problem?(脚本的顺序是否会成为问题?) For example one script depends on the other so if one downloads faster, the second one might not execute correctly etc.(例如,一个脚本依赖于另一个脚本,因此如果下载速度更快,则第二个脚本可能无法正确执行等。) Finally am I best to leave things as they are until HTML5 is more commonly used?(最后,我最好保留原样,直到HTML5更常用?)   ask by Adam translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

This image explains normal script tag, async and defer(此图像解释了正常的脚本标记,异步和延迟)

在此输入图像描述 Async scripts are executed as soon as the script is loaded, so it doesn't guarantee the order of execution (a script you included at the end may execute before the first script file )(加载脚本后立即执行异步脚本,因此不保证执行顺序(最后包含的脚本可能在第一个脚本文件之前执行)) Defer scripts guarantees the order of execution in which they appear in the page.(延迟脚本保证它们在页面中出现的执行顺序。) Ref this link : http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html(参考此链接: http//www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html)

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...