[WebKit内核] JavaScriptCore深度解析--基础篇（一）字节码生成及语法树的构建

冷不防 2022-10-02 04:43 99阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

看到HorkeyChen写的文章《\[WebKit\] JavaScriptCore解析--基础篇(三)从脚本代码到JIT编译的代码实现》，写的很好，深受启发。想补充一些Horkey没有写到的细节比如字节码是如何生成的等等，为此成文。

![28091016_ExL7.jpg][]

JSC对JavaScript的处理，其实与Webkit对CSS的处理许多地方是类似的，它这么几个部分：

（1）词法分析->出来词语(Token)；

（2）语法分析->出来抽象语法树（AST：Abstract Syntax Tree）；

（3）遍历抽象语法树->生成字节码（Bytecode）；

（4）用解释器（LLInt：Low Level Interpreter）执行字节码；

（5）如果性能不够好就用Baseline JIT编译字节码生成机器码、然后执行此机器码；

（6）如果性能还不够好，就用DFG JIT重新编译字节码生成更好的机器码、然后执行此机器码；

（7）最后，如果还不好，就祭出重器--虚拟器（LLVM：Low Level Virtual Machine）来编译DFG的中间表示代码、生成更高优化的机器码并执行。接下来，我将会用一下系列文章描述此过程。

其中，步骤1、2是类似的，3、4、5步的思想，CSS JIT也是采用类似方法，请参考\[1\]。想写写JSC的文章，用菜鸟和愚公移山的方式，敲开JSC的冰山一角。

本篇主要描述词法和语法解析的细节。

一、 JavaScriptCore的词法分析器工作流程分析

[W3C][]是这么解释词法和语法工作流程的：

![28091016_AApC.jpg][]

词法器Tokenizer的工作过程如下，就是不断从字符串中寻找一个个的词（Token），比如找到连续的“true”字符串，就创建一个TokenTrue。词法器工作过程如下：

JavaScriptCore/interpreter/interpreter.cpp:  
template <typename CharType>

**\[cpp\]** [view plain][][copy][view plain][![在CODE上查看代码片][CODE]][CODE_CODE][![派生到我的代码片][28091016_h2m5.jpg]][28091016_h2m5.jpg 1]

1.  **template** <ParserMode mode> TokenType LiteralParser<CharType>::Lexer::lex(LiteralParserToken<CharType>& token) 
2.  \{ 
3.  **while** (m\_ptr < m\_end && isJSONWhiteSpace(\*m\_ptr)) 
4.   \++m\_ptr; 
5.  
6.  **if** (m\_ptr >= m\_end) \{ 
7.   token.type = TokEnd; 
8.   token.start = token.end = m\_ptr; 
9.  **return** TokEnd; 
10.  \} 
11.  token.type = TokError; 
12.  token.start = m\_ptr; 
13. **switch** (\*m\_ptr) \{ 
14. **case**'\[': 
15.  token.type = TokLBracket; 
16.  token.end = ++m\_ptr; 
17. **return** TokLBracket; 
18. **case**'\]': 
19.  token.type = TokRBracket; 
20.  token.end = ++m\_ptr; 
21. **return** TokRBracket; 
22. **case**'(': 
23.  token.type = TokLParen; 
24.  token.end = ++m\_ptr; 
25. **return** TokLParen; 
26. **case**')': 
27.  token.type = TokRParen; 
28.  token.end = ++m\_ptr; 
29. **return** TokRParen; 
30. **case**',': 
31.  token.type = TokComma; 
32.  token.end = ++m\_ptr; 
33. **return** TokComma; 
34. **case**':': 
35.  token.type = TokColon; 
36.  token.end = ++m\_ptr; 
37. **return** TokColon; 
38. **case**'"': 
39. **return** lexString<mode, '"'>(token); 
40. **case**'t': 
41. **if** (m\_end - m\_ptr >= 4 && m\_ptr\[1\] == 'r' && m\_ptr\[2\] == 'u' && m\_ptr\[3\] == 'e') \{ 
42.  m\_ptr += 4; 
43.  token.type = TokTrue; 
44.  token.end = m\_ptr; 
45. **return** TokTrue; 
46.  \} 
47. **break**; 
48. **case**'-': 
49. **case**'0':

**\[cpp\]** [view plain][][copy][view plain][![在CODE上查看代码片][CODE]][CODE_CODE][![派生到我的代码片][28091016_h2m5.jpg]][28091016_h2m5.jpg 1]

1.   ... 
2.  **case**'9': 
3.  **return** lexNumber(token); 
4.   \} 
5.  **if** (m\_ptr < m\_end) \{ 
6.  **if** (\*m\_ptr == '.') \{ 
7.   token.type = TokDot; 
8.   token.end = ++m\_ptr; 
9.  **return** TokDot; 
10.  \} 
11. **if** (\*m\_ptr == '=') \{ 
12.  token.type = TokAssign; 
13.  token.end = ++m\_ptr; 
14. **return** TokAssign; 
15.  \} 
16. **if** (\*m\_ptr == ';') \{ 
17.  token.type = TokSemi; 
18.  token.end = ++m\_ptr; 
19. **return** TokAssign; 
20.  \} 
21. **if** (isASCIIAlpha(\*m\_ptr) || \*m\_ptr == '\_' || \*m\_ptr == '$') 
22. **return** lexIdentifier(token); 
23. **if** (\*m\_ptr == '\\'') \{ 
24. **return** lexString<mode, '\\''>(token); 
25.  \} 
26.  \} 
27.  m\_lexErrorMessage = String::format("Unrecognized token '%c'", \*m\_ptr).impl(); 
28. **return** TokError; 
29. \}

