首页 > 试题广场 >

HTML的script标签,按规范defer和async属性

[单选题]
HTML的script标签,按规范defer和async属性说法正确的是?
  • async属性的脚本加载和执行不会阻塞页面的渲染
  • defer属性无法保证多脚本的执行顺序
  • async属性的脚本会在加载完毕后立即执行
  • defer属性脚本会在DOMContentLoaded事件触发后立即执行

defer

defer 特性告诉浏览器不要等待脚本。相反,浏览器将继续处理 HTML,构建 DOM。脚本会“在后台”下载,然后等 DOM 构建完成后,脚本才会执行。

换句话说:

  • 具有 defer 特性的脚本不会阻塞页面。

  • 具有 defer 特性的脚本总是要等到 DOM 解析完毕,但在 DOMContentLoaded 事件之前执行。

  1. 页面内容立即显示。

  2. DOMContentLoaded 事件处理程序等待具有 defer 特性的脚本执行完成。它仅在脚本下载且执行结束后才会被触发。

  3. defer 特性除了告诉浏览器“不要阻塞页面”之外,还可以确保脚本执行的相对顺序。因此,即使 small.js 先加载完成,它也需要等到 long.js 执行结束才会被执行。

    当我们需要先加载 JavaScript 库,然后再加载依赖于它的脚本时,这可能会很有用。

    如果 <script> 脚本没有 src,则会忽略 defer 特性。


sync

async 特性意味着脚本是完全独立的:

  • 浏览器不会因 async 脚本而阻塞(与 defer 类似)。

  • 其他脚本不会等待 async 脚本加载完成,同样,async 脚本也不会等待其他脚本。

  • DOMContentLoaded

    和异步脚本不会彼此等待:

    • DOMContentLoaded 可能会发生在异步脚本之前(如果异步脚本在页面完成后才加载完成)

    • DOMContentLoaded 也可能发生在异步脚本之后(如果异步脚本很短,或者是从 HTTP 缓存中加载的)
我个人认为defer和async的区别在于前者加载的脚本的顺序是同步的,后者则是异步的。
A选项中执行是有可能阻塞页面的渲染的,加载不会(应该是这样的)

编辑于 2021-06-24 16:01:25 回复(0)
简单,明了
https://blog.csdn.net/qq_53701739/article/details/123167847?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165225421716782391899816%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=165225421716782391899816&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-8-123167847-null-null.142^v9^pc_search_result_cache,157^v4^control&utm_term=%E5%BB%B6%E8%BF%9F%E5%8A%A0%E8%BD%BDjs%E6%9C%89%E5%93%AA%E4%BA%9B%E6%96%B9%E5%BC%8F&spm=1018.2226.3001.4187
发表于 2022-05-11 15:31:47 回复(0)
1 async 脚本下载完成后会立即执行 并且是无序的2 defer 脚本的执行是可以保证顺序的3 defer 在domcontentload前执行 构建dom树完成 出发此事件 页面文档加载完成 出发load事件
发表于 2021-08-31 13:14:09 回复(0)
在浏览器加载HTML过程中,HTML 解析器运行于主线程之中,并且在遇到 </script> 标签后会被阻塞,直到脚本从网络中被获取和执行。也就是说<script>标签中的脚本会阻塞浏览器的渲染,这样也被称为“渲染阻塞”。
要等JavaScript代码加载并执行完毕后才能渲染页面结构。但是不同的是,HTML解析过程与外部JS代码的解析过程分离开来了
Async是在外部JS加载完成后,浏览器空闲时,Load事件触发前执行;而Defer是在JS加载完成后,整个文档解析完成后执行。
Defer更像是将<script>标签放在</body>之后的效果,但是它由于是异步加载JS文件,所以可以节省时间。

发表于 2021-04-20 15:40:00 回复(0)