當客戶端App主程式建立WKWebView物件時，會建立另外兩個子程式:渲染程式與網路程式。主程式WKWebView發起請求時，先將請求轉發給渲染程式，渲染程式再轉發給網路程式，網路程式請求伺服器。如果請求的是一個網頁，網路程式會將伺服器的響應資料HTML檔案字元流吐給渲染程式。渲染程式拿到HTML檔案字元流，首先要進行解析，將HTML檔案字元流轉換成DOM樹，然後在DOM樹的基礎上，進行渲染操作，也就是佈局、繪製。最後渲染程式將渲染資料吐給主程式WKWebView，WKWebView根據渲染資料建立對應的View展現檢視。整個流程如下圖所示:
什麼是DOM樹
渲染程式獲取到HTML檔案字元流，會將HTML檔案字元流轉換成DOM樹。下圖中左側是一個HTML檔案，右邊就是轉換而成的DOM樹。
1 class HTMLDocument : public Document { // 繼承自Document 2 ... 3 WEBCORE_EXPORT int width(); 4 WEBCORE_EXPORT int height(); 5 ... 6 }
從原始碼中可以看到，HTMLDocument繼承自類Document，Document類的部分原始碼如下:
1 class Document 2 : public ContainerNode // Document繼承自ContainerNode，ContainerNode繼承自Node 3 , public TreeScope 4 , public ScriptExecutionContext 5 , public FontSelectorClient 6 , public FrameDestructionObserver 7 , public Supplementable<Document> 8 , public Logger::Observer 9 , public CanvasObserver { 10 WEBCORE_EXPORT ExceptionOr<Ref<Element>> createElementForBindings(const AtomString& tagName); // 建立Element的方法 11 WEBCORE_EXPORT Ref<Text> createTextNode(const String& data); // 建立文字節點的方法 12 WEBCORE_EXPORT Ref<Comment> createComment(const String& data); // 建立註釋的方法 13 WEBCORE_EXPORT Ref<Element> createElement(const QualifiedName&, bool createdByParser); // 建立Element方法 14 .... 15 }
上面原始碼可以看到Document繼承自Node，而且還可以看到前端十分熟悉的createElement、createTextNode等方法，JavaScript對這些方法的呼叫，最後都轉換為對應C++方法的呼叫。
1 interface HTMLDocument : Document { // HTMLDocument 2 getter (WindowProxy or Element or HTMLCollection) (DOMString name); 3 }; 4 5 6 interface Document : Node { // Document 7 [NewObject, ImplementedAs=createElementForBindings] Element createElement(DOMString localName); // createElement 8 [NewObject] Text createTextNode(DOMString data); // createTextNode 9 ... 10 } 11 12 13 interface HTMLDivElement : HTMLElement { // HTMLDivElement 14 [CEReactions=NotNeeded, Reflect] attribute DOMString align; 15 };
在DOM樹中，每一個節點都繼承自類Node，同時Node還有一個子類Element，有的節點直接繼承自類Node，比如文字節點，而有的節點繼承自類Element，比如div節點。因此針對上面圖中的DOM樹，執行下面的JavaScript語句返回的結果是不一樣的:
1 document.childNodes; // 返回子Node集合，返回DocumentType與HTML節點，都繼承自Node 2 document.children; // 返回子Element集合，只返回HTML節點，DocumentType不繼承自Element
下圖給出部分節點的繼承關係圖:
DOM樹的構建
DOM樹的構建流程可以分位4個步驟: 解碼、分詞、建立節點、新增節點。
1 解碼
渲染程式從網路程式接收過來的是HTML位元組流，而下一步分詞是以字元為單位進行的。由於各種編碼規範的存在，比如ISO-8859-1、UTF-8等，一個字元常常可能對應一個或者多個編碼後的位元組，解碼的目的就是將HTML位元組流轉換成HTML字元流，或者換句話說，就是將原始的HTML位元組流轉換成字串。
2 解碼類圖
從類圖上看，類HTMLDocumentParser處於解碼的核心位置，由這個類呼叫解碼器將HTML位元組流解碼成字元流，儲存到類HTMLInputStream中。
3 解碼流程
整個解碼流程當中，最關健的是如何找到正確的編碼方式。只有找到了正確的編碼方式，才能使用對應的解碼器進行解碼。解碼發生的地方如下面原始碼所示，這個方法在上圖第3個棧幀被呼叫:
1 // HTMLDocumentParser是DecodedDataDocumentParser的子類 2 void DecodedDataDocumentParser::appendBytes(DocumentWriter& writer, const uint8_t* data, size_t length) 3 { 4 if (!length) 5 return; 6 7 String decoded = writer.decoder().decode(data, length); // 真正解碼發生在這裡 8 if (decoded.isEmpty()) 9 return; 10 11 writer.reportDataReceived(); 12 append(decoded.releaseImpl()); 13 }
上面程式碼第7行writer.decoder()返回一個TextResourceDecoder物件，解碼操作由TextResourceDecoder::decode方法完成。下面逐步檢視TextResourceDecoder::decode方法的原始碼:
1 // 只保留了最重要的部分 2 2 String TextResourceDecoder::decode(const char* data, size_t length) 3 3 { 4 4 ... 5 5 6 6 // 如果是HTML檔案，就從head標籤中尋找字符集 7 7 if ((m_contentType == HTML || m_contentType == XML) && !m_checkedForHeadCharset) // HTML and XML 8 8 if (!checkForHeadCharset(data, length, movedDataToBuffer)) 9 9 return emptyString(); 10 10 11 11 ... 12 12 13 13 // m_encoding儲存者從HTML檔案中找到的編碼名稱 14 14 if (!m_codec) 15 15 m_codec = newTextCodec(m_encoding); // 建立具體的編碼器 16 16 17 17 ... 18 18 19 19 // 解碼並返回 20 20 String result = m_codec->decode(m_buffer.data() + lengthOfBOM, m_buffer.size() - lengthOfBOM, false, m_contentType == XML && !m_useLenientXMLDecoding, m_sawError); 21 21 m_buffer.clear(); // 清空儲存的原始未解碼的HTML位元組流 22 22 return result; 23 23 }
從原始碼中可以看到，TextResourceDecoder首先從HTML的<head>標籤中去找編碼方式，因為<head>標籤可以包含<meta>標籤，<meta>標籤可以設定HTML檔案的字符集:
1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- 字符集指定--> 3 <title>DOM Tree</title> 4 <script>window.name = 'Lucy';</script> 5 </head>
如果能找到對應的字符集，TextResourceDeocder將其儲存在成員變數m_encoding當中，並且根據對應的編碼建立真正的解碼器儲存在成員變數m_codec中，最終使用m_codec對位元組流進行解碼，並且返回解碼後的字串。如果帶有字符集的<meta>標籤沒有找到，TextResourceDeocder的m_encoding有預設值windows-1252(等同於ISO-8859-1)。
下面看一下TextResourceDecoder尋找<meta>標籤中字符集的流程，也就是上面原始碼中第8行對checkForHeadCharset函式的呼叫:
1 // 只保留了關健程式碼 2 bool TextResourceDecoder::checkForHeadCharset(const char* data, size_t len, bool& movedDataToBuffer) 3 { 4 ... 5 6 // This is not completely efficient, since the function might go 7 // through the HTML head several times. 8 9 size_t oldSize = m_buffer.size(); 10 m_buffer.grow(oldSize + len); 11 memcpy(m_buffer.data() + oldSize, data, len); // 將位元組流資料拷貝到自己的快取m_buffer裡面 12 13 movedDataToBuffer = true; 14 15 // Continue with checking for an HTML meta tag if we were already doing so. 16 if (m_charsetParser) 17 return checkForMetaCharset(data, len); // 如果已經存在了meta標籤解析器，直接開始解析 18 19 .... 20 21 m_charsetParser = makeUnique<HTMLMetaCharsetParser>(); // 建立meta標籤解析器 22 return checkForMetaCharset(data, len); 23 }
上面原始碼中第11行，類TextResourceDecoder內部儲存了需要解碼的HTML位元組流，這一步驟很重要，後面會講到。先看第17行、21行、22行，這3行主要是使用<meta>標籤解析器解析字符集，使用了懶載入的方式。下面看下checkForMetaCharset這個函式的實現:
1 bool TextResourceDecoder::checkForMetaCharset(const char* data, size_t length) 2 { 3 if (!m_charsetParser->checkForMetaCharset(data, length)) // 解析meta標籤字符集 4 return false; 5 6 setEncoding(m_charsetParser->encoding(), EncodingFromMetaTag); // 找到後設定字元編碼名稱 7 m_charsetParser = nullptr; 8 m_checkedForHeadCharset = true; 9 return true; 10 }
上面原始碼第3行可以看到，整個解析<meta>標籤的任務在類HTMLMetaCharsetParser::checkForMetaCharset中完成。
1 // 只保留了關健程式碼 2 bool HTMLMetaCharsetParser::checkForMetaCharset(const char* data, size_t length) 3 { 4 if (m_doneChecking) // 標誌位，避免重複解析 5 return true; 6 7 8 // We still don't have an encoding, and are in the head. 9 // The following tags are allowed in <head>: 10 // SCRIPT|STYLE|META|LINK|OBJECT|TITLE|BASE 11 // 12 // We stop scanning when a tag that is not permitted in <head> 13 // is seen, rather when </head> is seen, because that more closely 14 // matches behavior in other browsers; more details in 15 // <http://bugs.webkit.org/show_bug.cgi?id=3590>. 16 // 17 // Additionally, we ignore things that looks like tags in <title>, <script> 18 // and <noscript>; see <http://bugs.webkit.org/show_bug.cgi?id=4560>, 19 // <http://bugs.webkit.org/show_bug.cgi?id=12165> and 20 // <http://bugs.webkit.org/show_bug.cgi?id=12389>. 21 // 22 // Since many sites have charset declarations after <body> or other tags 23 // that are disallowed in <head>, we don't bail out until we've checked at 24 // least bytesToCheckUnconditionally bytes of input. 25 26 constexpr int bytesToCheckUnconditionally = 1024; // 如果解析了1024個字元還未找到帶有字符集的<meta>標籤，整個解析也算完成，此時沒有解析到正確的字符集，就使用預設編碼windows-1252(等同於ISO-8859-1) 27 28 bool ignoredSawErrorFlag; 29 m_input.append(m_codec->decode(data, length, false, false, ignoredSawErrorFlag)); // 對位元組流進行解碼 30 31 while (auto token = m_tokenizer.nextToken(m_input)) { // m_tokenizer進行分詞操作，找meta標籤也需要進行分詞，分詞操作後面講 32 bool isEnd = token->type() == HTMLToken::EndTag; 33 if (isEnd || token->type() == HTMLToken::StartTag) { 34 AtomString tagName(token->name()); 35 if (!isEnd) { 36 m_tokenizer.updateStateFor(tagName); 37 if (tagName == metaTag && processMeta(*token)) { // 找到meta標籤進行處理 38 m_doneChecking = true; 39 return true; // 如果找到了帶有編碼的meta標籤，直接返回 40 } 41 } 42 43 if (tagName != scriptTag && tagName != noscriptTag 44 && tagName != styleTag && tagName != linkTag 45 && tagName != metaTag && tagName != objectTag 46 && tagName != titleTag && tagName != baseTag 47 && (isEnd || tagName != htmlTag) 48 && (isEnd || tagName != headTag)) { 49 m_inHeadSection = false; 50 } 51 } 52 53 if (!m_inHeadSection && m_input.numberOfCharactersConsumed() >= bytesToCheckUnconditionally) { // 如果分詞已經進入了<body>標籤範圍，同時分詞數量已經超過了1024，也算成功 54 m_doneChecking = true; 55 return true; 56 } 57 } 58 59 return false; 60 }
上面原始碼第29行，類HTMLMetaCharsetParser也有一個解碼器m_codec，解碼器是在HTMLMetaCharsetParser物件建立時生成，這個解碼器的真實型別是TextCodecLatin1(Latin1編碼也就是ISO-8859-1，等同於windows-1252編碼)。之所以可以直接使用TextCodecLatin1解碼器，是因為<meta>標籤如果設定正確，都是英文字元，完全可以使用TextCodecLatin1進行解析出來。這樣就避免了為了找到<meta>標籤，需要對位元組流進行解碼，而要解碼就必須要找到<meta>標籤這種雞生蛋、蛋生雞的問題。
程式碼第37行對找到的<meta>標籤進行處理，這個函式比較簡單，主要是解析<meta>標籤當中的屬性，然後檢視這些屬性名中有沒有charset。
1 bool HTMLMetaCharsetParser::processMeta(HTMLToken& token) 2 { 3 AttributeList attributes; 4 for (auto& attribute : token.attributes()) { // 獲取meta標籤屬性 5 String attributeName = StringImpl::create8BitIfPossible(attribute.name); 6 String attributeValue = StringImpl::create8BitIfPossible(attribute.value); 7 attributes.append(std::make_pair(attributeName, attributeValue)); 8 } 9 10 m_encoding = encodingFromMetaAttributes(attributes); // 從屬性中找字符集設定屬性charset 11 return m_encoding.isValid(); 12 }
上面分析TextResourceDecoder::checkForHeadCharset函式時，講過第11行TextResourceDecoder類儲存HTML位元組流的操作很重要。原因是可能整個HTML位元組流裡面可能確實沒有設定charset的<meta>標籤，此時TextResourceDecoder::checkForHeadCharset函式就要返回false，導致TextResourceDecoder::decode函式返回空字串，也就是不進行任何解碼。是不是這樣呢？真實的情況是，在接收HTML位元組流整個過程中由於確實沒有找到帶有charset屬性的<meta>標籤，那麼整個接收期間都不會解碼。但是完整的HTML位元組流會被儲存在TextResourceDecoder的成員變數m_buffer裡面，當整個HTML位元組流接收結束的時，會有如下呼叫棧:
從呼叫棧可以看到，當HTML位元組流接收完成，最終會呼叫TextResourceDecoder::flush方法，這個方法會將TextResourceDecoder中有m_buffer儲存的HTML位元組流進行解碼，由於在接收HTML位元組流期間未成功找到編碼方式，因此m_buffer裡面儲存的就是所有待解碼的HTML位元組流，然後在這裡使用預設的編碼windows-1252對全部位元組流進行解碼。因此，如果HTML位元組流中包含漢字，那麼如果不指定字符集，最終頁面就會出現亂碼。解碼完成後，會將解碼之後的字元流儲存到HTMLDocumentParser中。
1 void DecodedDataDocumentParser::flush(DocumentWriter& writer) 2 { 3 String remainingData = writer.decoder().flush(); 4 if (remainingData.isEmpty()) 5 return; 6 7 writer.reportDataReceived(); 8 append(remainingData.releaseImpl()); // 解碼後的字元流儲存到HTMLDocumentParser 9 }
4 解碼總結
整個解碼過程可以分位兩種情形: 第一種情形是HTML位元組流可以解析出帶有charset屬性的<meta>標籤，這樣就可以獲取相應的編碼方式，那麼每接收到一個HML位元組流，都可以使用相應的編碼方式進行解碼，將解碼後的字元流新增到HTMLInputStream當中；第二種是HTML位元組流不能解析帶有charset屬性的<meta>標籤，這樣每接收到一個HTML位元組流，都快取到TextResourceDecoder的m_buffer快取，等完整的HTML位元組流接收完畢，就會使用預設的編碼windows-1252進行解碼。
分詞
接收到的HTML位元組流經過解碼，成為儲存在HTMLInputStream中的字元流。分詞的過程就是從HTMLInputStream中依次取出每一個字元，然後判斷字元是否是特殊的HTML字元'<'、'/'、'>'、'='等。根據這些特殊字元的分割，就能解析出HTML標籤名以及屬性列表，類HTMLToken就是儲存分詞出來的結果。
1 分詞類圖
從類圖中可以看到，分詞最重要的是類HTMLTokenizer和類HTMLToken。下面是類HTMLToken的主要資訊:
1 // 只保留了主要資訊 2 2 class HTMLToken { 3 3 public: 4 4 enum Type { // Token的型別 5 5 Uninitialized, // Token初始化時的型別 6 6 DOCTYPE, // 代表Token是DOCType標籤 7 7 StartTag, // 代表Token是一個開始標籤 8 8 EndTag, // 代表Token是一個結束標籤 9 9 Comment, // 代表Token是一個註釋 10 10 Character, // 代表Token是文字 11 11 EndOfFile, // 代表Token是檔案結尾 12 12 }; 13 13 14 14 struct Attribute { // 儲存屬性的資料結構 15 15 Vector<UChar, 32> name; // 屬性名 16 16 Vector<UChar, 64> value; // 屬性值 17 17 18 18 // Used by HTMLSourceTracker. 19 19 unsigned startOffset; 20 20 unsigned endOffset; 21 21 }; 22 22 23 23 typedef Vector<Attribute, 10> AttributeList; // 屬性列表 24 24 typedef Vector<UChar, 256> DataVector; // 儲存Token名 25 25 26 26 ... 27 27 28 28 private: 29 29 Type m_type; 30 30 DataVector m_data; 31 31 // For StartTag and EndTag 32 32 bool m_selfClosing; // Token是注入<img>一樣自結束標籤 33 33 AttributeList m_attributes; 34 34 Attribute* m_currentAttribute; // 當前正在解析的屬性 35 35 };
2 分詞流程
上面分詞流程中HTMLDocumentParser::pumpTokenizerLoop方法是最重要的，從方法名字可以看出這個方法裡面包含迴圈邏輯:
1 // 只保留關健程式碼 2 bool HTMLDocumentParser::pumpTokenizerLoop(SynchronousMode mode, bool parsingFragment, PumpSession& session) 3 { 4 do { // 分詞迴圈體開始 5 ... 6 7 if (UNLIKELY(mode == AllowYield && m_parserScheduler->shouldYieldBeforeToken(session))) // 避免長時間處於分詞迴圈中，這裡根據條件暫時退出迴圈 8 return true; 9 10 if (!parsingFragment) 11 m_sourceTracker.startToken(m_input.current(), m_tokenizer); 12 13 auto token = m_tokenizer.nextToken(m_input.current()); // 進行分詞操作，取出一個token 14 if (!token) 15 return false; // 分詞沒有產生token，就跳出迴圈 16 17 if (!parsingFragment) 18 m_sourceTracker.endToken(m_input.current(), m_tokenizer); 19 20 constructTreeFromHTMLToken(token); // 根據token構建DOM樹 21 } while (!isStopped()); 22 23 return false; 24 }
上面程式碼中第7行會有一個yield退出操作，這是為了避免長時間處於分詞迴圈，佔用主執行緒。當退出條件為真時，會從分詞迴圈中返回，返回值為true。下面是退出判斷程式碼:
1 // 只保留關健程式碼 2 bool HTMLParserScheduler::shouldYieldBeforeToken(PumpSession& session) 3 { 4 ... 5 6 // numberOfTokensBeforeCheckingForYield是靜態變數，定義為4096 7 // session.processedTokensOnLastCheck表示從上一次退出為止，以及處理過的token個數 8 // session.didSeeScript表示在分詞過程中是否出現過script標籤 9 if (UNLIKELY(session.processedTokens > session.processedTokensOnLastCheck + numberOfTokensBeforeCheckingForYield || session.didSeeScript)) 10 return checkForYield(session); 11 12 ++session.processedTokens; 13 return false; 14 } 15 16 17 bool HTMLParserScheduler::checkForYield(PumpSession& session) 18 { 19 session.processedTokensOnLastCheck = session.processedTokens; 20 session.didSeeScript = false; 21 22 Seconds elapsedTime = MonotonicTime::now() - session.startTime; 23 return elapsedTime > m_parserTimeLimit; // m_parserTimeLimit的值預設是500ms，從分詞開始超過500ms就要先yield 24 }
如果命中了上面的yield退出條件，那麼什麼時候再次進入分詞呢？下面的程式碼展示了再次進入分詞的過程:
1 // 保留關鍵程式碼
2 void HTMLDocumentParser::pumpTokenizer(SynchronousMode mode) 3 { 4 ... 5 6 if (shouldResume) // 從pumpTokenizerLoop中yield退出時返回值為true 7 m_parserScheduler->scheduleForResume(); 8 9 } 10 11 12 13 void HTMLParserScheduler::scheduleForResume() 14 { 15 ASSERT(!m_suspended); 16 m_continueNextChunkTimer.startOneShot(0_s); // 觸發timer(0s後觸發)，觸發後的響應函式為HTMLParserScheduler::continueNextChunkTimerFired 17 } 18 19 20 // 保留關健程式碼 21 void HTMLParserScheduler::continueNextChunkTimerFired() 22 { 23 ... 24 25 m_parser.resumeParsingAfterYield(); // 重新Resume分詞過程 26 } 27 28 29 void HTMLDocumentParser::resumeParsingAfterYield() 30 { 31 // pumpTokenizer can cause this parser to be detached from the Document, 32 // but we need to ensure it isn't deleted yet. 33 Ref<HTMLDocumentParser> protectedThis(*this); 34 35 // We should never be here unless we can pump immediately. 36 // Call pumpTokenizer() directly so that ASSERTS will fire if we're wrong. 37 pumpTokenizer(AllowYield); // 重新進入分詞過程，該函式會呼叫pumpTokenizerLoop 38 endIfDelayed(); 39 }
從上面程式碼可以看出，再次進入分詞過程是通過觸發一個Timer來實現的，雖然這個Timer在0s後觸發，但是並不意味著Timer的響應函式會立刻執行。如果在此之前主執行緒已經有其他任務到達了執行時機，會有被執行的機會。
繼續看HTMLDocumentParser::pumpTokenizerLoop函式的第13行，這一行進行分詞操作，從解碼後的字元流中分出一個token。實現分詞的程式碼位於HTMLTokenizer::processToken:
1 // 只保留關鍵程式碼 2 bool HTMLTokenizer::processToken(SegmentedString& source) 3 { 4 5 ... 6 7 if (!m_preprocessor.peek(source, isNullCharacterSkippingState(m_state))) // 取出source內部指向的字元，賦給m_nextInputCharacter 8 return haveBufferedCharacterToken(); 9 UChar character = m_preprocessor.nextInputCharacter(); // 獲取character 10 11 // https://html.spec.whatwg.org/#tokenization 12 switch (m_state) { // 進行狀態轉換，m_state初始值為DataState 13 ... 14 } 15 16 return false; 17 }
這個方法由於內部要做很多狀態轉換，總共有1200多行，後面會有4個例子來解釋狀態轉換的邏輯。
首先來看InputStreamPreprocessor::peek方法:
1 // Returns whether we succeeded in peeking at the next character. 2 // The only way we can fail to peek is if there are no more 3 // characters in |source| (after collapsing \r\n, etc). 4 ALWAYS_INLINE bool InputStreamPreprocessor::peek(SegmentedString& source, bool skipNullCharacters = false) 5 { 6 if (UNLIKELY(source.isEmpty())) 7 return false; 8 9 m_nextInputCharacter = source.currentCharacter(); // 獲取字元流source內部指向的當前字元 10 11 // Every branch in this function is expensive, so we have a 12 // fast-reject branch for characters that don't require special 13 // handling. Please run the parser benchmark whenever you touch 14 // this function. It's very hot. 15 constexpr UChar specialCharacterMask = '\n' | '\r' | '\0'; 16 if (LIKELY(m_nextInputCharacter & ~specialCharacterMask)) { 17 m_skipNextNewLine = false; 18 return true; 19 } 20 21 return processNextInputCharacter(source, skipNullCharacters); // 跳過空字元，將\r\n換行符合併成\n 22 } 23 24 25 bool InputStreamPreprocessor::processNextInputCharacter(SegmentedString& source, bool skipNullCharacters) 26 { 27 ProcessAgain: 28 ASSERT(m_nextInputCharacter == source.currentCharacter()); 29 30 // 針對\r\n換行符，下面if語句處理\r字元並且設定m_skipNextNewLine=true，後面處理\n就直接忽略 31 if (m_nextInputCharacter == '\n' && m_skipNextNewLine) { 32 m_skipNextNewLine = false; 33 source.advancePastNewline(); // 向前移動字元 34 if (source.isEmpty()) 35 return false; 36 m_nextInputCharacter = source.currentCharacter(); 37 } 38 39 // 如果是\r\n連續的換行符，那麼第一次遇到\r字元，將\r字元替換成\n字元，同時設定標誌m_skipNextNewLine=true 40 if (m_nextInputCharacter == '\r') { 41 m_nextInputCharacter = '\n'; 42 m_skipNextNewLine = true; 43 return true; 44 } 45 m_skipNextNewLine = false; 46 if (m_nextInputCharacter || isAtEndOfFile(source)) 47 return true; 48 49 // 跳過空字元 50 if (skipNullCharacters && !m_tokenizer.neverSkipNullCharacters()) { 51 source.advancePastNonNewline(); 52 if (source.isEmpty()) 53 return false; 54 m_nextInputCharacter = source.currentCharacter(); 55 goto ProcessAgain; // 跳轉到開頭 56 } 57 m_nextInputCharacter = replacementCharacter; 58 return true; 59 }
由於peek方法會跳過空字元，同時合併\r\n字元為\n字元，所以一個字元流source如果包含了空格或者\r\n換行符，實際上處理起來如下圖所示:
HTMLTokenizer::processToken內部定義了一個狀態機，下面以四種情形來進行解釋。
第一種 <!DCOTYPE>標籤
1 BEGIN_STATE(DataState) // 剛開始解析是DataState狀態 2 if (character == '&') 3 ADVANCE_PAST_NON_NEWLINE_TO(CharacterReferenceInDataState); 4 if (character == '<') {// 整個字元流一開始是'<'，那麼表示是一個標籤的開始 5 if (haveBufferedCharacterToken()) 6 RETURN_IN_CURRENT_STATE(true); 7 ADVANCE_PAST_NON_NEWLINE_TO(TagOpenState); // 跳轉到TagOpenState狀態，並取去下一個字元是'!" 8 } 9 if (character == kEndOfFileMarker) 10 return emitEndOfFile(source); 11 bufferCharacter(character); 12 ADVANCE_TO(DataState); 13 END_STATE() 14 15 // ADVANCE_PAST_NON_NEWLINE_TO定義 16 #define ADVANCE_PAST_NON_NEWLINE_TO(newState) \ 17 do { \ 18 if (!m_preprocessor.advancePastNonNewline(source, isNullCharacterSkippingState(newState))) { \ // 如果往下移動取不到下一個字元 19 m_state = newState; \ // 儲存狀態 20 return haveBufferedCharacterToken(); \ // 返回 21 } \ 22 character = m_preprocessor.nextInputCharacter(); \ // 先取出下一個字元 23 goto newState; \ // 跳轉到指定狀態 24 } while (false) 25 26 27 BEGIN_STATE(TagOpenState) 28 if (character == '!') // 滿足此條件 29 ADVANCE_PAST_NON_NEWLINE_TO(MarkupDeclarationOpenState); // 同理，跳轉到MarkupDeclarationOpenState狀態，並且取出下一個字元'D' 30 if (character == '/') 31 ADVANCE_PAST_NON_NEWLINE_TO(EndTagOpenState); 32 if (isASCIIAlpha(character)) { 33 m_token.beginStartTag(convertASCIIAlphaToLower(character)); 34 ADVANCE_PAST_NON_NEWLINE_TO(TagNameState); 35 } 36 if (character == '?') { 37 parseError(); 38 // The spec consumes the current character before switching 39 // to the bogus comment state, but it's easier to implement 40 // if we reconsume the current character. 41 RECONSUME_IN(BogusCommentState); 42 } 43 parseError(); 44 bufferASCIICharacter('<'); 45 RECONSUME_IN(DataState); 46 END_STATE() 47 48 BEGIN_STATE(MarkupDeclarationOpenState) 49 if (character == '-') { 50 auto result = source.advancePast("--"); 51 if (result == SegmentedString::DidMatch) { 52 m_token.beginComment(); 53 SWITCH_TO(CommentStartState); 54 } 55 if (result == SegmentedString::NotEnoughCharacters) 56 RETURN_IN_CURRENT_STATE(haveBufferedCharacterToken()); 57 } else if (isASCIIAlphaCaselessEqual(character, 'd')) { // 由於character == 'D'，滿足此條件 58 auto result = source.advancePastLettersIgnoringASCIICase("doctype"); // 看解碼後的字元流中是否有完整的"doctype" 59 if (result == SegmentedString::DidMatch) 60 SWITCH_TO(DOCTYPEState); // 如果匹配，則跳轉到DOCTYPEState，同時取出當前指向的字元，由於上面source字元流已經移動了"doctype"，因此此時取出的字元為'>' 61 if (result == SegmentedString::NotEnoughCharacters) // 如果不匹配 62 RETURN_IN_CURRENT_STATE(haveBufferedCharacterToken()); // 儲存狀態，直接返回 63 } else if (character == '[' && shouldAllowCDATA()) { 64 auto result = source.advancePast("[CDATA["); 65 if (result == SegmentedString::DidMatch) 66 SWITCH_TO(CDATASectionState); 67 if (result == SegmentedString::NotEnoughCharacters) 68 RETURN_IN_CURRENT_STATE(haveBufferedCharacterToken()); 69 } 70 parseError(); 71 RECONSUME_IN(BogusCommentState); 72 END_STATE() 73 74 75 #define SWITCH_TO(newState) \ 76 do { \ 77 if (!m_preprocessor.peek(source, isNullCharacterSkippingState(newState))) { \ 78 m_state = newState; \ 79 return haveBufferedCharacterToken(); \ 80 } \ 81 character = m_preprocessor.nextInputCharacter(); \ // 取出下一個字元 82 goto newState; \ // 跳轉到指定的state 83 } while (false) 84 85 86 #define RETURN_IN_CURRENT_STATE(expression) \ 87 do { \ 88 m_state = currentState; \ // 儲存當前狀態 89 return expression; \ 90 } while (false) 91 92 93 BEGIN_STATE(DOCTYPEState) 94 if (isTokenizerWhitespace(character)) 95 ADVANCE_TO(BeforeDOCTYPENameState); 96 if (character == kEndOfFileMarker) { 97 parseError(); 98 m_token.beginDOCTYPE(); 99 m_token.setForceQuirks(); 100 return emitAndReconsumeInDataState(); 101 } 102 parseError(); 103 RECONSUME_IN(BeforeDOCTYPENameState); 104 END_STATE() 105 106 107 #define RECONSUME_IN(newState) \ 108 do { \ // 直接跳轉到指定state 109 goto newState; \ 110 } while (false) 111 112 113 BEGIN_STATE(BeforeDOCTYPENameState) 114 if (isTokenizerWhitespace(character)) 115 ADVANCE_TO(BeforeDOCTYPENameState); 116 if (character == '>') { // character == '>'，匹配此處，到此DOCTYPE標籤匹配完畢 117 parseError(); 118 m_token.beginDOCTYPE(); 119 m_token.setForceQuirks(); 120 return emitAndResumeInDataState(source); 121 } 122 if (character == kEndOfFileMarker) { 123 parseError(); 124 m_token.beginDOCTYPE(); 125 m_token.setForceQuirks(); 126 return emitAndReconsumeInDataState(); 127 } 128 m_token.beginDOCTYPE(toASCIILower(character)); 129 ADVANCE_PAST_NON_NEWLINE_TO(DOCTYPENameState); 130 END_STATE() 131 132 133 134 135 inline bool HTMLTokenizer::emitAndResumeInDataState(SegmentedString& source) 136 { 137 saveEndTagNameIfNeeded(); 138 m_state = DataState; // 重置狀態為初始狀態DataState 139 source.advancePastNonNewline(); // 移動到下一個字元 140 return true; 141 }
DOCTYPE Token經歷了6個狀態最終被解析出來，整個過程如下圖所示:
當Token解析完畢之後，分詞狀態又被重置為DataState，同時需要注意的時，此時字元流source內部指向的是下一個字元'<'。
上面程式碼第61行在用字元流source匹配字串"doctype"時，可能出現匹配不上的情形。為什麼會這樣呢？這是因為整個DOM樹的構建流程，並不是先要解碼完成，解碼完成之後獲取到完整的字元流才進行分詞。從前面解碼可以知道，解碼可能是一邊接收位元組流，一邊進行解碼的，因此分詞也是這樣，只要能解碼出一段字元流，就會立即進行分詞。整個流程會出現如下圖所示:
由於這個原因，用來分詞的字元流可能是不完整的。對於出現不完整情形的DOCTYPE分詞過程如下圖所示:
上面介紹瞭解碼、分詞、解碼、分詞處理DOCTYPE標籤的情形，可以看到從邏輯上這種情形與完整解碼再分詞是一樣的。後續介紹的時都會只針對完整解碼再分詞的情形，對於一邊解碼一邊分詞的情形，只需要正確的認識source字元流內部指標的移動，並不難分析。
第二種 html標籤
html標籤的分詞過程和DOCTYPE類似，其相關程式碼如下:
1 BEGIN_STATE(TagOpenState) 2 if (character == '!') 3 ADVANCE_PAST_NON_NEWLINE_TO(MarkupDeclarationOpenState); 4 if (character == '/') 5 ADVANCE_PAST_NON_NEWLINE_TO(EndTagOpenState); 6 if (isASCIIAlpha(character)) { // 在開標籤狀態下，當前字元為'h' 7 m_token.beginStartTag(convertASCIIAlphaToLower(character)); // 將'h'新增到Token名中 8 ADVANCE_PAST_NON_NEWLINE_TO(TagNameState); // 跳轉到TagNameState，並移動到下一個字元't' 9 } 10 if (character == '?') { 11 parseError(); 12 // The spec consumes the current character before switching 13 // to the bogus comment state, but it's easier to implement 14 // if we reconsume the current character. 15 RECONSUME_IN(BogusCommentState); 16 } 17 parseError(); 18 bufferASCIICharacter('<'); 19 RECONSUME_IN(DataState); 20 END_STATE() 21 22 23 BEGIN_STATE(TagNameState) 24 if (isTokenizerWhitespace(character)) 25 ADVANCE_TO(BeforeAttributeNameState); 26 if (character == '/') 27 ADVANCE_PAST_NON_NEWLINE_TO(SelfClosingStartTagState); 28 if (character == '>') // 在這個狀態下遇到起始標籤終止字元 29 return emitAndResumeInDataState(source); // 當前分詞結束，重置分詞狀態為DataState 30 if (m_options.usePreHTML5ParserQuirks && character == '<') 31 return emitAndReconsumeInDataState(); 32 if (character == kEndOfFileMarker) { 33 parseError(); 34 RECONSUME_IN(DataState); 35 } 36 m_token.appendToName(toASCIILower(character)); // 將當前字元新增到Token名 37 ADVANCE_PAST_NON_NEWLINE_TO(TagNameState); // 繼續跳轉到當前狀態，並移動到下一個字元 38 END_STATE()
第三種 帶有屬性的標籤div
HTML標籤可以帶有屬性，屬性由屬性名和屬性值組成，屬性之間以及屬性與標籤名之間用空格分隔:
1 <!-- div標籤有兩個屬性，屬性名為class和align，它們的值都帶有引號 --> 2 <div class="news" align="center">Hello,World!</div> 3 4 5 <!-- 屬性值也可以不帶引號 --> 6 <div class=news align=center>Hello,World!</div>
整個div標籤的解析中，標籤名div的解析流程和上面的html標籤解析一樣，當在解析標籤名的過程中，碰到了空白字元，說明要開始解析屬性了，下面是相關程式碼:
1 BEGIN_STATE(TagNameState) 2 if (isTokenizerWhitespace(character)) // 在解析TagName時遇到空白字元，標誌屬性開始 3 ADVANCE_TO(BeforeAttributeNameState); 4 if (character == '/') 5 ADVANCE_PAST_NON_NEWLINE_TO(SelfClosingStartTagState); 6 if (character == '>') 7 return emitAndResumeInDataState(source); 8 if (m_options.usePreHTML5ParserQuirks && character == '<') 9 return emitAndReconsumeInDataState(); 10 if (character == kEndOfFileMarker) { 11 parseError(); 12 RECONSUME_IN(DataState); 13 } 14 m_token.appendToName(toASCIILower(character)); 15 ADVANCE_PAST_NON_NEWLINE_TO(TagNameState); 16 END_STATE() 17 18 #define ADVANCE_TO(newState) \ 19 do { \ 20 if (!m_preprocessor.advance(source, isNullCharacterSkippingState(newState))) { \ // 移動到下一個字元 21 m_state = newState; \ 22 return haveBufferedCharacterToken(); \ 23 } \ 24 character = m_preprocessor.nextInputCharacter(); \ 25 goto newState; \ // 跳轉到指定狀態 26 } while (false) 27 28 29 BEGIN_STATE(BeforeAttributeNameState) 30 if (isTokenizerWhitespace(character)) // 如果標籤名後有連續空格，那麼就不停的跳過，在當前狀態不停迴圈 31 ADVANCE_TO(BeforeAttributeNameState); 32 if (character == '/') 33 ADVANCE_PAST_NON_NEWLINE_TO(SelfClosingStartTagState); 34 if (character == '>') 35 return emitAndResumeInDataState(source); 36 if (m_options.usePreHTML5ParserQuirks && character == '<') 37 return emitAndReconsumeInDataState(); 38 if (character == kEndOfFileMarker) { 39 parseError(); 40 RECONSUME_IN(DataState); 41 } 42 if (character == '"' || character == '\'' || character == '<' || character == '=') 43 parseError(); 44 m_token.beginAttribute(source.numberOfCharactersConsumed()); // Token的屬性列表增加一個，用來存放新的屬性名與屬性值 45 m_token.appendToAttributeName(toASCIILower(character)); // 新增屬性名 46 ADVANCE_PAST_NON_NEWLINE_TO(AttributeNameState); // 跳轉到AttributeNameState，並且移動到下一個字元 47 END_STATE() 48 49 50 BEGIN_STATE(AttributeNameState) 51 if (isTokenizerWhitespace(character)) 52 ADVANCE_TO(AfterAttributeNameState); 53 if (character == '/') 54 ADVANCE_PAST_NON_NEWLINE_TO(SelfClosingStartTagState); 55 if (character == '=') 56 ADVANCE_PAST_NON_NEWLINE_TO(BeforeAttributeValueState); // 在解析屬性名的過程中如果碰到=，說明屬性名結束，屬性值就要開始 57 if (character == '>') 58 return emitAndResumeInDataState(source); 59 if (m_options.usePreHTML5ParserQuirks && character == '<') 60 return emitAndReconsumeInDataState(); 61 if (character == kEndOfFileMarker) { 62 parseError(); 63 RECONSUME_IN(DataState); 64 } 65 if (character == '"' || character == '\'' || character == '<' || character == '=') 66 parseError(); 67 m_token.appendToAttributeName(toASCIILower(character)); 68 ADVANCE_PAST_NON_NEWLINE_TO(AttributeNameState); 69 END_STATE() 70 71 72 BEGIN_STATE(BeforeAttributeValueState) 73 if (isTokenizerWhitespace(character)) 74 ADVANCE_TO(BeforeAttributeValueState); 75 if (character == '"') 76 ADVANCE_PAST_NON_NEWLINE_TO(AttributeValueDoubleQuotedState); // 有的屬性值有引號包圍，這裡跳轉到AttributeValueDoubleQuotedState，並移動到下一個字元 77 if (character == '&') 78 RECONSUME_IN(AttributeValueUnquotedState); 79 if (character == '\'') 80 ADVANCE_PAST_NON_NEWLINE_TO(AttributeValueSingleQuotedState); 81 if (character == '>') { 82 parseError(); 83 return emitAndResumeInDataState(source); 84 } 85 if (character == kEndOfFileMarker) { 86 parseError(); 87 RECONSUME_IN(DataState); 88 } 89 if (character == '<' || character == '=' || character == '`') 90 parseError(); 91 m_token.appendToAttributeValue(character); // 有的屬性值沒有引號包圍，新增屬性值字元到Token 92 ADVANCE_PAST_NON_NEWLINE_TO(AttributeValueUnquotedState); // 跳轉到AttributeValueUnquotedState，並移動到下一個字元 93 END_STATE() 94 95 BEGIN_STATE(AttributeValueDoubleQuotedState) 96 if (character == '"') { // 在當前狀態下如果遇到引號，說明屬性值結束 97 m_token.endAttribute(source.numberOfCharactersConsumed()); // 結束屬性解析 98 ADVANCE_PAST_NON_NEWLINE_TO(AfterAttributeValueQuotedState); // 跳轉到AfterAttributeValueQuotedState，並移動到下一個字元 99 } 100 if (character == '&') { 101 m_additionalAllowedCharacter = '"'; 102 ADVANCE_PAST_NON_NEWLINE_TO(CharacterReferenceInAttributeValueState); 103 } 104 if (character == kEndOfFileMarker) { 105 parseError(); 106 m_token.endAttribute(source.numberOfCharactersConsumed()); 107 RECONSUME_IN(DataState); 108 } 109 m_token.appendToAttributeValue(character); // 將屬性值字元新增到Token 110 ADVANCE_TO(AttributeValueDoubleQuotedState); // 跳轉到當前狀態 111 END_STATE() 112 113 114 BEGIN_STATE(AfterAttributeValueQuotedState) 115 if (isTokenizerWhitespace(character)) 116 ADVANCE_TO(BeforeAttributeNameState); // 屬性值解析完畢，如果後面繼續跟著空白字元，說明後續還有屬性要解析，調回到BeforeAttributeNameState 117 if (character == '/') 118 ADVANCE_PAST_NON_NEWLINE_TO(SelfClosingStartTagState); 119 if (character == '>') 120 return emitAndResumeInDataState(source); // 屬性值解析完畢，如果遇到'>'字元，說明整個標籤也要解析完畢了，此時結束當前標籤解析，並且重置分詞狀態為DataState，並移動到下一個字元 121 if (m_options.usePreHTML5ParserQuirks && character == '<') 122 return emitAndReconsumeInDataState(); 123 if (character == kEndOfFileMarker) { 124 parseError(); 125 RECONSUME_IN(DataState); 126 } 127 parseError(); 128 RECONSUME_IN(BeforeAttributeNameState); 129 END_STATE() 130 131 BEGIN_STATE(AttributeValueUnquotedState) 132 if (isTokenizerWhitespace(character)) { // 當解析不帶引號的屬性值時遇到空白字元(這與帶引號的屬性值不一樣，帶引號的屬性值可以包含空白字元)，說明當前屬性解析完畢，後面還有其他屬性，跳轉到BeforeAttributeNameState，並且移動到下一個字元 133 m_token.endAttribute(source.numberOfCharactersConsumed()); 134 ADVANCE_TO(BeforeAttributeNameState); 135 } 136 if (character == '&') { 137 m_additionalAllowedCharacter = '>'; 138 ADVANCE_PAST_NON_NEWLINE_TO(CharacterReferenceInAttributeValueState); 139 } 140 if (character == '>') { // 解析過程中如果遇到'>'字元，說明整個標籤也要解析完畢了，此時結束當前標籤解析，並且重置分詞狀態為DataState，並移動到下一個字元 141 m_token.endAttribute(source.numberOfCharactersConsumed()); 142 return emitAndResumeInDataState(source); 143 } 144 if (character == kEndOfFileMarker) { 145 parseError(); 146 m_token.endAttribute(source.numberOfCharactersConsumed()); 147 RECONSUME_IN(DataState); 148 } 149 if (character == '"' || character == '\'' || character == '<' || character == '=' || character == '`') 150 parseError(); 151 m_token.appendToAttributeValue(character); // 將遇到的屬性值字元新增到Token 152 ADVANCE_PAST_NON_NEWLINE_TO(AttributeValueUnquotedState); // 跳轉到當前狀態，並且移動到下一個字元 153 END_STATE()
從程式碼中可以看到，當屬性值帶引號和不帶引號時，解析的邏輯是不一樣的。當屬性值帶有引號時，屬性值裡面是可以包含空白字元的。如果屬性值不帶引號，那麼一旦碰到空白字元，說明這個屬性就解析結束了，會進入下一個屬性的解析當中。
第四種 純文字解析
這裡的純文字指起始標籤與結束標籤之間的任何純文字，包括指令碼文、CSS文字等等，如下圖所示:
<!-- div標籤中的純文字 Hello,Word! --> <div class=news align=center>Hello,World!</div> <!-- script標籤中的純文字 window.name = 'Lucy'; --> <script>window.name = 'Lucy';</script>
純文字的解析過程比較簡單，就是不停的在DataState狀態上跳轉，快取遇到的字元，直到遇見一個結束標籤的'<'字元，相關程式碼如下:
1 BEGIN_STATE(DataState) 2 if (character == '&') 3 ADVANCE_PAST_NON_NEWLINE_TO(CharacterReferenceInDataState); 4 if (character == '<') { // 如果在解析文字的過程中遇到開標籤，分兩種情況 5 if (haveBufferedCharacterToken()) // 第一種，如果快取了文字字元就直接按當前DataState返回，並不移動字元，所以下次再進入分詞操作時取到的字元仍為'<' 6 RETURN_IN_CURRENT_STATE(true); 7 ADVANCE_PAST_NON_NEWLINE_TO(TagOpenState); // 第二種，如果沒有快取任何文字字元，直接進入TagOpenState狀態，進入到起始標籤解析過程，並且移動下一個字元 8 } 9 if (character == kEndOfFileMarker) 10 return emitEndOfFile(source); 11 bufferCharacter(character); // 快取遇到的字元 12 ADVANCE_TO(DataState); // 迴圈跳轉到當前DataState狀態，並且移動到下一個字元 13 END_STATE()
由於流程比較簡單，下面只給出解析div標籤中純文字的結果:
建立節點與新增節點
1 相關類圖
2 建立、新增流程
上面的分詞迴圈中，每分出一個Token，就會根據Token建立對應的Node，然後將Node新增到DOM樹上。(HTMLDocumentParser::pumpTokenizerLoop方法在上面分詞中有介紹)。
上面方法中首先看HTMLTreeBuilder::constructTree，程式碼如下:
1 // 只保留關健程式碼 2 void HTMLTreeBuilder::constructTree(AtomHTMLToken&& token) 3 { 4 ... 5 6 if (shouldProcessTokenInForeignContent(token)) 7 processTokenInForeignContent(WTFMove(token)); 8 else 9 processToken(WTFMove(token)); // HTMLToken在這裡被處理 10 11 ... 12 13 m_tree.executeQueuedTasks(); // HTMLContructionSiteTask在這裡被執行，有時候也直接在建立的過程中直接執行，然後這個方法發現佇列為空就會直接返回 14 // The tree builder might have been destroyed as an indirect result of executing the queued tasks. 15 } 16 17 18 void HTMLConstructionSite::executeQueuedTasks() 19 { 20 if (m_taskQueue.isEmpty()) // 佇列為空，就直接返回 21 return; 22 23 // Copy the task queue into a local variable in case executeTask 24 // re-enters the parser. 25 TaskQueue queue = WTFMove(m_taskQueue); 26 27 for (auto& task : queue) // 這裡的task就是HTMLContructionSiteTask 28 executeTask(task); // 執行task 29 30 // We might be detached now. 31 }
上面程式碼中HTMLTreeBuilder::processToken就是處理Token生成對應Node的地方，程式碼如下所示:
1 void HTMLTreeBuilder::processToken(AtomHTMLToken&& token) 2 { 3 switch (token.type()) { 4 case HTMLToken::Uninitialized: 5 ASSERT_NOT_REACHED(); 6 break; 7 case HTMLToken::DOCTYPE: // HTML中的DOCType標籤 8 m_shouldSkipLeadingNewline = false; 9 processDoctypeToken(WTFMove(token)); 10 break; 11 case HTMLToken::StartTag: // 起始HTML標籤 12 m_shouldSkipLeadingNewline = false; 13 processStartTag(WTFMove(token)); 14 break; 15 case HTMLToken::EndTag: // 結束HTML標籤 16 m_shouldSkipLeadingNewline = false; 17 processEndTag(WTFMove(token)); 18 break; 19 case HTMLToken::Comment: // HTML中的註釋 20 m_shouldSkipLeadingNewline = false; 21 processComment(WTFMove(token)); 22 return; 23 case HTMLToken::Character: // HTML中的純文字 24 processCharacter(WTFMove(token)); 25 break; 26 case HTMLToken::EndOfFile: // HTML結束標誌 27 m_shouldSkipLeadingNewline = false; 28 processEndOfFile(WTFMove(token)); 29 break; 30 } 31 }
可以看到上面程式碼對7類Token做了處理，由於處理的流程都是類似的，這裡只給出3種HTML標籤的建立新增過程，分別是DOCTYPE標籤，html標籤，title標籤文字，剩下的過程都使用圖表示。
2.1 DOCTYPE標籤
1 // 只保留關健程式碼 2 void HTMLTreeBuilder::processDoctypeToken(AtomHTMLToken&& token) 3 { 4 ASSERT(token.type() == HTMLToken::DOCTYPE); 5 if (m_insertionMode == InsertionMode::Initial) { // m_insertionMode的初始值就是InsertionMode::Initial 6 m_tree.insertDoctype(WTFMove(token)); // 插入DOCTYPE標籤 7 m_insertionMode = InsertionMode::BeforeHTML; // 插入DOCTYPE標籤之後，m_insertionMode設定為InsertionMode::BeforeHTML，表示下面要開是HTML標籤插入 8 return; 9 } 10 11 ... 12 } 13 14 // 只保留關健程式碼 15 void HTMLConstructionSite::insertDoctype(AtomHTMLToken&& token) 16 { 17 ... 18 19 // m_attachmentRoot就是Document物件，文件根節點 20 // DocumentType::create方法建立出DOCTYPE節點 21 // attachLater方法內部建立出HTMLContructionSiteTask 22 attachLater(m_attachmentRoot, DocumentType::create(m_document, token.name(), publicId, systemId)); 23 24 ... 25 } 26 27 // 只保留關健程式碼 28 void HTMLConstructionSite::attachLater(ContainerNode& parent, Ref<Node>&& child, bool selfClosing) 29 { 30 ... 31 32 HTMLConstructionSiteTask task(HTMLConstructionSiteTask::Insert); // 建立HTMLConstructionSiteTask 33 task.parent = &parent; // task持有當前節點的父節點 34 task.child = WTFMove(child); // task持有需要操作的節點 35 task.selfClosing = selfClosing; // 是否自關閉節點 36 37 // Add as a sibling of the parent if we have reached the maximum depth allowed. 38 // m_openElements就是HTMLElementStack，在這裡還看不到它的作用，後面會講。這裡可以看到這個stack裡面加入的物件個數是有限制的，最大不超過512個。 39 // 所以如果一個HTML標籤巢狀過多的子標籤，就會觸發這裡的操作 40 if (m_openElements.stackDepth() > m_maximumDOMTreeDepth && task.parent->parentNode()) 41 task.parent = task.parent->parentNode(); // 滿足條件，就會將當前節點新增到爺爺節點，而不是父節點 42 43 ASSERT(task.parent); 44 m_taskQueue.append(WTFMove(task)); // 將task新增到Queue當中 45 }
從程式碼可以看到，這裡只是建立了DOCTYPE節點，還沒有真正新增。真正執行新增的操作，需要執行HTMLContructionSite::executeQueuedTasks，這個方法在一開始有列出來。下面就來看下每個Task如何被執行。
1 // 方法位於HTMLContructionSite.cpp 2 static inline void executeTask(HTMLConstructionSiteTask& task) 3 { 4 switch (task.operation) { // HTMLConstructionSiteTask儲存了自己要做的操作，構建DOM樹一般都是Insert操作 5 case HTMLConstructionSiteTask::Insert: 6 executeInsertTask(task); // 這裡執行insert操作 7 return; 8 // All the cases below this point are only used by the adoption agency. 9 case HTMLConstructionSiteTask::InsertAlreadyParsedChild: 10 executeInsertAlreadyParsedChildTask(task); 11 return; 12 case HTMLConstructionSiteTask::Reparent: 13 executeReparentTask(task); 14 return; 15 case HTMLConstructionSiteTask::TakeAllChildrenAndReparent: 16 executeTakeAllChildrenAndReparentTask(task); 17 return; 18 } 19 ASSERT_NOT_REACHED(); 20 } 21 22 // 只保留關健程式碼，方法位於HTMLContructionSite.cpp 23 static inline void executeInsertTask(HTMLConstructionSiteTask& task) 24 { 25 ASSERT(task.operation == HTMLConstructionSiteTask::Insert); 26 27 insert(task); // 繼續呼叫插入方法 28 29 ... 30 } 31 32 // 只保留關健程式碼，方法位於HTMLContructionSite.cpp 33 static inline void insert(HTMLConstructionSiteTask& task) 34 { 35 ... 36 37 ASSERT(!task.child->parentNode()); 38 if (task.nextChild) 39 task.parent->parserInsertBefore(*task.child, *task.nextChild); 40 else 41 task.parent->parserAppendChild(*task.child); // 呼叫父節點方法繼續插入 42 } 43 44 // 只保留關健程式碼 45 void ContainerNode::parserAppendChild(Node& newChild) 46 { 47 ... 48 49 executeNodeInsertionWithScriptAssertion(*this, newChild, ChildChange::Source::Parser, ReplacedAllChildren::No, [&] { 50 if (&document() != &newChild.document()) 51 document().adoptNode(newChild); 52 53 appendChildCommon(newChild); // 在Block回撥中呼叫此方法繼續插入 54 55 ... 56 }); 57 } 58 59 // 最終呼叫的是這個方法進行插入 60 void ContainerNode::appendChildCommon(Node& child) 61 { 62 ScriptDisallowedScope::InMainThread scriptDisallowedScope; 63 64 child.setParentNode(this); 65 66 if (m_lastChild) { // 父節點已經插入子節點，執行在這裡 67 child.setPreviousSibling(m_lastChild); 68 m_lastChild->setNextSibling(&child); 69 } else 70 m_firstChild = &child; // 如果父節點是首次插入子節點，執行在這裡 71 72 m_lastChild = &child; // 更新m_lastChild 73 }
經過執行上面方法之後，原來只有一個根節點的DOM樹變成了下面的樣子:
2.2 html標籤
1 // processStartTag內部有很多狀態處理，這裡只保留關健程式碼 2 void HTMLTreeBuilder::processStartTag(AtomHTMLToken&& token) 3 { 4 ASSERT(token.type() == HTMLToken::StartTag); 5 switch (m_insertionMode) { 6 case InsertionMode::Initial: 7 defaultForInitial(); 8 ASSERT(m_insertionMode == InsertionMode::BeforeHTML); 9 FALLTHROUGH; 10 case InsertionMode::BeforeHTML: 11 if (token.name() == htmlTag) { // html標籤在這裡處理 12 m_tree.insertHTMLHtmlStartTagBeforeHTML(WTFMove(token)); 13 m_insertionMode = InsertionMode::BeforeHead; // 插入完html標籤，m_insertionMode = InsertionMode::BeforeHead，表明即將處理head標籤 14 return; 15 } 16 17 ... 18 } 19 } 20 21 22 // 只保留關健程式碼 23 void HTMLConstructionSite::insertHTMLHtmlStartTagBeforeHTML(AtomHTMLToken&& token) 24 { 25 auto element = HTMLHtmlElement::create(m_document); // 建立html節點 26 setAttributes(element, token, m_parserContentPolicy); 27 attachLater(m_attachmentRoot, element.copyRef()); // 同樣呼叫了attachLater方法，與DOCTYPE類似 28 m_openElements.pushHTMLHtmlElement(HTMLStackItem::create(element.copyRef(), WTFMove(token))); // 注意這裡，這裡向HTMLElementStack中壓入了正在插入的html起始標籤 29 30 executeQueuedTasks(); // 這裡在插入操作直接執行了task，外面HTMLTreeBuilder::constructTree方法呼叫的executeQueuedTasks方法就會直接返回 31 32 ... 33 }
執行上面程式碼之後，DOM樹變成了如下圖所示:
當要插入title起始標籤之後，DOM樹以及HTMLElementStack m_openElements如下圖所示:
3.3 title標籤文字，
title標籤的文字作為文字節點插入，生成文字節點的程式碼如下:
1 // 只保留關健程式碼 2 void HTMLConstructionSite::insertTextNode(const String& characters, WhitespaceMode whitespaceMode) 3 { 4 HTMLConstructionSiteTask task(HTMLConstructionSiteTask::Insert); 5 task.parent = ¤tNode(); // 直接取HTMLElementStack m_openElements的棧頂節點，此時節點是title 6 7 ... 8 9 unsigned currentPosition = 0; 10 unsigned lengthLimit = shouldUseLengthLimit(*task.parent) ? Text::defaultLengthLimit : std::numeric_limits<unsigned>::max(); // 限制文字節點最大包含的字元個數為65536 11 12 ... 13 14 15 // 可以看到如果文字過長，會將分割成多個文字節點 16 while (currentPosition < characters.length()) { 17 AtomString charactersAtom = m_whitespaceCache.lookup(characters, whitespaceMode); 18 auto textNode = Text::createWithLengthLimit(task.parent->document(), charactersAtom.isNull() ? characters : charactersAtom.string(), currentPosition, lengthLimit); 19 // If we have a whole string of unbreakable characters the above could lead to an infinite loop. Exceeding the length limit is the lesser evil. 20 if (!textNode->length()) { 21 String substring = characters.substring(currentPosition); 22 AtomString substringAtom = m_whitespaceCache.lookup(substring, whitespaceMode); 23 textNode = Text::create(task.parent->document(), substringAtom.isNull() ? substring : substringAtom.string()); // 生成文字節點 24 } 25 26 currentPosition += textNode->length(); // 下一個文字節點包含的字元起點 27 ASSERT(currentPosition <= characters.length()); 28 task.child = WTFMove(textNode); 29 30 executeTask(task); // 直接執行Task插入 31 } 32 }
從程式碼可以看到，如果一個節點後面跟的文字字元過多，會被分割成多個文字節點插入。下面的例子將title節點後面的文字字元個數設定成85248，使用Safari檢視確實生成了2個文字節點:
當遇到title結束標籤，程式碼處理如下:
1 // 程式碼內部有很多狀態處理，這裡只保留關健程式碼 2 void HTMLTreeBuilder::processEndTag(AtomHTMLToken&& token) 3 { 4 ASSERT(token.type() == HTMLToken::EndTag); 5 switch (m_insertionMode) { 6 ... 7 8 case InsertionMode::Text: // 由於遇到title結束標籤之前插入了文字，因此此時的插入模式就是InsertionMode::Text 9 10 m_tree.openElements().pop(); // 因為遇到了title結束標籤，整個標籤已經處理完畢，從HTMLElementStack棧中彈出棧頂元素title 11 m_insertionMode = m_originalInsertionMode; // 恢復之前的插入模式 12 break; 13 14 ... 15 }
每當遇到一個標籤的結束標籤，都會像上面一樣將HTMLElementStack m_openElementsStack的棧頂元素彈出。執行上面程式碼之後，DOM樹與HTMLElementStack如下圖所示:
當整個DOM樹構建完成之後，DOM樹和HTMLElementStack m_openElements如下圖所示:
從上圖可以看到，當構建完DOM，HTMLElementStack m_openElements並沒有將棧完全清空，而是保留了2個節點:html節點與body節點。這可以從Xcode的控制檯輸出看到:
同時可以看到，記憶體中的DOM樹結構和文章開頭畫的邏輯上的DOM樹結構是不一樣的。邏輯上的DOM樹父節點有多少子節點，就有多少指向子節點的指標，而記憶體中的DOM樹，不管父節點有多少子節點，始終只有2個指標指向子節點:m_firstChild與m_lastChild。同時，記憶體中的DOM樹兄弟節點之間也相互有指標引用，而邏輯上的DOM樹結構是沒有的。通過這樣的資料結構，使得記憶體中的DOM結構所佔用的空間大大減少，同時也能達到遍歷整棵樹的效果。試想一下，如果一個父節點有100個子節點，那麼使用邏輯上的DOM樹結構，父節點就需要100個指向子節點的指標，如果一個指標佔用8位元組，那麼總共就要佔用800位元組。但是使用上面記憶體中DOM的表示方式，父節點只需要2個指標就可以了，總共佔用16位元組，記憶體消耗大大減少。雖然兩者實現方式不一樣，但是兩者是等價的，都可以正確的表示HTML文件。