经过此过程，一个完整的JSC世界的Token就生成了。然后，再进行语法分析，生成抽象语法树.

![28091016_XTk9.jpg][]

JavaScriptCore/parser/parser.cpp:

**\[cpp\]** [view plain][][copy][view plain][![在CODE上查看代码片][CODE]][CODE_CODE][![派生到我的代码片][28091016_h2m5.jpg]][28091016_h2m5.jpg 1]

1.  <span style="font-family: Arial, Helvetica, sans-serif;">PassRefPtr<ParsedNode> Parser<LexerType>::parse(JSGlobalObject\* lexicalGlobalObject, Debugger\* debugger, ExecState\* debuggerExecState, JSObject\*\* exception)</span>

**\[cpp\]** [view plain][][copy][view plain][![在CODE上查看代码片][CODE]][CODE_CODE][![派生到我的代码片][28091016_h2m5.jpg]][28091016_h2m5.jpg 1]

1.  \{ 
2.   ASSERT(lexicalGlobalObject); 
3.   ASSERT(exception && !\*exception); 
4.  **int** errLine; 
5.   UString errMsg; 
6.  
7.  **if** (ParsedNode::scopeIsFunction) 
8.   m\_lexer->setIsReparsing(); 
9.  
10.  m\_sourceElements = 0; 
11. 
12.  errLine = -1; 
13.  errMsg = UString(); 
14. 
15.  UString parseError = parseInner(); 
16.  。。。 
17. ｝

UString Parser<LexerType>::parseInner()

**\[cpp\]** [view plain][][copy][view plain][![在CODE上查看代码片][CODE]][CODE_CODE][![派生到我的代码片][28091016_h2m5.jpg]][28091016_h2m5.jpg 1]

1.  \{ 
2.   UString parseError = UString(); 
3.  
4.   unsigned oldFunctionCacheSize = m\_functionCache ? m\_functionCache->byteSize() : 0;

**\[cpp\]** [view plain][][copy][view plain][![在CODE上查看代码片][CODE]][CODE_CODE][![派生到我的代码片][28091016_h2m5.jpg]][28091016_h2m5.jpg 1]

1.  //抽象语法树Builder：
2.  ASTBuilder context(**const\_cast**<JSGlobalData\*>(m\_globalData), **const\_cast**<SourceCode\*>(m\_source)); 
3.  **if** (m\_lexer->isReparsing()) 
4.   m\_statementDepth--; 
5.  ScopeRef scope = currentScope();

**\[cpp\]** [view plain][][copy][view plain][![在CODE上查看代码片][CODE]][CODE_CODE][![派生到我的代码片][28091016_h2m5.jpg]][28091016_h2m5.jpg 1]

1.  //开始解析生成语法树的一个节点：
2.  SourceElements\* sourceElements = parseSourceElements<CheckForStrictMode>(context); 
3.  **if** (!sourceElements || !consume(EOFTOK))

｝  
 举例说来，根据Token的类型，JSC认为输入的Token是一个常量声明，就会使用如下的模板函数生成语法节点（Node），然后放入ASTBuilder里面：

**\[cpp\]** [view plain][][copy][view plain][![在CODE上查看代码片][CODE]][CODE_CODE][![派生到我的代码片][28091016_h2m5.jpg]][28091016_h2m5.jpg 1]

1.  JavaScriptCore/bytecompiler/NodeCodeGen.cpp: 
2.  **template** <**typename** LexerType> 
3.  **template** <**class** TreeBuilder> TreeConstDeclList Parser<LexerType>::parseConstDeclarationList(TreeBuilder& context) 
4.  \{ 
5.   failIfTrue(strictMode()); 
6.   TreeConstDeclList constDecls = 0; 
7.   TreeConstDeclList tail = 0; 
8.  **do** \{ 
9.   next(); 
10.  matchOrFail(IDENT); 
11. **const** Identifier\* name = m\_token.m\_data.ident; 
12.  next(); 
13. **bool** hasInitializer = match(EQUAL); 
14.  declareVariable(name); 
15.  context.addVar(name, DeclarationStacks::IsConstant | (hasInitializer ? DeclarationStacks::HasInitializer : 0)); 
16.  TreeExpression initializer = 0; 
17. **if** (hasInitializer) \{ 
18.  next(TreeBuilder::DontBuildStrings); // consume '='
19.  initializer = parseAssignmentExpression(context); 
20.  \} 
21.  tail = context.appendConstDecl(m\_lexer->lastLineNumber(), tail, name, initializer); 
22. **if** (!constDecls) 
23.  constDecls = tail; 
24.  \} **while** (match(COMMA)); 
25. **return** constDecls; 
26. \}

接下来，就会调用BytecodeGenerator::generate生成字节码，具体分下节分析。我们先看看下面来自JavaScript的一个个语法树节点生成字节码的过程：

JavaScriptCore/bytecompiler/NodeCodeGen.cpp:  
RegisterID\* BooleanNode::emitBytecode(BytecodeGenerator& generator, RegisterID\* dst)

**\[cpp\]** [view plain][][copy][view plain][![在CODE上查看代码片][CODE]][CODE_CODE][![派生到我的代码片][28091016_h2m5.jpg]][28091016_h2m5.jpg 1]

1.  \{ 
2.  **if** (dst == generator.ignoredResult()) 
3.  **return** 0; 
4.  **return** generator.emitLoad(dst, m\_value); 
5.  \}

以下是我准备写的文章题目：

一、 JavaScriptCore的词法分析器工作流程分析；

二、 JavaScriptCore的语法分析器工作流程分析；

三、 JavaScriptCore的字节码生成流程分析；

四、 LLInt解释器工作流程分析；

五、 Baseline JIT编译器的工作流程分析；

六、 DFG JIT编译器的工作流程分析；

七、LLVM虚拟机的工作流程分析；

八、JavaScriptCore的未来展望；

文笔粗糙，不善表达，希望能越写越好。

>   
>

> *第一时间获得博客更新提醒，以及更多技术信息分享，欢迎关注个人微信公众平台:程序员互动联盟(coder\_online)，扫一扫下方二维码或搜索微信号coder\_online即可关注,我们可以在线交流。*  
>

**![28091016_H5iA.jpg][]**

引用：

1 https://www.webkit.org/blog/3271/webkit-css-selector-jit-compiler/

2 http://blog.csdn.net/horkychen/article/details/8928578

转载于:https://my.oschina.net/coderonline/blog/392971

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220113/7b2b42b92f0c45cb8658fa74ddd23db7.png
[28091016_ExL7.jpg]: /images/20220113/8b1545065f3f4fa3944f4049c3f263ac.png
[W3C]: http://www.whatwg.org/specs/web-apps/current-work/#overview-of-the-parsing-model
[28091016_AApC.jpg]: /images/20220113/ee0e5d98ed4842dbaef8b13dcc8df2c7.png
[view plain]: http://blog.csdn.net/lichwei1983/article/details/44658533#
[CODE]: http://static.oschina.net/uploads/img/201503/28091016_qXCM.png
[CODE_CODE]: https://code.csdn.net/snippets/628961
[28091016_h2m5.jpg]: http://static.oschina.net/uploads/img/201503/28091016_h2m5.jpg
[28091016_h2m5.jpg 1]: https://code.csdn.net/snippets/628961/fork
[28091016_XTk9.jpg]: /images/20220113/be19d6892e424323a09169666c3004a6.png
[28091016_H5iA.jpg]: /images/20220113/498e861ece80488887d7103b63336f24.png

发表评论取消回复

表情：

评论列表（有 0 条评论，99人围观）

还没有评论，来说两句吧...

相关阅读

相关 [WebKit内核] JavaScriptCore深度解析--基础篇（一）字节码生成及语法树的构建

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 看到HorkeyChen写的文章《\[WebK

冷不防/ 2022年10月02日 04:43/ 0 赞/ 100 阅读

相关 JavaScriptCore, WebKit的JS实现(一)

![squirrelfish.png][] 目前，JavaScript的实现已经成为编译领域的一个重要组成部分。主要包括Google的V8, Mozilla的SpiderMo

深碍√TFBOYSˉ_/ 2022年06月03日 08:58/ 0 赞/ 183 阅读

相关 JavaScriptCore, WebKit的JS实现(完)

什么是method JIT? 什么是DFG JIT? JSC的DFG JIT与V8 Crankshaft相比有何优劣? JIT:一个方法式的JIT(a method jit)

曾经终败给现在/ 2022年06月02日 05:42/ 0 赞/ 142 阅读

相关 [WebKit] JavaScriptCore解析--基础篇 (一)JSC与WebCore

先看一下官方的[基本介绍][Link 1],短短几句就塞满了关键字。 SquirrelFish,正式名称是JavaScriptCore,包括register-based(基于

傷城~/ 2022年02月22日 18:38/ 0 赞/ 203 阅读

相关 [WebKit] JavaScriptCore解析--基础篇(二)解释器基础与JSC核心组件

这一篇主要说明解释器的基本工作过程和JSC的核心组件的实现。作为一个语言，就像人在的平时交流时一样，当接收到信息后，包含两个过程：先理解再行动。理解的过程就是语言

墨蓝/ 2022年02月20日 12:19/ 0 赞/ 270 阅读

相关 [WebKit] JavaScriptCore解析--基础篇(三)从脚本代码到JIT编译的代码实现

[前面][Link 1]说了一些解析、生成ByteCode直至JIT的基本概念，下面是对照JavaScriptCore源代码来大致了解它的实现。从JS Scri

墨蓝/ 2022年02月13日 14:07/ 0 赞/ 218 阅读

相关 [WebKit] JavaScriptCore解析--基础篇(四) 页面解析与JavaScript元素的执行

很多地方都已经介绍了JavaScript在浏览器是如何被执行的，这里介绍一下WebKit是如何实现的。主要涉及JS的async,defer及普通脚本的解析与执行过程的代码实现。

ゝ一世哀愁。/ 2022年02月03日 11:55/ 0 赞/ 139 阅读

相关 [WebKit] JavaScriptCore解析--高级篇(二) 类型推导(Type Inference)

类型推导是DFG JIT最重要的一个基础，WebKit官网对此做了一点解释，翻译如下做为学习参考。 Type inference通过profiling values

Love The Way You Lie/ 2022年01月23日 14:41/ 0 赞/ 191 阅读

相关 [WebKit] JavaScriptCore解析--高级篇(一) SSA (static single assignment)

在编译器优化领域，数据结构的选择会直接影响程序优化的有效性。SSA是一种编译器使用的中间语言(intermediate language), 作为编译优化的基础(也是DFG J

野性酷女/ 2022年01月23日 12:15/ 0 赞/ 266 阅读

相关 [WebKit] JavaScriptCore解析--高级篇(三) Register Allocation & Trampoline

Register Allocation 对于一个JIT而言，寄存器分配对系统的消耗通常是一个瓶径。之前有Graph Coloring Allocators, Chaiti

分手后的思念是犯贱/ 2022年01月22日 00:39/ 0 赞/ 167 阅读