前端 JavaScript运行原理

 更新时间:2021年10月23日 10:43:39   作者:onlythinking  
这篇文章主要介绍了前端 JavaScript运行原理,JavaScript引擎是一个计算机程序,它的主要作用是JavaScript运行时将源码编译为机器码。每个主流Web浏览器都有自己的JavaScript引擎,它通常由web浏览器供应商开发,接下来一起来看看文章的详细内容吧

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运行原理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 微信小程序 wxapp视图容器 view详解

    微信小程序 wxapp视图容器 view详解

    这篇文章主要介绍了微信小程序 wxapp视图容器 view详解的相关资料,附简单实例和实现效果图,帮助大家学习参考,需要的朋友可以参考下
    2016-10-10
  • Google 地图获取API Key详细教程

    Google 地图获取API Key详细教程

    本文主要介绍Google 地图API Key,开发Google 地图应用的朋友都知道,在开发的前需要免费的Google 地图API Key,这里详细给出获得API Key的流程,有需要的小伙伴参考下
    2016-08-08
  • JS中轻松遍历对象属性的几种方式

    JS中轻松遍历对象属性的几种方式

    这篇文章主要给大家介绍的是JS中轻松遍历对象属性的几种方式,文章从自身可枚举属性、Object.values() 返回属性值、Object.entries()来展开介绍,感兴趣的小伙伴可以参考一下
    2021-09-09
  • 微信小程序的分类页面制作

    微信小程序的分类页面制作

    这篇文章主要介绍了微信小程序实的分类页面制作的相关资料,需要的朋友可以参考下
    2017-06-06
  • 微信小程序获取循环元素id以及wx.login登录操作

    微信小程序获取循环元素id以及wx.login登录操作

    这篇文章主要介绍了微信小程序获取循环元素id以及wx.login登录操作的相关资料,这里提供实例帮助大家实现该功能,需要的朋友可以参考下
    2017-08-08
  • 关于js typeof 与 instanceof 判断数据类型区别及开发使用

    关于js typeof 与 instanceof 判断数据类型区别及开发使用

    我们经常会遇到判断一个变量的数据类型或该变量是否为空值的情况,你是如何去选择判断类型操作符的?本文来记录一下我们开发人员必须掌握关于 typeof 和 instanceof 的知识点及在开发中的使用建议,同时在面试过程中也经常会遇到这样的问题,需要的朋友可参考下文章内容
    2021-10-10
  • JavaScript中5个常用的对象

    JavaScript中5个常用的对象

    JavaScript是一门脚本语言,不同于Python的是,它是一门浏览器脚本语言,而Python则是服务器脚本语言,我们不光要会Python,还要会JavaScript,因为它对做网页方面是有很大作用的。本篇内容小编就来详细解说JavaScript常用的对象,需要的朋友可以参考一下
    2021-10-10
  • 移动开发之自适应手机屏幕宽度

    移动开发之自适应手机屏幕宽度

    这篇文章主要介绍了移动开发之自适应手机屏幕宽度的相关资料,网上关于这方面的文章有很多,重复的东西本文不再赘述,仅提供思路,并解释一些其他文章讲述模糊的地方,需要的朋友可以参考下
    2016-11-11
  • JavaScript的模块化开发框架Sea.js上手指南

    JavaScript的模块化开发框架Sea.js上手指南

    Sea.js的目的是追求简单的代码书写和组织方式,Sea.js并没有过多功能而是主要对前端程序的部署结构作出约束,下面我们就来看一下JavaScript的模块化开发框架Sea.js上手指南:
    2016-05-05
  • JSON字符串转换JSONObject和JSONArray的方法

    JSON字符串转换JSONObject和JSONArray的方法

    这篇文章主要介绍了JSON字符串转换JSONObject和JSONArray的方法的相关资料,需要的朋友可以参考下
    2016-06-06

最新评论