js文件同步和异步的引入问题

文章目录

  • 同步加载和异步加载
  • JS模块的加载方法
    • CommonJS
    • ES6
    • ES6的`<script>`标签的加载方式

同步加载和异步加载

  • 同步加载:同步加载是指在主线程上按顺序执行代码,当遇到加载资源(例如网络请求、读取文件)时,主线程会停止执行后续的代码,等待资源加载完成后再接着执行后续的代码。这样的方式可能会导致用户体验不佳,因为当资源加载耗时长时,用户需要等待较长时间才能看到后续的处理结果。
  • 异步加载:异步加载则不会阻塞主线程,它会在后台加载资源,同时主线程还会继续执行后续的代码。当资源加载完成后,通常通过回调函数或者Promise(.then方法)来获取资源,并对其进行处理。这样的方式可以避免阻塞主线程,提升用户体验。

异步加载就是多个资源同时加载,同步加载就是同一时刻只加载一个资源。
JavaScript中,由于它的单线程特性,通常推荐使用异步加载的方式来处理网络请求、文件操作等耗时操作。

JS模块的加载方法

CommonJS

使用CommonJS规范require()函数加载模块是同步的,也就是说在加载完模块之前,后续代码不会执行。这在服务器端环境中非常有用,因为模块文件通常都已经在本地,加载很快,而且一般需要在服务器启动时加载所有必要的模块。

ES6

