带你了解JavaScript的运行原理

目录
  • 浏览器内核
  • JavaScript 引擎
  • V8 引擎

了解JavaScript 是如何运行的，以及的它的运行机制，首先，我们要了解浏览器的内核：

浏览器内核

了解过的都知道：不同的浏览器是由不同的内核组成，那么有哪些内核以及我们常用的浏览器都使用了那些内核：

  • Gecko：早期被Netscape和Mozilla Firefox浏览器浏览器使用；
  • Trident：微软开发，被IE4~IE11浏览器使用，但是Edge浏览器已经转向Blink；
  • Webkit：苹果基于KHTML开发、开源的，用于Safari，Google Chrome之前也在使用；
  • Blink：是Webkit的一个分支，Google开发，目前应用于Google Chrome、Edge、Opera等；

所谓浏览器内核，指的是浏览器的排版引擎，即浏览器引擎。引擎的工作执行流程如下：

但是在这个执行过程中，HTML解析的时候遇到了JavaScript标签，应该怎么办呢？
会停止解析HTML，而去加载和执行JavaScript代码；

当然，为什么不直接异步去加载执行JavaScript代码，而要在这里停止掉呢？

所以浏览器希望将HTML解析的DOM和JavaScript操作之后的DOM放到一起来生成最终的DOM树，而不是频繁的去生成新的DOM树；

那么，JavaScript代码由谁来执行呢？
答案：JavaScript 引擎

JavaScript 引擎

为什么需要JavaScript引擎呢？

  • 事实上我们编写的JavaScript无论你交给浏览器或者Node执行，最后都是需要被CPU执行的；
  • 但是CPU只认识自己的指令集，实际上是机器语言，才能被CPU所执行；
  • 所以我们需要JavaScript引擎帮助我们将JavaScript代码翻译成CPU指令来执行；

常见的JavaScript 引擎有哪些呢？

  • SpiderMonkey：第一款JavaScript引擎，由Brendan Eich开发（也就是JavaScript作者）；
  • Chakra：微软开发，用于IE浏览器；
  • JavaScriptCore：WebKit中的JavaScript引擎，Apple公司开发；
  • V8：Google开发的强大JavaScript引擎，也帮助Chrome从众多浏览器中脱颖而出；（V8 是一个强大的JavaScript 引擎）

V8 引擎

  • V8是用C ++编写的Google开源高性能JavaScript和WebAssembly引擎，它用于Chrome和Node.js等。
  • 它实现ECMAScript和WebAssembly，并在Windows 7或更高版本，macOS 10.12+和使用x64，IA-32，ARM或MIPS处理器的Linux系统上运行。
  • V8可以独立运行，也可以嵌入到任何C ++应用程序中。

V8 引擎执行JavaScript 代码的原理：

Parse模块会将JavaScript代码转换成AST（抽象语法树），这是因为解释器并不直接认识- JavaScript代码；

Ignition是一个解释器，会将AST转换成ByteCode（字节码）

  • 同时会收集TurboFan优化所需要的信息（比如函数参数的类型信息，有了类型才能进行真实的运算）；
  • 如果函数只调用一次，Ignition会执行解释执行ByteCode；
  • Ignition的V8官方文档：https://v8.dev/blog/ignition-interpreter

TurboFan是一个编译器，可以将字节码编译为CPU可以直接执行的机器码；

  • 如果一个函数被多次调用，那么就会被标记为热点函数，那么就会经过TurboFan转换成优化的机器码，提高代码的执行性能；
  • 但是，机器码实际上也会被还原为ByteCode，这是因为如果后续执行函数的过程中，类型发生了变化（比如sum函数原来执行的是number类型，后来执行变成了string类型），之前优化的机器码并不能正确的处理运算，就会逆向的转换成字节码；
  • TurboFan的V8官方文档：https://v8.dev/blog/turbofan-jit

上面是JavaScript代码的执行过程

学习，记录，共勉！

