脚本标签-异步和延迟

我有几个关于<script>标签的async和defer属性的问题，据我的理解，它只在HTML5浏览器中工作。

我的一个站点有两个外部JavaScript文件，目前位于</body>标记上方;第一个是来自谷歌的jquery，第二个是一个本地外部脚本。

在网站加载速度方面

在我在页面底部的两个脚本中添加async是否有任何优势? 在这两个脚本中添加async选项并将它们放在<head>的页面顶部是否有任何优势? 这是否意味着他们会在页面加载时下载? 我认为这会导致HTML4浏览器的延迟，但是它会加速HTML5浏览器的页面加载吗?

使用<script defer src=…

在<head>中加载带有属性的两个脚本是否与在</body>之前加载脚本具有相同的影响? 同样，我认为这会降低HTML4浏览器的速度。

使用<script async src=…

如果我有两个脚本异步启用

他们会同时下载吗? 还是一页一页地看? 脚本的顺序会成为问题吗?例如，一个脚本依赖于另一个脚本，所以如果一个脚本下载得更快，第二个脚本可能无法正确执行等等。

最后，在HTML5得到更广泛的应用之前，我是否应该保持现状?

当前回答

HTML5:异步，延迟

在HTML5中，你可以告诉浏览器什么时候运行JavaScript代码。有三种可能:

<script       src="myscript.js"></script>

<script async src="myscript.js"></script>

<script defer src="myscript.js"></script>

没有async或defer，浏览器会立即运行你的脚本，在呈现脚本标签下面的元素之前。使用async(异步)，浏览器将继续加载HTML页面并在浏览器加载和执行脚本的同时呈现它。使用defer，浏览器将在页面完成解析时运行您的脚本。(没有必要下载完所有图像文件。这很好。)

2013-10-24 03:47:55

其他回答

Default - By default, as soon as the browser sees a script tag it downloads the file and then executes the script file. The script files are executed in the order of their occurrence. async - The browser will download the script file and continue parsing HTML parallelly until the file is downloaded. The file is executed as soon as it is downloaded. defer - The browser will download the script and do HTML parsing at the same time. After parsing is done, the script files are executed in the order of their occurrence.

注意: 在defer中，js文件按照它们在HTML文件中出现的顺序执行，而在async属性的情况下，脚本文件按照下载时间的顺序执行。

2022-12-18 17:03:16

这张图片解释了正常的脚本标签，异步和延迟

异步脚本在加载脚本时立即执行，因此不能保证执行的顺序(在 end可能在第一个脚本文件之前执行) 延迟脚本保证了它们出现的执行顺序在页面中。

参考这个链接:http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

2016-09-26 19:37:39

保持你的脚本在</body>之前。Async可以在一些情况下与位于那里的脚本一起使用(参见下面的讨论)。延迟不会对位于那里的脚本产生太大影响，因为DOM解析工作基本上已经完成了。

这里有一篇文章解释了async和defer的区别:http://peter.sh/experiments/asynchronous-and-deferred-javascript-execution-explained/。

如果你把脚本放在正文的末尾</body>之前，你的HTML在旧的浏览器中会显示得更快。所以，为了保持旧浏览器的加载速度，你不希望把它们放在其他地方。

如果你的第二个脚本依赖于第一个脚本(例如，你的第二个脚本使用了第一个脚本中加载的jQuery)，那么如果没有额外的代码来控制执行顺序，你就不能使它们异步，但是你可以使它们延迟，因为延迟脚本仍然会按顺序执行，只是直到文档被解析之后。如果您有这些代码，并且不需要立即运行脚本，则可以将它们设置为异步或延迟。

你可以把脚本放在<head>标签，并将它们设置为延迟，脚本的加载将被延迟，直到DOM被解析，这将在支持延迟的新浏览器中获得快速页面显示，但在旧的浏览器中，这对你没有任何帮助，它并没有比把脚本放在</body>之前更快，这在所有浏览器中都有效。所以，你可以明白为什么最好把它们放在</body>之前。

当你真的不关心脚本何时加载，并且没有其他用户依赖于脚本加载时，Async更有用。最常被引用的使用async的例子是像谷歌analytics这样的分析脚本，你不希望等待任何东西，也不急于很快运行，它是独立的，所以没有其他东西依赖于它。

通常，jQuery库不是async的最佳候选，因为其他脚本依赖于它，并且您希望安装事件处理程序，以便您的页面可以开始响应用户事件，并且您可能需要运行一些基于jQuery的初始化代码来建立页面的初始状态。它可以异步使用，但其他脚本必须被编码为在加载jQuery之前不执行。

2012-05-29 23:45:32

好的做法是将所有文件保存在源文件夹中，以便快速加载源文件。你需要下载所有的脚本，样式，图标和图像相关的文件，并把这些文件放入你的项目文件夹。

在项目中创建这些文件夹以保存不同的源文件，然后从这些文件夹中将所需的文件加载到页面中。

Js:保存脚本相关文件。

Css:保存与样式相关的文件。

Img:保存图像/图标相关文件

字体:保存字体相关文件

何时使用defer和async属性

defer属性:首先下载脚本文件，然后等待html解析。html解析结束后，脚本将执行。换句话说，它将保证在html解析之后执行所有脚本。

当脚本用于DOM操作时，Defer属性非常有用。意味着脚本将应用于文档html。

async属性:它将下载脚本文件并执行，而不等待html解析结束。换句话说，它不能保证在html解析之后执行所有脚本。

当脚本不用于DOM操作时，Async属性非常有用。有时，您只需要脚本进行服务器端操作或处理缓存或cookie，而不需要用于DOM操作。意味着脚本与所使用的html无关。

使用defer和async时的有用链接: https://stackoverflow.com/a/68929270/7186739

2021-08-27 18:37:06

如果您的脚本不包含DOM操作，而其他脚本不依赖于此，则Async是合适的。例如:bootstrap cdn,jquery

如果您的脚本包含DOM操作，而其他脚本依赖于此，那么Defer是合适的。

例如:<script src= " createfirst.js " > //让这将创建元素<script src= " showfirst.js " > //在createfirst创建元素后，它将显示。

这样就可以: 例如:<script defer src= " createfirst.js " > //let this will create element <script defer src= " showfirst.js " > //在createfirst.js创建元素后，它将

这将按顺序执行脚本。

但如果我做出: 例如:<script async src= " createfirst.js " > //let this will create element <script defer src= " showfirst.js " > //在createfirst.js创建元素后，它将

然后，这段代码可能会产生意想不到的结果。因为:如果html解析器访问createfirst脚本。它不会停止创建DOM，而是开始从src下载代码。一旦src被解析/代码被下载，它将立即与DOM并行执行。

如果showfirst.js比createfirst.js先执行，这可能是可能的，如果createfirst需要很长时间(假设在DOM解析结束后)。然后，showfirst将立即执行。

2021-01-28 11:24:54

脚本标签-异步和延迟

推荐文章

最新文章

标签