ES6的模块既可以使用同步加载也可以使用异步加载,取决import的使用方式:

  • 同步加载:同步加载是使用import的静态导入方式,结合from使用 :
    静态加载没有返回值,静态加载是一个语句,

    import module from 'module-name';
    

    在module模块加载完成之前是不会执行下面的代码的,所以在模块导入后的所有地方都可以直接使用该模块。

  • 异步加载:异步加载是使用import的动态导入方式,模块作为import的参数使用(可以是路径名也可以是模块名):
    动态加载的返回值是一个Promise对象,所以可以直接使用.then函数编写回调函数

    import('module-name').then((module) => {// 你可以在这里使用模块
    });
    

    也可以使用async/await语法,

    async function loadModule() {try {const module = await import('module-name');// 使用这个模块} catch (error) {// 处理加载错误}
    }
    

ES6的<script>标签的加载方式

  • <script >导入 —— 同步加载
    <script src="">标签并不是使用模块化的导入导出方式,可以使用该标签加载执行JS文件,但是其中所有的变量和函数都会在全局作用域中。
    <script src="">的导入方式是同步导入。当解析到<script src=“”>的时候会暂停解析HTML,去下载javascript文件,等文件下载完成之后再继续解析剩余的HTML文件。

  • <scrtpt type="module">导入 —— 异步加载
    使用这种方式导入的文件是异步导入,使用<scrtpt type="module">导入的时候浏览器会采用严格模式,并且模块会自动地被异步加载

    <script type="module">import {foo} from './foo.js';foo();
    </script>
    

    或者使用src导入文件:

    <script type="module" src="./main.js"></script>
    

    main.js

    import {foo} from './foo.js';
    foo();
    
  • <script src=“”>的异步加载
    可以在<script>标签中添加asyncdefer属性来使文件异步加载。

    • async 属性:这会使得浏览器非阻塞(异步)地下载 JavaScript 文件,但是一旦文件下载完成,浏览器会立刻解析并执行这个文件,这导致了 HTML 的解析可能会被暂时阻塞。多个包含 async 属性的 <script> 标签,它们的执行顺序无法保证,完全由加载完成的时间顺序决定。

    • defer 属性:这也会使得浏览器非阻塞(异步)地下载 JavaScript 文件,但是与 async 不同的是,包含 defer 属性的 <script> 标签会在整个 HTML 文档解析完成之后才开始执行。如果有多个包含 defer 属性的 <script> 标签,它们的执行顺序会按照在 HTML 文件中的出现顺序来执行。

  • <script>标签异步引入的时候如何判断模块加载完成
    使用<script src="">标签的异步引入,不像直接在js模块中的异步引入可以使用回调函数和Promise来编写异步模块加载完成之后的逻辑,但是我们有其他的解决办法:

    • 使用事件监听器

      <script>
      document.querySelector('script[src="script.js"]').addEventListener('load', function() {// script.js文件加载完成之后执行的逻辑代码
      });
      </script>
      <script async src="script.js"></script>
      
    • 使用onload事件监听

      <script type="module" src="./main.js" onload="init()"></script>
      <script>function init() {// main.js 已加载完毕,你可以在这里使用它导出的函数和变量}
      </script>
      
    • 如果被异步加载的文件可以手动编写,可以使用设置全局回调函数的方式:

      <script>
      window.scriptLoaded = function() {//  script.js文件加载完成之后执行的逻辑代码
      };
      </script>
      <script async src="script.js"></script>
      

      然后在 script.js 中的最后一行调用 scriptLoaded 函数:

      // script.js文件的逻辑代码
      window.scriptLoaded();
      
    • 如果是<script type="module">逻辑代码</script>的方式,可以直接使用动态import的特性

      <script type="module">
      import('script.js').then((module) => {//  script.js文件加载完成之后执行的逻辑代码
      });
      </script>
      

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/776183.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

循序渐进丨MogDB 对 Oracle DBLink兼容性增强

本特性自 MogDB 5.0.0版本开始引入&#xff0c;支持 Oracle DBLink语法&#xff0c;可以使用符号访问 Oracle 数据库中的表。 示 例 01 环境准备 MogDB 环境 已安装 MogDB 数据库。已安装oracle_fdw插件&#xff0c;具体安装方法参见oracle_fdw安装文档https://docs.mogdb.io/…

自定义你的商店 – 设计WooCommerce商店的新方法

WooCommerce 8.8即将推出&#xff0c;带来了一种无需代码即可创建精美商店的新方法。向“自定义你的商店”问好&#xff0c;这是一项全新功能&#xff0c;将取代“个性化你的商店”入门步骤。 自定义你的商店将利用最新的WordPress站点编辑工具以及酷炫的新Pattern Assembler …

誉天华为认证云计算课程如何

HCIA-Cloud Computing 5.0 课程介绍&#xff1a;掌握华为企业级虚拟化、桌面云部署&#xff0c;具备企业一线部署实施及运维能力 掌握虚拟化技术、网络基础、存储基础等内容&#xff0c;拥有项目实施综合能力 满足企业虚拟化方案转型需求&#xff0c;应对企业日益多样的业务诉求…

AtCoder - ABC 326 - D - ABC Puzzle (DFS)

看了很多题解都是写了一大坨&#xff0c;看起来非常的混乱&#xff0c;然而自己去写的时候又不可避免的写了一坨&#xff0c;只能尽可能的去优化代码可读性。 Time Limit: 4 sec / Memory Limit: 1024 MB 问题陈述 给你一个整数 N N N 和长度为 N N N 的字符串 R R R 和 …

763. 划分字母区间(力扣LeetCode)

763. 划分字母区间 题目描述 给你一个字符串 s 。我们要把这个字符串划分为尽可能多的片段&#xff0c;同一字母最多出现在一个片段中。 注意&#xff0c;划分结果需要满足&#xff1a;将所有划分结果按顺序连接&#xff0c;得到的字符串仍然是 s 。 返回一个表示每个字符串…

Web开发基本流程

Web是全球广域网&#xff0c;能够通过浏览器访问的网站。我们要访问网站&#xff0c;首先要在浏览器输入对应的域名。 浏览器也是一个程序&#xff0c;京东的网站也是一个程序&#xff0c;在京东那边电脑运行着&#xff0c;我们只是通过浏览器远程访问。京东的程序由三个部分组…

【题目】【网络系统管理】2022 年全国职业院校技能大赛 网络系统管理赛项 模块 A:网络构建

2022 年全国职业院校技能大赛 网络系统管理赛项 模块 A&#xff1a;网络构建 目录 考试说明 … 3 任务描述 … 3 任务清单 … 3 &#xff08;一&#xff09;基础配置 … 3 &#xff08;二&#xff09;有线网络配置 … 4 &#xff08;三&#xff09;无线网络配置 … 5 &…

深入解析MD5哈希算法:原理、应用与安全性

码到三十五 &#xff1a; 个人主页 心中有诗画&#xff0c;指尖舞代码&#xff0c;目光览世界&#xff0c;步履越千山&#xff0c;人间尽值得 ! 本文将深入探讨MD5哈希算法的工作原理、应用场景以及安全性问题。我们将了解MD5如何生成固定长度的哈希值&#xff0c;以及它在数…

PHiSeg:捕捉医学图像分割中的不确定性

PHiSeg&#xff1a;捕捉医学图像分割中的不确定性 摘要引言方法 PHiSeg Capturing Uncertainty in Medical Image Segmentation 摘要 解剖结构和病理的分割本质上是模糊的。例如&#xff0c;结构边界可能不清晰可见&#xff0c;或者不同的专家可能具有不同的注释风格。大多数当…

C++ 之多态虚函数原理及应用

文章目录 多态基本概念和原理虚函数的基本原理和概念虚析构和纯虚析构多重继承中的虚函数小结 多态基本概念和原理 多态的基本概念 **多态是C面向对象三大特性之一** 多态的定义 多态是一种面向对象编程概念&#xff0c;指同一个行为&#xff08;方法&#xff09;在不同的对象上…

Java上机实验报告(4)

实验 &#xff08;4&#xff09; 项目名称&#xff1a;子类与继承-求圆柱和圆锥 一、 实验报告内容一般包括以下几个内容&#xff1a; 实验项目名称 实验4 子类与继承-求圆柱和圆锥实验目的和要求 本实验的目的&#xff1a; &#xff08;1&#xff09;掌握&#xff08;继承&a…

JavaScript 定时器详解

定时器 ​ JavaScript 在浏览器中是单线程执行的&#xff0c;但允许使用定时器指定在某个时间之后或每隔一段时间就执行相应的代码。setTimeout() 用于指定在一定时间后执行某些代码&#xff0c;而 setInterval() 用于指定每隔一段时间执行某些代码。 setTimeout() 方法 ​ …

【前端学习——js篇】5.事件循环

详细&#xff1a;https://github.com/febobo/web-interview 5.事件循环 js是一种单线程语言&#xff0c;同一时间内只能做一件事情&#xff0c;为了避免单线程阻塞的方法就是事件循环。 在javascript当中&#xff0c;所有的任务都可以分为&#xff1a; 同步任务&#xff1a;按…

Windows10 Version22h2 补丁kb5034441更新失败

By wdhuag 20240328 参考: Windows10安装KB5034441更新报错0x80070643_2024-01 适用于 windows 10 version 22h2 安全更新,适合基于 x64 -CSDN博客 windows10&#xff08;KB5034441&#xff09;更新失败报错 0x80070643解决方法_kb5034441更新失败-CSDN博客 如何修复 Windo…

07|Java IO流与网络编程入门教程:通俗易懂,实例丰富

一、IO流概念与应用 什么是IO流? 想象一下水管流水,水从一端流入流出的过程就像是数据在程序中的传输。在Java世界里,IO流就是这样一个抽象概念,它是数据在不同存储介质或网络之间传输的一种方式。简单来说,如果你把数据看作水流,那么IO流就是承载这个水流的管道,它可以…

01.ArcEngine中IField的属性详细描述

目录 0.代码样例 1. AliasName 2.CheckValue 3.DefaultValue 4.Domain 5.DomainFixed 6.Editable 7.GeometryDef 8.IsNullable 9.Length 10.Name 11.Precision 12.Required 13.Scale 14.Type 15.VarType 0.代码样例 IFields fields featureclass…

双通道内存@DDR5多通道内存

文章目录 多通道内存DDR4及以前的内存的双通道DDR5往后的双通道和多通道半位宽4通道组合 其他组合测试 DDR5介绍概览重要Features特点 总结 多通道内存 DDR4及以前的内存的双通道 双通道内存是一种内存架构设计&#xff0c;通过在主板上配置两个或多个独立且同时工作的内存控制…

管理阿里云服务器ECS -- 网站选型和搭建

小云&#xff1a;我已经学会了如何登录云服务器ECS了&#xff0c;但是要如何搭建网站呢&#xff1f; 老王&#xff1a;目前有很多的个人网站系统软件&#xff0c;其中 WordPress 是使用非常广泛的一款&#xff0c;而且也可以把 WordPress 当作一个内容管理系统&#xff08;CMS…

使用yolov9来实现人体姿态识别估计(定位图像或视频中人体的关键部位)教程+代码

yolov9人体姿态识别&#xff1a; 相较于之前的YOLO版本&#xff0c;YOLOv9可能会进一步提升处理速度和精度&#xff0c;特别是在姿态估计场景中&#xff0c;通过改进网络结构、利用更高效的特征提取器以及优化损失函数等手段来提升对复杂人体姿态变化的捕捉能力。由于YOLOv9的…

架构师之路--docker命令实践整理

安装docker sudo yum remove docker docker-client docker-client-latest docker-common docker-latest docker-latest-logrotate docker-logrotate docker-engine sudo yum install -y yum-utils sudo yum-config-manager --add-repo http://mirrors.aliyun.com/…