JavaScript语言介绍
JavaScrip是一门编程语言

浏览器的工作原理
所以得域名都会被解析成ip地址,ip地址就是服务器地址,服务器地址会返回一个html文件,解析html遇到css文件和JavaScript标签就会把相应内容下载下来进行解析。

认识浏览器的内核

浏览器的渲染过程
解析方式通过浏览器内核解析,通过HTMLParser将其转为DOM树,dom中的js代码可对dom树进行操作。
css由cssparser进行解析,生成css规则,css规则与domtree结合生出渲染树render tree,redertree需要布局的设计,生成最终的渲染树

认识JavaScrip引擎

常见的JavaScrip引擎

浏览器内核和JS引擎关系

V8引擎的原理
js代码借助v8引擎,通过解析(词法分析和语法分析)然后生成ast树(抽象语法树),可以将抽象树转为字节码,通过lgnition库转换,也可以通过turboFn将执行对此的函数标为hot函数,然后直接转为机器码,再下次操作发现机器指令发生变化就会进行deoptimization转换成字节码。

解析图
内核Blink会解析html把js下载下来,把js代码给到v8引擎,对编码进行转化,然后进行Scanner,通过Scanner把代码转换成很多tokens,把tokens给到parser,parser将tokens转成ast树,由ignition将其转为字节码,字节码再转为cpu可理解的指令。通过parser时还有个reparser预解析。

V8执行的细节

初始化全局对象

执行上下文栈(调用栈)

GEF被放到ECS中

GEC开始执行代码



代码被解析,v8引擎会创建一个对象,将数据都放入其中。然后开始运行代码,v8为了执行代码,v8引擎内部会有一个执行上下文栈。想要执行的内容都需要放入该栈中,一般在该栈中会放入函数。如果执行的是全局代码,需要全局上下文,其中有个Vo用来放创建的那个对象,然后再将其放入栈中,开始执行就开始一个个按顺序开始赋值。所以当你使用数据时,再他出现前使用,只会显示undefined,不会找不到数据,因为在运行前,所有数据就已经放在创建的对象中了。
遇到函数执行方式
对于全局代码的运行解析,首先在编译阶段会创造出一个go对象也就是全局对象,会把使用的类和创建的变量都放入其中,但是还没赋值,目前的变量的值都是undefined,要对全局代码进行执行时会创建全局上下文,将go放入其中的vo中,运行时在vo的go中找并赋值。
当全局代码中有函数时,函数也会放入go对象中,但是再申请一块空间放该函数的父级作用域,以及函数的执行代码块。根据存储函数空间该函数时会生成函数执行上下文,其中有vo,vo中有ao,ao是存放函数的变量等数据。在这里面的数据目前值都是undefined,然后执行函数代码时就会从vo的ao中寻找相应的所需的内容,也将该赋值的赋值。函数执行完后,函数上下文就会弹出该栈进行销毁
当在该函数没有找到所需的变量就会通过作用域链去父级找



函数的父级作用域跟调用位置没关系,跟定义位置有关系

变量环境和记录

作用域提升面试题

会直接把m当做全局变量

