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,本文一起来了…...

Trimble X9三维激光扫描仪高效应对化工厂复杂管道扫描测绘挑战【沪敖3D】
化工安全关系到国计民生,近年来随着化工厂数字化改革不断推进,数字工厂逐步成为工厂安全管理的重要手段。而化工管道作为工厂设施的重要组成部分,由于其数量多、种类繁杂,一直是企业管理的重点和难点。 传统的化工管廊往往缺乏详…...

【数据结构】文件和外部排序
外部排序 外存信息的存取 计算基本存储方式 内部存储(主存):断电后数据会丢失,访问速度快,成本高容量通常较小外部存储(辅存):断电后数据不会丢失,访问速度较慢&#x…...

新手学习:网页前端、后端、服务器Tomcat和数据库的基本介绍
首先一点,不管是那个框架开发的网页前端,最后都需要Build,构建完毕以后都是原始的HTML CSS JS 三样文件! 网页前端 目录结构 在开始开发网站之前,首先需要了解如何组织文件。一个简单的网页项目通常会有以下几个文件夹和文件&…...

机器学习贝叶斯模型原理
一、引言 在机器学习与数据分析的广袤天地中,贝叶斯模型犹如一颗璀璨的明星,闪耀着独特的光芒,为众多领域的分类、预测等任务提供了强大的理论支撑与实用解法。然而,对于许多初涉此领域的小伙伴而言,贝叶斯模型背后的…...

【C++】实现100以内素数的求解
博客主页: [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 💯前言💯代码概览💯代码结构与逻辑分析1. 包含的头文件和命名空间2. 素数判断函数 isPrime功能输入与输出核心逻辑数学背景 3. 主函数 main功能核心逻辑输出示例 &#…...

Python 浏览器自动化新利器:DrissionPage,让网页操作更简单!
Python 浏览器自动化新利器:DrissionPage,让网页操作更简单! 文章目录 Python 浏览器自动化新利器:DrissionPage,让网页操作更简单!🚀 引言🌟 DrissionPage简介🛠️ 三大…...

Rust学习笔记_13——枚举
Rust学习笔记_10——守卫 Rust学习笔记_11——函数 Rust学习笔记_12——闭包 枚举 文章目录 枚举1. 定义1.1 无值变体1.2 有值变体1.3 枚举与泛型的结合 2. 使用2.1 和匹配模式一起使用2.2 枚举作为类型别名 3. 常用枚举类型 在Rust编程语言中,枚举(enum…...

Postgresql 格式转换笔记整理
1、数据类型有哪些 1.1 数值类型 DECIMAL/NUMERIC 使用方法 DECIMAL是PostgreSQL中的一种数值数据类型,用于存储固定精度和小数位数的数值。DECIMAL的精度是由用户指定的,可以存储任何位数的数值,而小数位数则由用户自行定义。DECIMAL类型的…...

AI开发:卷积神经网络CNN原理初识,简易例程 - 机器学习
一 、卷积神经网络是什么 (1)印象 今天说的CNN,并不是我们熟知的美国有线电视新闻网。 那什么是CNN呢? Convolutional Neural Networks, CNN)简单来说,就是用一个筛子来筛面粉的。 筛子就是卷积核&…...

详细介绍vue的递归组件(重要)
递归组件在 Vue 中是一个非常强大的概念,尤其在渲染层级结构(如树形结构、嵌套列表、评论系统等)时,能够极大地简化代码。 什么是递归组件? 递归组件就是一个组件在其模板中引用自身。这种做法通常用于渲染树形结构或…...