前端 JS 经典:浏览器中 ESModule 的工作原理

news/2024/7/20 17:00:12/文章来源:https://blog.csdn.net/weixin_64684095/article/details/139280764

前言:在开发中,我们经常写出如下代码。这就是 ES 模块化。那浏览器是如何运行的,它的运作机制到底是怎么样的呢。

在 index.html 导入 main.js

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

在 main.js 中导入 bar.js

import bar from "./bar.js";

在 bar.js 中导入 foo.js 然后动态导入 async.js

import foo from "./foo.js";import("./async.js").then((e) => {});

首先浏览器使用 ESModule 导入了 main.js,在这 main.js 里面又间接或直接导入了其他的 js。形成了模块化的依赖。

在浏览器导入 main.js 时,会做第一件事,模块化的解析,这不是 js 运行哦!那怎么来做解析呢,首先把这个 url 地址补全,因为现在是相对路径,然后去下载相应模块,拿到这个模块里面的代码,然后继续解析这个模块里面的代码,会拿到这个模块里所有的顶级静态导入语句。那什么是顶级静态导入语句勒,顶级是写在最上面的导入,静态就是,不是写在判断或循环里面的导入。比如 import bar from "./bar.js" 这种。

解析结束后,就会进行下一个阶段,模块的执行。怎么执行呢,回到入口文件,先执行第一行,如果是 import,就会进入到 from 导入的 js 里,又去执行 js 里面的代码,一直循环。执行结束后,会导出一个东西,导出后,浏览器会在内部生成一个映射表,为什么要做映射呢,是为了缓存,将来还有别的模块使用映射表里的模块,就直接从这个表格获取东西交给他了。

然后遇到动态导入语句,动态导入语句是在执行的时候导入,然后解析,得到完整的 url 地址,然后去下载这个 js。继续解析。

这就是浏览器 ESModule 的运行机制。

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

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

相关文章

精通推荐算法7:多任务学习 -- 总体架构

1 多任务学习的总体架构 目前的互联网主流推荐场景在大多数情况下需要优化多个业务目标。例如在淘宝商品推荐中&#xff0c;需要兼顾点击率和转化率。在抖音短视频推荐中&#xff0c;需要考虑完播率、播放时长、点赞率、评论率、关注率等目标。为了提升各项业务目标&#xff0…

【全开源】Java养老护理助浴陪诊小程序医院陪护陪诊小程序APP源码

打造智慧养老服务新篇章 一、引言&#xff1a;养老护理的数字化转型 随着老龄化社会的到来&#xff0c;养老护理需求日益凸显。为了更好地满足老年人及其家庭的需求&#xff0c;我们推出了养老护理助浴陪诊小程序系统源码。该系统源码旨在通过数字化技术&#xff0c;优化养老…

[AIGC] Nginx常用变量详解

Nginx非常强大&#xff0c;其主要功能包括HTTP服务器、反向代理、负载均衡等。Nginx的配置中有许多内置的变量&#xff0c;你可以在配置文件中使用这些变量进行灵活的配置。在本篇文章中&#xff0c;我们将介绍一些Nginx中常见的变量&#xff0c;包括proxy_add_header。 常见变…

Money Trees

思路分析: 利用双指针 l1始终作为起点,ri,不断更新终点 #include<iostream> #include<cstring> #include<string> #include<algorithm> #define int long long using namespace std; int w[2000005],h[2000005],s[2000005]; int t,n,m,l,r; signed m…

嵌入式单片机笔试题

DC-DC 和 LDO两者有何区别&#xff1f; DC-DC转换器&#xff08;直流-直流转换器&#xff09;和LDO&#xff08;低压差线性稳压器&#xff09;都是用于电源管理的设备&#xff0c;但它们在原理和特性上有一些显著的区别&#xff1a; 原理&#xff1a; DC-DC转换器通过改变输…

前端 CSS 经典:图片边框

前言&#xff1a;有这么一个业务&#xff0c;需要边框随着图片宽度的变化而变化&#xff0c;比如一些聊天的气泡框等。 实现原理&#xff1a;使用 border-image 属性 效果图&#xff1a; 实现代码&#xff1a; <!DOCTYPE html> <html lang"en"><he…

vue项目中使用json编辑器

实现效果&#xff1a; 借助插件json-editor-vue3实现效果如图一&#xff0c;如果嫌丑可以通过类名改一下样式如图二。 实现过程&#xff1a; 安装插件&#xff1a;npm install json-editor-vue3 文档链接&#xff1a;GitCode - 开发者的代码家园 <script setup name&quo…

day17

第一题 本题可以采用快速排序的思想&#xff0c;适应随机数指定和三指针划分数组为三个区域的思想&#xff1a; 其中指针的移动细节如上题故事&#xff0c;如下所示&#xff1a; 当a区域的商都大于k时&#xff0c;我们要查找的k位置元素就在左区域&#xff0c;我们进一步在左区…