相关文章:
JavaScript语言介绍
JavaScrip是一门编程语言 浏览器的工作原理 所以得域名都会被解析成ip地址,ip地址就是服务器地址,服务器地址会返回一个html文件,解析html遇到css文件和JavaScript标签就会把相应内容下载下来进行解析。 认识浏览器的内核 浏览器的渲染过程 …...
Lua使用点号和冒号的区别
首先建立一个table,再分别定义两个方法,如下: local meta {}function meta:test1(...)print(self)print("")for k,v in pairs({...}) doprint(v)end endfunction meta.test2(...)print(self)print("")for k,v in pairs…...
LLM - 开源视觉多模态 LLaVA-CoT(o1) 深度推理模型 测试与源码 教程
欢迎关注我的CSDN:https://spike.blog.csdn.net/ 本文地址:https://spike.blog.csdn.net/article/details/144304351 免责声明:本文来源于个人知识与公开资料,仅用于学术交流,欢迎讨论,不支持转载。 LLaVA-…...
Ansible的yum和saltstack的哪个功能相似
Ansible的yum和saltstack的哪个功能相似 在 Ansible 和 SaltStack 中,Ansible 的 yum 模块 和 SaltStack 的 pkg 模块 功能相似。它们都用于管理软件包,支持安装、升级、删除和查询等操作。 Ansible 的 yum 模块 用途: 专门用于基于 Red Hat …...
paimon0.9记录
启动paimon -- 本地模式演示 bin/start-cluster.sh-- 启动sqlclient bin/sql-client.sh示例 -- 创建catalog,每次都要创建,创建一个已经存在的catalog相当于使用 CREATE CATALOG fs_catalog WITH (typepaimon,warehousefile:/data/soft/paimon/catalog…...
Java 中 List 接口的学习笔记
1. 什么是 List? 在 Java 中,List 是一个接口,属于 Java Collections Framework。它表示一个有序的集合,可以包含重复元素。List 接口允许通过索引访问元素,提供了多种实现方式,如 ArrayList 和 LinkedLis…...
【原生js案例】webApp实现鼠标移入移出相册放大缩小动画
图片相册这种动画效果也很常见,在我们的网站上。鼠标滑入放大图片,滑出就恢复原来的大小。现在我们使用运动定时器来实现这种滑动效果。 感兴趣的可以关注下我的系列课程【webApp之h5端实战】,里面有大量的css3动画效果制作原生知识分析&…...
LVGL9 定时器模块
文章目录 前言定时器系统概述特点 定时器的创建函数:lv_timer_create函数:lv_timer_create_basic 定时器的控制函数:lv_timer_ready函数:lv_timer_reset 定时器的参数设置函数:lv_timer_set_cb函数:lv_time…...
Qt学习笔记第51到60讲
第51讲 记事本实现打开功能 回到第24个功能文件Notepad,给UI中的各个控件添加槽函数。 ①开始按钮 void Widget::on_btnOpen_clicked() {QString fileNameQFileDialog::getOpenFileName(this,tr("Open File"),"E:\\6_Qt Projects\\24_Notepad\\fi…...
网页设计--axios作业
根据以下mock地址中的json数据,使用axios异步方式获取并显示在页面中。 https://apifoxmock.com/m1/3761592-3393136-default/peotfindAll?apifoxApiId171582689 {"code": 1,"msg": "success","data": [{"id": …...
SpringBoot 整合 Avro 与 Kafka 详解
SpringBoot 整合 Avro 与 Kafka 详解 在大数据处理和实时数据流场景中,Apache Kafka 和 Apache Avro 是两个非常重要的工具。Kafka 作为一个分布式流处理平台,能够高效地处理大量数据,而 Avro 则是一个用于序列化数据的紧凑、快速的二进制数…...
若依 ruoyi VUE el-select 直接获取 选择option 的 label和value
1、最新在研究若依这个项目,我使用的是前后端分离的方案,RuoYi-Vue-fast(后端) RuoYi-Vue-->ruoyi-ui(前端)。RuoYi-Vue-fast是单应用版本没有区分那么多的modules 自己开发起来很方便,这个项目运行起来很方便,但是需要自定义的…...
大数据-155 Apache Druid 架构与原理详解 数据存储 索引服务 压缩机制
点一下关注吧!!!非常感谢!!持续更新!!! 目前已经更新到了: Hadoop(已更完)HDFS(已更完)MapReduce(已更完&am…...
修改MySQL存储路径
1.查看原路径 show variables like ‘%datadir%’; 2.停止MYSQL 以管理员身份运行命令提示符 net stop MySQL84 在服务中直接停止MySQL 3.编辑配置文件 可能会遇到无权限修改,可以先修改my.ini的权限。可以通过:右键my.ini → 属性 → 安全→ 编辑 …...
Git常用的命令【提交与回退】
git分布式版本控制系统 (SVN集中式版本控制系统)之间的对比 git有本地仓库和远程仓库,不同的开发人员可以分别提交自己的本地仓库并维护代码的版本控制。 然后多个人员在本地仓库协作的代码,可以提交到远程仓库中做整合。 git本…...
详解:HTTP/HTTPS协议
HTTP协议 一.HTTP是什么 HTTP,全称超文本传输协议,是一种用于分布式、协作式、超媒体信息系统的应用层协议。HTTP往往是基于传输层TCP协议实现的,采用的一问一答的模式,即发一个请求,返回一个响应。 Q:什…...
0.96寸OLED---STM32
一、简介 OLED:有机发光二极管 OLED显示屏:性能优异的新型显示屏,具有功耗低(相比LCD不需要背光源,每一个节点当度发光)、响应速度快、宽视角(自发光,从任何视角看都比较清晰&…...
保姆级教学 uniapp绘制二维码海报并保存至相册,真机正常展示图片二维码
一、获取二维码 uni.request({url: https://api.weixin.qq.com/wxa/getwxacode?access_token${getStorage("token")},responseType: "arraybuffer",method: "POST",data: {path: "/pages/index/index"},success(res) {// 转换为 Uint…...
常用Vim操作
vimrc配置 ctags -R * 生成tags文件 set number set ts4 set sw4 set autoindent set cindent set tag~/tmp/log/help/tags 自动补全: ctrln:自动补全 输入: a:从当前文字后插入i:从当前文字前插入s: 删除当前字…...
【C#】NET 9中LINQ的新特性-CountBy
前言 在 .NET 中,使用 LINQ 对元素进行分组并计算它们的出现次数时,需要通过两个步步骤。首先,使用 GroupBy方法根据特定键对元素进行分类。然后,再计算每个组元素包含个数。而随着 .NET 9 版本发布,引入了一些新特性。其中 LINQ 引入了一种新的方法 CountBy,本文一起来了…...
零基础新手会议记录,选购避坑指南 可直接上手
日常工作学习中,不少人会遇到会议纪要整理、访谈录音处理、讲座笔记记录的难题,手动整理耗时费力还易出错。本文评测了市面上主流录音转写工具,整理了新手避坑指南和实用选择建议,零基础也能快速上手。综合实测后,听脑…...
数据与大语言模型融合:从NL2SQL到RAG架构的实践指南
1. 项目概述:当数据遇见大语言模型如果你是一名数据工程师、数据分析师,或者任何需要和数据打交道的开发者,最近肯定被“大语言模型”和“数据智能”这两个词轮番轰炸。我们手里有海量的数据,从结构化的业务表到非结构化的日志、文…...
金蝶云星空日常使用功能
1、必录和锁定和隐藏 2、取多少位字符 FMaterialId <> null AND ( FMaterialId.FNumber[0:3] in (321) or FMaterialId.FNumber[0:1] in (P)) 3、设定指定值...
基于MCP协议与RAG技术构建智能聊天应用:架构解析与实战指南
1. 项目概述:一个基于MCP协议的RAG聊天应用最近在开源社区里,一个名为gogabrielordonez/mcp-ragchat的项目引起了我的注意。乍一看标题,它融合了当下两个非常热门的技术概念:MCP和RAG。对于从事AI应用开发,特别是希望构…...
技术干货!!DeepSeek API 实战:从零到生产级的 Python 调用指南 — 流式、Function Calling、多轮对话、成本优化全覆盖
DeepSeek V3 的 API 性价比在 2026 年依然没有对手——同等能力价格只有 GPT-5.5 的 1/5。但翻了一圈中文技术社区,发现大多数「教程」只讲到第一段 chat.completions.create 就停了。生产环境真正需要的东西——流式输出怎么接、Function Calling 踩了什么坑、高并…...
BallonsTranslator:3分钟搞定漫画翻译的终极AI辅助工具
BallonsTranslator:3分钟搞定漫画翻译的终极AI辅助工具 【免费下载链接】BallonsTranslator 深度学习辅助漫画翻译工具, 支持一键机翻和简单的图像/文本编辑 | Yet another computer-aided comic/manga translation tool powered by deeplearning 项目地址: https…...
【c++面向对象编程】第22篇:输入输出运算符重载:<< 与 >> 的友元实现
目录 一、为什么不能是成员函数? 二、标准写法(两步法) 第1步:在类中声明友元函数 第2步:实现全局函数 三、为什么要返回引用? 支持链式输出 正确 vs 错误示例 四、为什么需要友元?能否不…...
别再只会显示字符了!用51单片机和OLED做个简易电子时钟(IIC协议详解)
从零构建51单片机OLED电子时钟:IIC协议深度解析与项目实战 在嵌入式开发领域,51单片机因其稳定性和易用性始终占据一席之地。当基础的点亮OLED屏幕、显示静态文字已经无法满足你的求知欲时,一个融合硬件协议、实时时钟和UI设计的电子时钟项目…...
别再死记硬背公式了!用MATLAB besselj函数5分钟搞定贝塞尔函数可视化
用MATLAB可视化贝塞尔函数:从数学恐惧到图形直觉的5分钟蜕变 当《数学物理方法》教材上那些密密麻麻的积分符号和无穷级数开始在你眼前跳舞,当教授在黑板上推导贝塞尔方程时粉笔灰与数学焦虑一起飞扬——是时候让MATLAB成为你理解这些特殊函数的"视…...
