深入瞭解webkit核心第一篇：JavaScript引擎深度解析

標籤：javascript引擎   webkit   核心   chromium   

     看到HorkeyChen寫的文章《[WebKit] JavaScriptCore解析--基礎篇(三)從指令碼代碼到JIT編譯的代碼實現》，寫的很好，深受啟發。想補充一些Horkey沒有寫到的細節比如位元組碼是如何產生的等等，為此成文。

      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是這麼解釋詞法和文法工作流程的：

 詞法器Tokenizer的工作過程如下，就是不斷從字串中尋找一個個的詞（Token），比如找到連續的“true”字串，就建立一個TokenTrue。詞法器工作過程如下：

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

template <ParserMode mode> TokenType LiteralParser<CharType>::Lexer::lex(LiteralParserToken<CharType>& token){    while (m_ptr < m_end && isJSONWhiteSpace(*m_ptr))        ++m_ptr;     if (m_ptr >= m_end) {        token.type = TokEnd;        token.start = token.end = m_ptr;        return TokEnd;    }    token.type = TokError;    token.start = m_ptr;    switch (*m_ptr) {        case '[':            token.type = TokLBracket;            token.end = ++m_ptr;            return TokLBracket;        case ']':            token.type = TokRBracket;            token.end = ++m_ptr;            return TokRBracket;        case '(':            token.type = TokLParen;            token.end = ++m_ptr;            return TokLParen;        case ')':            token.type = TokRParen;            token.end = ++m_ptr;            return TokRParen;        case ',':            token.type = TokComma;            token.end = ++m_ptr;            return TokComma;        case ':':            token.type = TokColon;            token.end = ++m_ptr;            return TokColon;        case '"':            return lexString<mode, '"'>(token);        case 't':            if (m_end - m_ptr >= 4 && m_ptr[1] == 'r' && m_ptr[2] == 'u' && m_ptr[3] == 'e') {                m_ptr += 4;                token.type = TokTrue;                token.end = m_ptr;                return TokTrue;            }            break;        case '-':        case '0':

<span style="font-family: Arial, Helvetica, sans-serif;">經過此過程，一個完整的JSC世界的Token就產生了。然後，再進行文法分析，產生抽象文法樹.</span></span>

UString Parser<LexerType>::parseInner()

{    UString parseError = UString();         unsigned oldFunctionCacheSize = m_functionCache ? m_functionCache->byteSize() : 0;             //抽象文法樹Builder：    ASTBuilder context(const_cast<JSGlobalData*>(m_globalData), const_cast<SourceCode*>(m_source));    if (m_lexer->isReparsing())        m_statementDepth--;    ScopeRef scope = currentScope();             //開始解析產生文法樹的一個節點：    SourceElements* sourceElements = parseSourceElements<CheckForStrictMode>(context);    if (!sourceElements || !consume(EOFTOK))

｝
         舉例說來，根據Token的類型，JSC認為輸入的Token是一個常量聲明，就會使用如下的模板函數產生文法節點（Node），然後放入ASTBuilder裡面：

    接下來，就會調用BytecodeGenerator::generate產生位元組碼，具體分下節分析。我們先看看下面來自JavaScript的一個個文法樹節點產生位元組碼的過程：

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

第一時間獲得部落格更新提醒，以及更多技術資訊分享，歡迎關注個人公眾平台:程式員互動聯盟(coder_online)

1.直接幫你解答wekit技術疑點

2.第一時間獲得業內十多個領域技術文章

3.針對文章內疑點提出問題，第一時間回複你，幫你耐心解答

4.讓你和原創作者成為很好的朋友，拓展自己的人脈資源

掃一掃下方二維碼或搜尋號coder_online即可關注,我們可以線上交流。

深入瞭解webkit核心第一篇：JavaScript引擎深度解析