到此这篇关于带你了解JavaScript的运行原理的文章就介绍到这了,更多相关JavaScript运行原理内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 一篇文章学会jsBridge的运行机制

    目录 js调用方式 安卓 1.js调用原生 2.原生调用js ios 总结 我司的APP是一个典型的混合开发APP,内嵌的都是前端页面,前端页面要做到和原生的效果相似,就避免不了调用一些原生的方法,jsBridge就是js和原生通信的桥梁,本文不讲概念性的东西,而是通过分析一下我司项目中的jsBridge源码,来从前端角度大概了解一下它是怎么实现的. js调用方式 先来看一下,js是怎么来调用某个原生方法的,首先初始化的时候会调用window.WebViewJavascriptBridge.in

  • visual studio code 编译运行html css js文件的教程

    运行html文件 1.添加插件扩展 2.安装 open in browser 3.在对应的html 文件处右击,选择open in default browser 或者直接 总结 到此这篇关于visual studio code 编译运行html css js文件的教程的文章就介绍到这了,更多相关visual studio code 运行html css js文件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

  • 用Golang运行JavaScript的实现示例

    C++太麻烦(难)了,想要盘弄一下V8实在是有些费劲,但是Golang社区出了几个Javascript引擎,要尝试在别的语言中如何集成Javascript,是个不错的选择.以下选了github.com/dop251/goja 来做例子. Hello world 照着仓库的Readme,来一个: package main import ( "fmt" js "github.com/dop251/goja" ) func main() { vm := js.New()

  • 前端 JavaScript运行原理

    前端 JavaScript运行原理

    目录 1.什么是JavaScript引擎 2.V8引擎 3.运行时环境 4.运行时的调用栈 5.异步任务 6.总结 1.什么是JavaScript引擎 JavaScript引擎是一个计算机程序,它的主要作用是JavaScript运行时将源码编译为机器码. 每个主流Web浏览器都有自己的JavaScript引擎,它通常由web浏览器供应商开发. Google Chrome V8. Mozilla Firefox Spider Monkey. Safari Javascript Core Webki

  • 解决node终端下运行js文件不支持ES6语法

    最近写一些简单的测试代码时,为了方便直接在node终端执行发现有些ES6语法不支持,记录一下解决方式 现象 新建class.js文件后添加如下代码 // constructer class Person { constructor(name,age,sex) { this.name = name; this.age = age; this.sex = sex; } getInfo() { return `name:${this.name},age:${this.age},sex:${this.s

  • Jupyter Notebook运行JavaScript的方法

    Jupyter Notebook运行JavaScript的方法

    后面也加了怎么在 VSC 中使用 Jupyter Notebook-- 安装 Anaconda 安装部分我是直接使用 Anaconda 安装的,这个下载 msi 就可以了,没有什么难的. 遇到报错,以及配置 Anaconda 报错信息如下: D:\>jupyter notebook Traceback (most recent call last): File "C:\ProgramData\Anaconda3\Scripts\jupyter-notebook-script.py"

  • JavaScript 运行机制详解再浅谈Event Loop

    JavaScript 运行机制详解再浅谈Event Loop

    目录 一.为什么JavaScript是单线程? 二.任务队列 三.事件和回调函数 四.Event Loop 五.定时器 六.Node.js的Event Loop 一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. JavaScript的单线程,与它的用途有关.作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM.这决定了它只能是单线

  • Docker安装、创建镜像、加载并运行NodeJS程序的详细过程

    Docker安装、创建镜像、加载并运行NodeJS程序的详细过程

    系统环境:win7 一.安装docker 从Docker官网下载并安装docker-ToolBox,并安装 安装完毕,出现三个图标: 二.创建docker镜像 Docker可以通过Dockerfile文件内容来动构建镜像. Dockerfile是一个包含创建镜像所有命令的文本文件,使用docker build命令可以根据其内容构建镜像. 示例,创建一个NodeJS程序的Docker镜像: 1.新建目录并在cmd中npm init进行初始化. 2.创建一个demo程序,内容如下: 注意:如果是正式

  • 带你了解JavaScript的运行原理

    带你了解JavaScript的运行原理

    目录 浏览器内核 JavaScript 引擎 V8 引擎 了解JavaScript 是如何运行的,以及的它的运行机制,首先,我们要了解浏览器的内核: 浏览器内核 了解过的都知道:不同的浏览器是由不同的内核组成,那么有哪些内核以及我们常用的浏览器都使用了那些内核: Gecko:早期被Netscape和Mozilla Firefox浏览器浏览器使用: Trident:微软开发,被IE4~IE11浏览器使用,但是Edge浏览器已经转向Blink: Webkit:苹果基于KHTML开发.开源的,用于Sa

  • 新手入门带你学习JavaScript引擎运行原理

    新手入门带你学习JavaScript引擎运行原理

    一些名词 JS引擎 - 一个读取代码并运行的引擎,没有单一的"JS引擎";,每个浏览器都有自己的引擎,如谷歌有V. 作用域 - 可以从中访问变量的"区域". 词法作用域- 在词法阶段的作用域,换句话说,词法作用域是由你在写代码时将变量和块作用域写在哪里来决定的,因此当词法分析器处理代码时会保持作用域不变. 块作用域 - 由花括号{}创建的范围 作用域链 - 函数可以上升到它的外部环境(词法上)来搜索一个变量,它可以一直向上查找,直到它到达全局作用域. 同步 - 一次

  • Python带参数的装饰器运行原理解析

    关于装饰器的理解,特别像<盗梦空间>中的进入梦境和从梦境出来的过程,一层一层的深入梦境,然后又一层一层的返回,被带入梦境的是被装饰的函数,装饰器就是使人入梦的工具. 上代码: from functools import wraps def decorator_with_argument(argument=''): def outer(func): message = argument + func.__name__ @wraps(func) def inner(*args, **kwargs)

  • 一文带你了解JavaScript垃圾回收机制

    目录 1. 概述 2. 内存管理 3. 垃圾回收 4. GC算法介绍 5. 引用计数算法 1. 引用计数优缺点 6. 标记清除算法 1. 标记清除算法优缺点 7. 标记整理算法 8. 执行时机 9. V8引擎 1. 垃圾回收策略 2. 回收新生代对象 3. 回收老生代对象 4. V8垃圾回收总结 10. Performance工具介绍 1. 内存问题的体现 2. 监控内存的几种方式 3. 任务管理器监控内存 4. TimeLine记录内容 5. 堆快照查找分离DOM 6. 判断是否存在频繁GC

  • JSP程序运行原理、文档结构及简单输入输出实例分析

    本文实例讲述了JSP程序运行原理.文档结构及简单输入输出.分享给大家供大家参考.具体如下: 目标: 掌握Web应用的文档结构: 掌握JSP的运行原理: 掌握JSP的简单输入和输出. 主要内容: 通过一个简单实例介绍Web应用的文档结构和运行原理: 通过一个简单的注册功能介绍基本的输入输出. 实现内容:客户端验证. 1. 文档结构 每个应用都有一个根目录,例如ch2:理论上可以放在任何地方,但是需要配置,简单的做法,直接放在了webapps这个目录下,在这个目录的应用会被自动加载. 在根目录下会有

  • javascript内存分配原理实例分析

    javascript内存分配原理实例分析

    本文实例讲述了javascript内存分配原理.分享给大家供大家参考,具体如下: JavaScript中的变量分为两种,原始值和引用值.原始值指的是原始数据类型的值,比如undefined,null,number,string,boolean类型所表示的值.引用值指的是复合数据类型的值,即Object,Function,Array等. 原始值和引用值存储在内存中的位置分别为栈和堆.原始值是存储在栈中的简单数据段,他们的值直接存储在变量访问的位置.引用值是存储在堆中的对象. 存储在栈中的值是一个指

  • 深入浅出理解JavaScript高级定时器原理与用法

    本文实例讲述了JavaScript高级定时器原理与用法.分享给大家供大家参考,具体如下: setTimeout()和setInterval()可以用来创建定时器,其基本的用法这里就不再做介绍了.这里主要介绍一下javascript的代码队列.在javascript中没有任何代码是立即执行的,一旦进程空闲则尽快执行.所以说定时器中设置的时间并不代表执行时间就一定相符,而是代表代码会在指定时间间隔后加入到队列中进行等待.如果在这个时间点上,队列中没有其他东西,那么这段代码就会被执行,表面上看上去好像

  • JavaScript原型对象原理与应用分析

    JavaScript原型对象原理与应用分析

    本文实例讲述了JavaScript原型对象原理与应用.分享给大家供大家参考,具体如下: 原型对象: 每个对象都有一个参考对象,这个参考对象称之为原型对象.原型对象有自己的属性和方法.当A是B的原型对象时,那么B拥有A中的所有属性和方法. 原型对象的工作原理: 使用原型对象定义一个新的对象时,该对象不会立即拥有原型对象的属性和方法,在调用的时候本对象内部没有的属性和方法是才回去调用原型中的属性和方法.(动态分配). 原型对象的引用: 在javascript中每一个函数都定义了一个prototype

  • JavaScript插入排序算法原理与实现方法示例

    JavaScript插入排序算法原理与实现方法示例

    本文实例讲述了JavaScript插入排序算法原理与实现方法.分享给大家供大家参考,具体如下: 一.插入排序简介: 想象我们斗地主,摸排阶段,手里的牌都按照从小到大排序.如果每摸一张牌,我们就把他插入合适的位置,使得它比后面位置的牌小,比前面位置的牌大或者相等. 类似这样的一种排序方法就是插入排序: 在一个数组a中,我们要实现升序排序,假设我们前面已经对a[0]到a[k]排好序,现在需要将a[k+1]的值放入合适的位置. (为简便,此处不讨论k的取值范围,只是用它代表数组的某个位置) 1.首先,

随机推荐