📜  解释异步与延迟 JavaScript

📅  最后修改于: 2022-05-13 01:56:45.836000             🧑  作者: Mango

解释异步与延迟 JavaScript

通常,当我们使用脚本标签加载任何 JavaScript 代码时,浏览器会在遇到脚本标签时暂停 HTML 解析,并首先开始下载 JavaScript 文件。在浏览器完成下载脚本并执行它之前,不会执行 HTML 元素脚本标记。浏览器等待脚本被下载、执行,然后处理页面的其余部分。

在现代浏览器中,脚本往往比 HTML 文件大,因此它们的下载量很大,处理时间也会更长。这会增加页面的加载时间并限制用户浏览网站。为了解决这个问题,异步和延迟属性开始发挥作用。

语法:一个普通的脚本以下列方式包含在页面中。

当 HTML 解析器找到此元素时,会向服务器发送请求以获取脚本。

异步:当我们使用 async 属性时,脚本会与页面的其余部分异步下载,而不会暂停 HTML 解析,并且会处理和显示页面的内容。下载脚本后,将暂停 HTML 解析并执行脚本。执行完成后,HTML 解析将恢复。页面和其他脚本不会等待异步脚本,异步脚本也不会等待它们。它非常适合独立脚本和外部脚本。

  • 句法:

Deferred: defer 属性告诉浏览器不要干扰 HTML 解析,只有在 HTML 文档被完全解析后才执行脚本文件。每当遇到具有此属性的脚本时,脚本的下载都会在后台异步开始,当脚本下载时,只有在 HTML 解析完成后才会执行。

  • 句法:

异步与延迟:

AsynchronousDeferred
Asynchronous blocks the parsing of the page.Deferred never block the page.
Asynchronous scripts don’t wait for each other. So if a smaller script is second in the order, it will be loaded before the previous longer one.Deferred scripts maintain their relative order which means the first script will be loaded first while all other below it will have to wait.
The execution of scripts begins by pause parsing.However, the execution of scripts begins only after parsing is completely finished but before the documents’s DOMContentLoadedevent.