首页 > 其他分享 >async与defer的区别

async与defer的区别

时间:2024-02-02 19:45:48浏览次数:29  
标签:脚本 defer 区别 页面 async 执行 加载

`async` 和 `defer` 是两种不同的JavaScript特性,它们的主要区别在于它们的执行顺序和时间点。

  • `async` 意味着函数或代码块会被异步执行。当浏览器遇到带有 `async` 属性的资源时,它会立即开始下载该资源,同时继续加载页面。这样可以避免由于同步执行而导致的页面加载阻塞问题。然而,由于 `async` 并不保证具体的执行时间,所以如果在 `async` 代码中修改了 DOM(文档对象模型),可能会出现错误,特别是在依赖外部资源的场景下。

  • `defer` 则是一种用于推迟执行的特性。它允许将脚本放置到页面的最后部分,直到其他所有资源都已加载完毕。这样确保了在执行 `defer` 代码之前,页面已经完全准备好,从而减少了潜在的错误风险。特别是对于那些依赖于外部资源的第三方脚本来说,使用 `defer` 可以提高应用的稳定性。

总结来说,`async` 更适合于不需要等待页面完整加载即可运行的第三方脚本,因为它提供了更高的灵活性,但可能伴随着一定的执行时机的不确定性。而 `defer` 则是为了确保页面加载完成后才执行脚本,减少因页面未加载完全而引发的错误。

标签:脚本,defer,区别,页面,async,执行,加载
From: https://www.cnblogs.com/ltwlh/p/18003735

相关文章

  • std::endl与"\n"区别
    使用std::endl插入到输出流中时,它不仅会在流中插入新的一行,还会强制刷新(flush)流的缓冲区。这意味着它会确保输出被立即写入到目标设备(例如终端或文件),而不是等待缓冲区被填满或显式刷新。使用'\n'字符在流中插入新行,但不会强制刷新缓冲区。这意味着如果有缓冲区,它可能会等......
  • 「效果图渲染」效果图与3D影视动画渲染区别
    效果图和3D动画渲染是图像渲染技术在各自领域的应用。效果图渲染常见于建造、室内布局以及产品设计等专业领域,其中对图像的准确性与细致程度有着较高的标准。相较之下,3D动画渲染更广泛地被运用于制作电影、电视节目、电子游戏和广告等娱乐媒介,不仅要处理更为动态和复杂的场景,还要......
  • 论虚拟机部署和容器化部署的隔离性区别
    虚拟机部署的隔离性相对容器化部署要好的原因主要涉及到虚拟机和容器技术的底层实现方式。完全隔离:虚拟机:虚拟机通过虚拟化技术模拟整个操作系统,每个虚拟机都有自己的内核、文件系统和网络栈。这意味着虚拟机之间的隔离性非常高,一个虚拟机的问题不会影响其他虚拟机。容器:容器......
  • java开发中业务层和数据层的区别
    其实标准业务层开发很多初学者认为就是调用数据层,怎么说呢?这个理解是没有大问题的,更精准的说法应该是组织业务逻辑功能,并根据业务需求,对数据持久层发起调用。有什么差别呢?目标是为了组织出符合需求的业务逻辑功能,至于调不调用数据层还真不好说,有需求就调用,没有需求就不调用。一个......
  • 工规和车规的简单区别
     车规级,即AutomotiveGrade,指要满足车载等级要求的元器件,AEC-Q系列标准是行业公认的车规元器件认证标准。AEC为美国汽车电子委员会(AutomotiveElectronicsCouncil),是由通用、福特和克莱斯勒为建立一套通用的零件资质及质量系统标准而设立,Q为Qualification的首字母,AEC-Q是AEC组......
  • 在 C# 中,`int[]`(数组)和 `List<int>`(列表)都可以用来存储一组整数,但它们有一些重要的区
    在C#中,int[](数组)和List<int>(列表)都可以用来存储一组整数,但它们有一些重要的区别:大小:int[]的大小在创建时就确定了,不能改变。而List<int>的大小是动态的,可以添加或删除元素,大小会自动调整¹。方法:List<int>提供了许多方便的方法,如Add、Remove、Insert等,而int[]没有这些方......
  • c# ref和out的区别
    前言ref和out的作用主要是解决函数内更改函数外变量的值ref和out关键字classProgrom{//在形参声明前加关键字refstaticvoidTestRef(refintv){v=10;}staticvoidTestOut(outintv){v=10;}staticvoidM......
  • illustrator的钢笔工具和photoshop的主要区别
    Illustrator和Photoshop是Adobe公司推出的两款常用的图形设计软件,它们都具有钢笔工具,但在使用和功能上有一些区别。Illustrator中的钢笔工具:矢量图形:Illustrator是基于矢量的图形设计软件,因此钢笔工具主要用于创建矢量路径,这意味着你可以随时调整路径的形状而不会失真。路......
  • 什么是多态?它和重载有什么区别?
    ​前言大家好,我是chowley,相信学过编程语言的你,肯定听说过多态和重载两个概念,可多数人对他们之间的区别还是不太清晰,导致同时听到两个词一起出现时会大脑空白,今天我就来详细的介绍一下二者的区别,请准备好笔记,我们即刻出发!多态1.定义多态是指同一操作或方法在不同的对象上有不......
  • ajax与action,WordPress主题开发之wp_ajax_{$action}和wp_ajax_nopriv_{$action}的区
    wp_ajax_{$action}和wp_ajax_nopriv_{$action}是WordPress主题开发常用的函数,这两个函数经常用在ajax交互功能上。例如ajax表单登录,ajax提交表单等。本篇文章主要讲述了wp_ajax_{$action}和wp_ajax_nopriv_{$action}之间的区别。WordPress中AJAX请求方式在说wp_ajax_{$action}......