前端 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 Webkit。
  • Edge (Internet Explorer)

以前的JavaScript引擎主要在web浏览器使用，不过随着nodejs的出现就打破了这种局限。

2、V8引擎

V8包含了解析器（parser），解释器（Ignition），优化编译器（TurboFan ）。

解析器（parser）：用于生成抽象语法树。

解释器（Ignition）：将源码转换为字节码。

优化编译器（TurboFan ）：进行一些优化编译优化处理，比如内联缓存。

下面是V8引擎的大体工作流程。

  • 首先 解析器 先生成一个抽象语法树。
  • 然后 解释器 根据语法树生成V8格式的字节码。
  • 优化编译器 再将字节码编译成机器码。

3、运行时环境

浏览器运行环境中，浏览器提供了Web API，如：HTTP请求，计时器，事件等。

服务器运行环境中，nodejs提供了API。

下面是JavaScript在浏览器中运行时的架构，它包含一个内存堆、一个内存栈、一个事件循环、一个回调队列。

stack
heap
call stack
callback queue
event loop

4、运行时的调用栈

下面代码展示了JavaScript执行的调用栈变化。

function add(x, y) {
    return x + y;
}

function print(x, y) {
    console.log('x+y=',add(x, y))
}

print(1, 3)

5、异步任务

JavaScript先执行了 print 函数，然后调用Web API setTimeout() ，Web API存储了 setTimeout() 的回调函数，3秒后将回调函数添加到回调队列，事件循环发现调用栈为空，于是将队列里的回调函数移至调用栈执行。

function add(x, y) {
    return x + y;
}

function print(x, y) {
    setTimeout(function (){
        console.log('x+y=',add(x, y))
    }, 3000)
}

print(1, 3)

6、总结

JavaScript运行主要依靠JavaScript引擎和运行环境， 引擎 将js源码翻译成计算机所理解的机器码， 运行环境 提供了一些与计算机底层通讯的API和运行实现。

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

赞 (0)

相关推荐

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

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

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

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

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

  • 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文件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

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

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

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

  • 用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()

  • 解决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

  • 带你了解JavaScript的运行原理

    带你了解JavaScript的运行原理

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

  • 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运行原理

    前端 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

  • JavaScript运行原理分析

    JavaScript是一种基于对象的动态.弱类型脚本语言(以下简称JS),是一种解释型语言,和其他的编程语言不同,如java/C++等编译型语言,这些语言在代码执行前会进行通篇编译,先编译成字节码(机器码).然后在执行.而JS不是这样做的,JS是不需要编译成中间码,而是可以直接在浏览器中运行,JS运行过程可分为两个阶段,编译和执行.(可参考你不知道的JS这本书),当JS控制器转到一段可执行的代码时(这段可执行代码就是编译阶段生成的),会创建与之对应的执行上下文(Excution Context简

  • JavaScript前端构建工具原理的理解

    目录 前言 构建工具的前世今生 YUI Tool + Ant Grunt / Gulp Webpack / Rollup / Parcel Vite / Esbuild js 模块化的发展史和构建工具的变化 青铜时代 白银时代 黄金时代 结束语 前言 最近有幸在前端团队里面做了一次关于 webpack 的技术分享.在分享的准备过程中,为了能让大家更好的理解 webpack,特意对市面上以前和现在流行的构建工具做了一个梳理总结.在整理和分享的过程中,获益匪浅,对前端构建工具有了新的认识.在这里,将

  • Go语言对前端领域的入侵WebAssembly运行原理

    Go语言对前端领域的入侵WebAssembly运行原理

    目录 引言 WebAssembly 运行原理 Go WebAssembly 运行原理 Go WebAssembly 初体验 第一步 第二步 第三步 第四步 第五步 Javascript 真的需要担心 Go WebAssembly 的威胁么? 引言 从 Go 语言诞生以来,它就开始不断侵蚀 Java .C.C++ 语言的领地.今年下半年 Go 语言发布了 1.11 版本,引入了 WebAssembly 技术,浏览器端 Javascript 的垄断地位也开始遭遇 Go 语言的攻击.这次不同以往,它意

  • 前端面试运行npm run xxx发生过程原理解析

    前端面试运行npm run xxx发生过程原理解析

    目录 引言 package.json文件 总结 引言 事情是这样的,直接开讲 面试官:npm run xxx的时候,发生了什么?讲的越详细越好. 我(心想,简单啊): 首先,DNS 解析,将域名解析成 IP 地址,然后TCP 连接,TCP 三次握手… 面试官:停停,我问的不是从URL输入到页面展现到底发生什么?,是npm run xxx的时候,发生了什么. 我(尴尬,条件反射地以为是问的八股文):emmmm,我记得 npm run xxx的时候,首先会去项目的package.json文件里找sc

  • JavaScript适配器模式原理与用法实例详解

    本文实例讲述了JavaScript适配器模式原理与用法.分享给大家供大家参考,具体如下: 适配模式可用来在现有接口和不兼容的类之间进行适配,使用这种模式的对象又叫包装器(wrapper),因为它们是在用一个新的接口包装另一个对象. 基本理论 适配器模式:将一个接口转换成客户端需要的接口而不需要去修改客户端代码,使得不兼容的代码可以一起工作. 适配器主要有3个角色组成: (1)客户端:调用接口的类 (2)适配器:用来连接客户端接口和提供服务的接口的类 (3)适配者:提供服务,但是却与客户端接口需求

  • JavaScript观察者模式原理与用法实例详解

    本文实例讲述了JavaScript观察者模式原理与用法.分享给大家供大家参考,具体如下: 观察者模式 观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己. * 它分为2个角色:(1)观察者 (2)被观察者 * 观察者模式的目的:对程序的内在变化进行观察,当其有变化的时候,你可以得知,并且可以做出相应的反应. 现在我们通过一个需求来学习该模

  • JavaScript闭包原理与用法学习笔记

    本文实例讲述了JavaScript闭包原理与用法.分享给大家供大家参考,具体如下: 闭包(Closure) 闭包是一个函数和词法环境的组合,函数声明在这个词法环境中. 词法作用域: 看下面的一个例子: function init() { var name = 'GaoPian'; // name是局部变量 function displayName() { //displayName();是内部函数,一个闭包 alert(name); // 使用外部函数声明的变量 } displayName();

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

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

随机推荐