浏览器原理-v8引擎

news2024/10/13 4:25:40

什么是MVVM呢?
口通常我们学习一个概念,最好的方式是去看维基百科(对,千万别看成了百度百科)https://zh.wikipedia.org/wiki/MVVM 
View层:
视图层
>在我们前端开发中,通常就是DOM层
> 主要的作用是给用户展示各种信息。
Model层:
t>数据层
数据可能是我们固定的死数据,更多的是来自我们服务
器,从网络上请求下来的数据。在我们计数器的案例中,就是后面抽取出来的obj,当Y然,里面的数据可能没有这么简单。
VueModel层:
> 视图模型层
视图模型层是View和Model沟通的桥梁。
一方面它实现了Data Binding,也就是数据绑定,将
Model的改变实时的反应到View中另一方面它实现了DOM Listener,也就是DOM监听,当DOM发生一些事件(点击、滚动、touch等)时,可以监听到,并在需要的情况下改变对应的Data。

DOM树流程:

下载HTML-CSS-JS,下载完之后开始做解析,最主要是解析html和css代码,js代码由js引擎来进行解析,js引擎会帮助我们转成对应的CPU机器代码。js引擎:由Parse解析转成AST抽象语法树-再由Ianation解释器转换成ByteCode(字节码),之后转成对应的CPU代码。里面还有一个TurboFan编译器,可以将字节码编译为CPU可以直接执行的机器码。

V8引擎的架构:
V8引擎本身的源码非常复杂,大概有超过100w行C++代码,通过了解它的架构,我们可以知道它是如何对JavaScript执行的Parse模块会将JavaScript代码转换成AST(抽象语法树)这是因为解释器并不直接认识JavaScript代码;口如果函数没有被调用,那么是不会被转换成AST的
口 Parse的V8官方文档:https://8.dev/blog/scanner
Ignition是一个解释器,会将AST转换成ByteCode(字节码)
口 同时会收集TurboFan优化所需要的信息(比如函数参数的类型信息,有了类型才能进行真实的运算);
口如果函数只调用一次,Ignition会执行解释执行ByteCode;
Inition的V8官方文档:https://v8.dev/blog/ignition-interpreter
TurboFan是一个编译器,可以将字节码编译为CPU可以直接执行的机器码:
口 如果一个函数被多次调用,那么就会被标记为热点函数,那么就会经过TurboFan转换成优化的机器码,提高代码的执行性能口但是,机器码实际上也会被还原为ByteCode,这是因为如果后续执行函数的过程中,类型发生了变化(比如sum函数原来执行的是,之前优化的机器码并不能正确的处理运算,就会逆向的转换成字节码number类型,后来执行变成了string类型)口 TurboFan的V8官方文档:https://v8.dev/blog/turbofan-jit

V8执行的细节
那么我们的JavaScript源码是如何被解析(Parse过程)的呢?
Blink将源码交给V8引擎,Stream获取到源码并且进行编码转换Scanner会进行词法分析(lexicalanalysis),词法分析会将代码转换成tokens;接下来tokens会被转换成AST树,经过Parser和PreParser:
口Parser就是直接将tokens转成AST树架构
口PreParser称之为预解析,为什么需要预解析呢?
√这是因为并不是所有的JavaScript代码,在一开始时就会被执行。那么对所有的JavaScript代码进行解析,必然会影响网页的运行效率;
√所以V8引就实现了Lazy Parsing(延解析)的方案,它的作用是将不必要的函数进行预解析,也就是只解析暂时需要的内容,而对函数的全量解析是在函数被调用时才会进行;
比如我们在一个函数outer内部定义了另外一个函数inner,那么inner函数就会进行预解析生成AST树后,会被Ignition转成字节码( bytecode ),之后的过程就是代码的执行过程(后续会详细分析).

感兴趣想学习的可以去关注coderwhy老师,讲课非常细致噢~

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

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

相关文章

AI大语言模型时代构建全新数据平台

在大语言模型的引领下,数据平台领军企业 Databricks 和 Snowflake 的未来重置,探讨了 Databricks 和 Snowflake 等知名平台, 存储领域的 Delta、udi、Iceberg,还是实时化数据处理领域的 Databricks、Snowflake 1、LLM 给大数据企…

如何为虚拟机添加磁盘,扩充原有分区的磁盘空间

如何为虚拟机添加磁盘,扩充原有分区的磁盘空间 关机新增磁盘 虚拟机关机的状态下,在 VMware 当中新增一块磁盘,选中左边要添加磁盘的虚拟机镜像,然后鼠标右键点击设置。 选中磁盘点击添加 点击下一步,悬着SCSI这个…

【数字IC/FPGA】Verilog中的force和release

