前端百题斩【008】——JavaScript代码的执行过程

算法潮涌
• 阅读 840

写该系列文章的初衷是“让每位前端工程师掌握高频知识点,为工作助力”。这是前端百题斩的第8斩,希望朋友们关注公众号“执鸢者”,用知识武装自己的头脑。

下面将以V8为例,来阐述一下JavaScript代码的执行过程,其整个过程如下所示:

前端百题斩【008】——JavaScript代码的执行过程

整个过程主要分为以下几个步骤:
  1. 词法分析,该步骤是将一行行的源码拆解成一个个token(token指的是语法上不可能再分的、最小的单个字符或字符串);
  2. 语法分析,其作用是将生成的token数据根据语法规则转换为AST;
  3. 有了AST后,V8就会生成该段代码的执行上下文;
  4. 解释器根据AST生成字节码(字节码是介于AST和机器码之间的一种代码);
  5. 生成字节码之后进行执行阶段,解释器会逐条解释执行。在执行字节码的过程中,如果发现热点代码(例如一段代码被重复执行多次),后台的编译器就会把这段热点的字节码编译为高效的机器码,然后再次执行这段优化的代码时,只需执行编译后的机器码即可,提升代码的执行效率。

1.如果觉得这篇文章还不错,来个分享、点赞吧,让更多的人也看到

2.关注公众号执鸢者,与号主一起斩杀前端百题。

点赞
收藏
评论区
推荐文章
卡尔 卡尔
4年前
JS 手撕-经典面试题
引言首先出这篇文章,一方面是为了记录巩固我所学的知识,明白面试的高频考点。不鼓励大家背题的,初衷是希望总结的一些面试题能帮助你查漏补缺,温故知新。这些题并不是全部,如果你还想看得更多,可以访问,目前已经有552道大厂真题了,涵盖各类前端的真题,欢迎加入我们一起来讨论~函数call语法:fn.call(obj,...args)功
徐小夕 徐小夕
4年前
前端进阶之从零到一实现单向 & 双向链表
前言前端工程师对于算法和数据结构这块的知识的掌握程度,是进阶高级工程师的非常重要的标志之一,为了总结一下数据结构和算法方面的知识,笔者今天继续把链表这一块的知识补上,也作为自己知识体系的一个梳理,笔者早在去年就写过一篇关于使用javascript实现二叉树和二叉搜索树的文章,如果感兴趣或者想进阶高级的朋友们可以参考学习一下:JavaScript中的二
保姆级教程:用GPU云主机搭建AI大语言模型并用Flask封装成API,实现用户与模型对话
在本文中,我们将以chatglm6b为例详细介绍GPU云主机搭建AI大语言模型的过程,并使用Flask构建前端界面与该模型进行对话。
Stella981 Stella981
3年前
Javascript解析机制 执行机制
HTML5学堂:在学习JavaScript过程中,我们需要了解事件的机制是怎么执行的?本文将会提到JavaScript事件机制的解析,希望对大家有帮助!javascript解析的过程主要分为两个阶段,分别是编译与执行阶段。在编译期,javascript解释器将完成对javascript代码的预处理,即将javascript代码转换为字节码。在执行
Stella981 Stella981
3年前
DBeaver笔记
<divclass"markdown\_views"<p公司使用的是PostgreSQL数据库,可以使用pgAdmin或者DBeaver进行连接该数据库。个人更喜欢用DBeaver,因为其界面更加美观,操作也相对简单。对于习惯了eclipse的开发者来说,DBeaver绝对是个不错的选择。</p<blockquote<pDBeaver
Stella981 Stella981
3年前
JavaScript 核心原理精讲【朋友圈已刷屏】
作为一名前端工程师,JavaScript你一定每天都在用。但是,即便工作5年以上的前端也不一定用得非常熟,甚至很多前端对JavaScript的掌握程度仅仅停留在会用的层面。而且Vue/React等框架的便利,更是让前端人无需苦学JavaScript原生,就可以快速构建一个网页。它解决了开发者短期的痛点,却为依赖框架开发的程序员埋下长期隐
Stella981 Stella981
3年前
JavaScript 执行效率不行?因为你还没用 V8
作为当下使用最广泛的JavaScript引擎,V8的生态圈非常庞大,这与它革命性的设计密不可分。V8出现之前,所有JavaScript引擎用的都是解释执行的方式,这是JS执行速度过慢的主要原因;而V8引入的即时编译(JIT)双轮驱动设计,混合编译执行和解释执行两种手段,为JavaScript的执行速度带来了极大
Wesley13 Wesley13
3年前
ES6、ES7、ES8学习指南
关注公众号前端开发博客,回复“加群”加入我们一起学习,天天进步作者:CrazyCodeBoy链接:https://www.jianshu.com/p/1ae1dd4cdaa7!(https://oscimg.oschina.net/oscnet/6963c2aae642401db68d0c8a8ea55bfa.jpg)
待兔 待兔
1年前
JS的数据类型你了解多少?
JS的数据类型你了解多少?作为JavaScript的⼊⻔级知识点,JS数据类型在整个JavaScript的学习过程中其实尤为重要。因为在JavaScript编程中,经常会遇到边界数据类型条件判断问题,很多代码只有在某种特定的数据类型下,才能可靠地执⾏。希望