【LORA协议栈】工作记录

一、硬件资源 MCU型号&#xff1a;STM32F401xE。Lora芯片&#xff1a;SX1276。硬件看门狗。ATT7022E三相电能专用计量芯片。 二、功能简介 作为一个组件&#xff0c;通过485与网关或者各种子设备连接在一起。支持boot升级。通过SPI与LORA芯片通信。接收和发送数据。有3路通信…

vue3 调用本地exe

1、注册表注册 在注册表中直接按照图2注册数据&#xff1b;也可以按照图3注册表的文件创建文档&#xff0c;然后点击打开&#xff0c;将会将注册表写入window系统。 图2 Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\F1] "URL:F1 Protocol Handler" &q…

Rust 赋能前端 -- 写一个 File 转 Img 的功能

所有耀眼的成绩,都需要苦熬,熬得过,出众;熬不过,出局 大家好,我是柒八九。一个专注于前端开发技术/Rust及AI应用知识分享的Coder 此篇文章所涉及到的技术有 Rustwasm-bindgen/js-sys/web-sysWeb WorkerWebAssemblyWebpack/Vite配置WebAssemblyOffscreenCanvas脚手架生成项…

Android Ktor 网络请求框架

Ktor 是一个由 JetBrains 开发的用于 Kotlin 编程语言的应用框架&#xff0c;旨在创建高性能的异步服务器和客户端应用程序。由于完全基于 Kotlin 语言&#xff0c;Ktor 能够让开发者编写出简洁、可读性强且功能强大的代码&#xff0c;特别适合那些已经熟悉 Kotlin 的开发人员。…

提取COCO 数据集的部分类

1.python提取COCO数据集中特定的类 安装pycocotools github地址&#xff1a;https://github.com/philferriere/cocoapi pip install githttps://github.com/philferriere/cocoapi.git#subdirectoryPythonAPI若报错&#xff0c;pip install githttps://github.com/philferriere…

ROS运行文件(LaunchFile)和参数(Parameter)

本文主要介绍ROS的Launch File和Parameter概念&#xff0c;通过Launch File启动单个或多个节点&#xff0c;并通过Parameter配置启动参数。 更多内容&#xff0c;访问专栏目录获取实时更新。 当你的应用中包含了很多工作包&#xff0c;每个工作包了又包含了多个节点时&#xff…

香橙派AIpro开发板初体验

香橙派AIpro开发板初体验 一、引言 在当前的AI发展浪潮中&#xff0c;边缘计算逐渐成为了研究的热点。香橙派AIpro开发板作为一款基于昇腾AI技术的开发板&#xff0c;凭借其强大的算力和丰富的接口&#xff0c;为AI边缘计算提供了强大的支持。最近&#xff0c;我也是拿到了官…

VUE3 学习笔记(6):data数据的监听、表单绑定、操作DOM

data数据的监听&#xff08;侦听&#xff09; 对于data的值的监听&#xff0c;可以用watch中与data中的参数命名一致的值做为函数进行获取监听变动前后的值再做逻辑判断&#xff0c;如下图所示。 示例代码 <template><div><p :class"classDemo">{…

用Python实现办公自动化

&#x1f482; 个人网站:【 摸鱼游戏】【神级代码资源网站】【工具大全】&#x1f91f; 一站式轻松构建小程序、Web网站、移动应用&#xff1a;&#x1f449;注册地址&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交…

机器学习-3-特征工程的重要性及常用特征选择方法

参考特征重要性:理解机器学习模型预测中的关键因素 参考[数据分析]特征选择的方法 1 特征重要性 特征重要性帮助我们理解哪些特征或变量对模型预测的影响最大。 特征重要性是数据科学中一个至关重要的概念,尤其是在建立预测性任务的模型时。想象你正在尝试预测明天是否会下…

Docker部署SpringBoot项目(jar包+Mysql)

部署Java项目 项目准备准备Java项目镜像准备配置网络 部署项目细节展示 项目准备 准备Java项目 hmall项目是一个maven聚合项目&#xff0c;使用IDEA打开hmall项目&#xff0c;查看项目结构如图&#xff1a; 我们要部署的就是其中的hm-service&#xff0c;其中的配置文件采用…

开源与闭源:AI大模型发展路径的博弈

一、引言 在人工智能&#xff08;AI&#xff09;领域&#xff0c;大模型以其卓越的性能和广泛的应用前景&#xff0c;成为了近年来技术发展的热点。然而&#xff0c;在大模型的发展路径上&#xff0c;开源与闭源两种模式一直存在着激烈的博弈。本文将深入探讨这两种模式在大模…