在Verilog中,将force用于variable会覆盖掉过程赋值,或者assign引导的连续(procedural assign)赋值,直到release。 下面通过一个简单的例子展示其用法: 加法器代码 module adder ( input logic [31:0] a, …

ISYSTEM调试实践12-软件运行时间的优化

实际工程的运行要比上篇文章提到的例程复杂的多 ISYSTEM调试实践11-Profiler Timeline和软件运行时间分析 由于复杂的应用层模型和底层任务,假定应用层模型的运行周期是10ms,任务函数的执行时间往往超过1ms,这时候就必须要考虑函数执行本身的…

什么是护网行动?

护网,也称“网络保护”,是指网络安全人员对企业或组织的网络进行检查、维护和保护,以防止网络受到黑客攻击、病毒、木马或其它恶意程序的侵入和损害。护网工作包括:网络安全规划、网络配置和控制、漏洞发现和修复、入侵检测和防范…

ES6 拓展(下)

一、函数的拓展 1.1、默认参数 在ES5中设置默认参数: function func(words, name) {name name || "闷墩儿";console.log(words, name); } func("大家好!我是"); func("大家好!我是", "憨憨");func(…

使用React18+Ts创建项目

1. 创建项目 首先,使用create-react-app工具创建一个新的React项目: npx create-react-app 项目名 --template typescript2. 安装依赖项 使用脚手架创建项目后,自带react-dom等依赖项,但react中的所用的路由方法是react-router…

建站系列(八)--- 本地开发环境搭建(WNMP)

目录 相关系列文章前言一、准备工作二、Nginx安装三、MySQL安装四、PHP安装及Nginx配置五、总结 相关系列文章 建站系列(一)— 网站基本常识 建站系列(二)— 域名、IP地址、URL、端口详解 建站系列(三)— …

cookie、session、Token区别

1 HTTP无状态,什么是无状态? http 无法知道是哪个客户端发出的请求,也无法判断是否为已登录用户请求,这就导致了 http 无法记住用户的登录状态。 2 cookie和session的是什么?为什么session这么好还要用cookie? coo…

VR钢铁实训 | 铁前事业部虚拟仿真培训软件

随着科技的发展,虚拟现实技术在各个行业中的应用越来越广泛。在钢铁冶炼行业中,VR技术也逐渐得到了应用,其中铁前事业部虚拟仿真培训软件就是一项非常有优势的技术。 铁前事业部虚拟仿真培训软件是广州华锐互动打造的《钢铁生产VR虚拟培训系统…

MySQL的用户管理

1、MySQL的用户管理 (1)创建用户 create user zhang3 identified by 123123;表示创建名称为zhang3的用户,密码设为123123。 (2)了解user表 1)查看用户 select host,user,authentication_string,select…

react memo判断刷新机制 自定义的比较函数 避免重复渲染

需求: 1. 需要在courseList参数变化时重新渲染组件。 2. 需要在currentWeekNumber参数 等于我指定值才重新渲染组件。 3.以上2个条件同时满足。 遇到的坑 一开始实现了我上面指定的问题需要的函数,后面发现怎么都刷新不了,经过深入观察发现m…

【ESP32】串口+wifi 透传,以及回调函数的使用

本文主要记录【ESP32】串口wifi 透传】的学习记录,主要包括 1.串口的AT 模式和透传模式 2. 串口命令解析 3. socket 连接 4. 回调函数的使用 【ESP32】串口wifi 透传,以及回调函数的使用 1. 函数接口说明2.开发环境3.硬件连接4.测试结果4.1发送 ATWS 命令…

Linux学习笔记-Ubuntu系统用户、群组、权限管理

一、概述 本文记录Ubuntu系统下通过命令操作用户账户进行管理。 Ubuntu系统版本: Linux ubuntu 5.15.0-1034-raspi #37-Ubuntu SMP PREEMPT Mon Jul 17 10:02:14 UTC 2023 aarch64 aarch64 aarch64 GNU/Linux 注:查看系统版本号的指令如下 uname -…

YOLOV7改进-针对小目标的NWD(损失函数)

link 1、复制这些 2、utils-loss,这里加 3、把这几行复制到utiils的loss.py 4、先对CoputerLoss类做修改 5、把那一行替换成这个 6、修改 7、iou_ration是超参,可以调,如果小目标比较多的话,这个值可以低一些,…

Vuex - state 状态(获取和使用共享数据)

文章目录 一、state是什么?二、state状态的作用三、如何使用store数据呢?使用数据的两种方式:1. 通过store 直接访问2. 通过辅助函数访问(简化) 一、state是什么? state是状态(数据) , 类似于v…

redis集群最少使用三个主节点的原因

集群最少三个主节点的原因 https://redis.io/docs/management/scaling/ 官网建议,搭建 redis 集群最少三主三从。 但是这么做是出于什么考虑呢? https://blog.csdn.net/qq_35549286/article/details/127057374 借鉴这位的解答 为什么是三个? cluster各…

骨传导与入耳式耳机哪种音质好?该如何选择?

骨传导耳机和传统耳机的定位不同,所以没有可比性,如果一定要说哪款耳机音质好,答案是入耳式耳机音质比较好! 首先入耳式耳机是直接塞入耳朵佩戴,会最大程度减少漏音,同时不会改变音质,会直接传…

构建自定义美颜应用:全局美颜SDK的开发指南

美颜技术已经成为许多应用程序和平台的标配之一,为用户提供了改善外观的机会。为了在你的应用中提供自定义的美颜功能,你可以考虑使用全局美颜SDK。本文将向你介绍如何构建自定义美颜应用,以及开发全局美颜SDK的关键步骤和技巧。 一、明确需…

Revit SDK 介绍:RayTraceBounce 光线反弹

前言 这个例子模拟光线反弹。 内容 通过修改参数,从(0,0,0)点向(1,0,0)方向射出光线,经过若干次反弹之后的结果。如图所示: 在Revit API 中&…