当前位置: 首页 > news >正文

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

实战数据结构:利用快马ai一键生成c语言指针实现的链表完整代码

实战数据结构:利用快马AI一键生成C语言指针实现的链表完整代码 指针是C语言的灵魂所在,尤其在实现链表、树等动态数据结构时,指针操作更是不可或缺的核心技能。最近在完成数据结构课程作业时,我尝试用InsCode(快马)平台的AI辅助功…...

iOSDeviceSupport:一站式解决Xcode设备调试兼容性问题

iOSDeviceSupport:一站式解决Xcode设备调试兼容性问题 【免费下载链接】iOSDeviceSupport All versions of iOS Device Support 项目地址: https://gitcode.com/gh_mirrors/ios/iOSDeviceSupport 当你的iOS设备连接Xcode却提示"Could not locate device…...

VScode+SFTP插件保姆级配置教程:2025年最新远程同步方案(附常见错误排查)

VScodeSFTP插件2025终极配置指南:从零搭建高效远程开发环境 每次在咖啡厅修改完代码,却发现服务器上的版本还停留在上周?团队协作时总有人忘记同步最新文件?2025年的远程开发早已不是简单的文件传输,而是无缝衔接的云端…...

KeyPass完全指南:掌握开源离线密码管理器的终极教程

KeyPass完全指南:掌握开源离线密码管理器的终极教程 【免费下载链接】KeyPass KeyPass: Open-source & offline password manager. Store, manage, take control securely. 项目地址: https://gitcode.com/gh_mirrors/ke/KeyPass 在当今数字时代&#xf…...

聊天记录数据化生存:WeChatMsg从备份到分析的技术实践

聊天记录数据化生存:WeChatMsg从备份到分析的技术实践 【免费下载链接】WeChatMsg 提取微信聊天记录,将其导出成HTML、Word、CSV文档永久保存,对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Trending/we/WeCha…...

挖到宝!PFC2D 流固耦合常用案例合集,科研人速进

该模型是“PFC2D流固耦合常用案例合集”: 其中包括水力压裂、达西渗流等多个案例。 有需要学习和交流的伙伴可按需选取。 干货满满,是运用pfc5.0做流固耦合必不可少的科研学习资料性价比绝对超高 内容可编辑,觉得运行通畅 代码真实有效。最近…...

大文件传输不再难:探索高效文件分享工具的实战指南

大文件传输不再难:探索高效文件分享工具的实战指南 【免费下载链接】aliyunpan 阿里云盘命令行客户端,支持JavaScript插件,支持同步备份功能。 项目地址: https://gitcode.com/GitHub_Trending/ali/aliyunpan 你是否经历过这样的尴尬时…...

Python实战:用SLSQP算法搞定6个数据点的非线性拟合(附完整代码)

Python实战:SLSQP算法在小样本非线性拟合中的卓越表现 当面对仅有六个数据点的非线性拟合难题时,传统梯度下降方法往往捉襟见肘。本文将带您深入探索SLSQP算法如何在这种具有挑战性的场景中展现出独特优势,通过完整代码示例和误差对比分析&am…...

我的世界Java版1.21.4的Fabric模组开发教程(二)创建物品

这是适用于Minecraft Java版1.21.4的Fabric模组开发系列教程专栏第二章——创建物品。想要阅读其他内容,请查看或订阅上面的专栏。 物品(Items) 指的是可以被玩家和其他实体拾起并使用的元素。想要在Minecraft中添加自己的物品,通常需要完成下面的步骤&…...

IDEA里JProfiler插件怎么配?手把手教你分析Spring Boot内存泄漏(附OOM复现技巧)

IDEA集成JProfiler实战:Spring Boot内存泄漏分析与OOM复现技巧 作为Java开发者,你是否经历过这样的场景:线上服务突然崩溃,日志里赫然写着java.lang.OutOfMemoryError,而你却无从下手?本文将带你深入Intell…...