从Chrome源码看浏览器如何计算CSS
KiaBoothman
7年前
<p>在《 Effective前端6：避免页面卡顿 》这篇里面介绍了浏览器渲染页面的过程：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/543b927c468bb37a598fd5a16a971668.png"></p> <p>并且《 从Chrome源码看浏览器如何构建DOM树 》介绍了第一步如何解析Html构建DOM树，这个过程大概如下：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/0abbeaf46149955161e3db061d60a0ba.png"></p> <p>浏览器每收到一段html的文本之后，就会把它序列化成一个个的tokens，依次遍历这些token，实例化成对应的html结点并插入到DOM树里面。</p> <p>我将在这一篇介绍第二步Style的过程，即CSS的处理。</p> <h2>1. 加载CSS</h2> <p>在构建DOM的过程中，如果遇到link的标签，当把它插到DOM里面之后，就会触发资源加载——根据href指明的链接：</p> <pre> <code class="language-css"><linkrel="stylesheet" href="demo.css"> </code></pre> <p>上面的 rel 指明了它是一个样式文件。这个加载是异步，不会影响DOM树的构建，只是说在CSS没处理好之前，构建好的DOM并不会显示出来。用以下的html和css做试验：</p> <pre> <code class="language-css"><!DOCType html> <html> <head> <linkrel="stylesheet" href="demo.css"> </head> <body> <divclass="text"> <p>hello, world</p> </div> </body> </html> </code></pre> <p>demo.css如下：</p> <pre> <code class="language-css">.text{ font-size: 20px; } .text p{ color: #505050; } </code></pre> <p>从打印的log可以看出(添加打印的源码略)：</p> <p>[DocumentLoader.cpp(558)] “<!DOCType html>\n<html>\n<head>\n<link rel=\”stylesheet\” href=\”demo.css\”> \n</head>\n<body>\n<div class=\”text\”>\n <p>hello, world</p>\n</div>\n</body>\n</html>\n”</p> <p>[HTMLDocumentParser.cpp(765)] “tagName: html |type: DOCTYPE|attr: |text: “</p> <p>[HTMLDocumentParser.cpp(765)] “tagName: |type: Character |attr: |text: \n”</p> <p>[HTMLDocumentParser.cpp(765)] “tagName: html |type: startTag |attr: |text: “</p> <p>…</p> <p>[HTMLDocumentParser.cpp(765)] “tagName: html |type: EndTag |attr: |text: “</p> <p>[HTMLDocumentParser.cpp(765)] “tagName: |type: EndOfFile|attr: |text: “</p> <p>[Document.cpp(1231)] readystatechange to Interactive</p> <p>[CSSParserImpl.cpp(217)] recieved and parsing stylesheet: “.text{\n font-size: 20px;\n}\n.text p{\n color: #505050;\n}\n”</p> <p>在CSS没有加载好之前，DOM树已经构建好了。为什么DOM构建好了不把html放出来，因为没有样式的html直接放出来，给人看到的页面将会是乱的。所以CSS不能太大，页面一打开将会停留较长时间的白屏，所以把图片/字体等转成base64放到CSS里面是一种不太推荐的做法。</p> <h2>2. 解析CSS</h2> <h3>（1）字符串 -> tokens</h3> <p>CSS解析和html解析有比较像的地方，都是先格式化成tokens。CSS token定义了很多种类型，如下的CSS会被拆成这么多个token：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/9b7ee6c8545b3408b5ea98af235c1286.png"></p> <p>经常看到有人建议CSS的色值使用16位的数字会优于使用rgb的表示，这个是子虚乌有，还是有根据的呢？</p> <p>如下所示：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/8f1d76c0a107c19b2facb6958dcf163b.png"></p> <p>如果改成 rgb ，它将变成一个函数类型的token，这个函数需要再计算一下。从这里看的话，使用16位色值确实比使用rgb好。</p> <h3>（2）tokens -> styleRule</h3> <p>这里不关心它是怎么把tokens转化成style的规则的，我们只要看格式化后的styleRule是怎么样的就可以。每个styleRule主要包含两个部分，一个是选择器selectors，第二个是属性集properties。用以下CSS：</p> <pre> <code class="language-css">.text .hello{ color: rgb(200, 200, 200); width: calc(100% - 20px); } #world{ margin: 20px; } </code></pre> <p>打印出来的选择器结果为（相关打印代码省略）：</p> <p>selector <em>text</em> = “.text .hello”</p> <p><em> value</em> = “hello” <em>matchType</em> = “Class” <em>relation</em> = “Descendant”</p> <p>tag history selector <em>text</em> = “.text”</p> <p><em>value</em> = “text” <em>matchType</em> = “Class” <em>relation</em> = “SubSelector”</p> <p>selector <em>text</em> = “#world”</p> <p><em> value</em> = “world” <em>matchType</em> = “Id” <em>relation</em> = “SubSelector”</p> <p>从第一个选择器可以看出，它的解析是从右往左的，这个在判断match的时候比较有用。</p> <p>blink定义了几种matchType：</p> <pre> <code class="language-css"> enum MatchType { Unknown, Tag, // Example: div Id, // Example: #id Class, // example: .class PseudoClass, // Example: :nth-child(2) PseudoElement, // Example: ::first-line PagePseudoClass, // ?? AttributeExact, // Example: E[foo="bar"] AttributeSet, // Example: E[foo] AttributeHyphen, // Example: E[foo|="bar"] AttributeList, // Example: E[foo~="bar"] AttributeContain, // css3: E[foo*="bar"] AttributeBegin, // css3: E[foo^="bar"] AttributeEnd, // css3: E[foo$="bar"] FirstAttributeSelectorMatch = AttributeExact, }; </code></pre> <p>还定义了几种选择器的类型：</p> <pre> <code class="language-css"> enum RelationType { SubSelector, // No combinator Descendant, // "Space" combinator Child, // > combinator DirectAdjacent, // + combinator IndirectAdjacent, // ~ combinator // Special cases for shadow DOM related selectors. ShadowPiercingDescendant, // >>> combinator ShadowDeep, // /deep/ combinator ShadowPseudo, // ::shadow pseudo element ShadowSlot // ::slotted() pseudo element }; </code></pre> <p>.text .hello的.hello选择器的类型就是Descendant，即后代选择器。记录选择器类型的作用是协助判断当前元素是否match这个选择器。例如，由于.hello是一个父代选器，所以它从右往左的下一个选择器就是它的父选择器，于是判断当前元素的所有父元素是否匹配.text这个选择器。</p> <p>第二个部分——属性打印出来是这样的：</p> <p>selector text = “.text .hello”</p> <p>perperty id = 15 value = “rgb(200, 200, 200)”</p> <p>perperty id = 316 value = “calc(100% – 20px)”</p> <p>selector text = “#world”</p> <p>perperty id = 147 value = “20px”</p> <p>perperty id = 146 value = “20px”</p> <p>perperty id = 144 value = “20px”</p> <p>perperty id = 145 value = “20px”</p> <p>所有的CSS的属性都是用id标志的，上面的id依次对应：</p> <pre> <code class="language-css">enum CSSPropertyID { CSSPropertyColor = 15, CSSPropertyWidth = 316, CSSPropertyMarginLeft = 145, CSSPropertyMarginRight = 146, CSSPropertyMarginTop = 147, CSSPropertyMarkerEnd = 148, } </code></pre> <p>设置了 margin: 20px ，会转化成四个属性。从这里可以看出CSS提倡属性合并，但是最后还是会被拆成各个小属性。所以属性合并最大的作用应该在于减少CSS的代码量。</p> <p>一个选择器和一个属性集就构成一条rule，同一个css表的所有rule放到同一个stylesheet对象里面，blink会把用户的样式存放到一个 m_authorStyleSheets的向量里面， 如下图示意：</p> <p><img src="https://simg.open-open.com/show/8b0e9fef3335c499478c40b28ea42570.png"></p> <p>除了autherStyleSheet，还有浏览器默认的样式DefaultStyleSheet，这里面有几张，最常见的是UAStyleSheet，其它的还有svg和全屏的默认样式表。Blink ua全部样式可见这个文件 <a href="/misc/goto?guid=4959738541720237975" rel="nofollow,noindex">html.css</a> ，这里面有一些常见的设置，如把style/link/script等标签display: none，把div/h1/p等标签display: block，设置p/h1/h2等标签的margin值等，从这个样式表还可以看到Chrome已经支持了HTML5.1新加的标签，如dialog：</p> <pre> <code class="language-css">dialog{ position: absolute; left: 0; right: 0; width: -webkit-fit-content; height: -webkit-fit-content; margin: auto; border: solid; padding: 1em; background: white; color: black; } </code></pre> <p>另外还有怪异模式的样式表： <a href="/misc/goto?guid=4959738541804911719" rel="nofollow,noindex">quirk.css</a> ，这个文件很小，影响比较大的主要是下面：</p> <pre> <code class="language-css">/* This will apply only to text fields, since all other inputs already use border box sizing */ input:not([type=image i]), textarea{ box-sizing: border-box; } </code></pre> <p>blink会先去加载html.css文件，怪异模式下再接着加载quirk.css文件。</p> <h3>（4）生成哈希map</h3> <p>最后会把生成的rule集放到四个类型哈希map：</p> <pre> <code class="language-css"> CompactRuleMapm_idRules; CompactRuleMapm_classRules; CompactRuleMapm_tagRules; CompactRuleMapm_shadowPseudoElementRules; </code></pre> <p>map的类型是根据最右边的selector的类型：id、class、标签、伪类选择器区分的，这样做的目的是为了在比较的时候能够很快地取出匹配第一个选择器的所有rule，然后每条rule再检查它的下一个selector是否匹配当前元素。</p> <h2>3. 计算CSS</h2> <p>CSS表解析好之后，会触发layout tree，进行layout的时候，会把每个可视的Node结点相应地创建一个Layout结点，而创建Layout结点的时候需要计算一下得到它的style。为什么需要计算style，因为可能会有多个选择器的样式命中了它，所以需要把几个选择器的样式属性综合在一起，以及继承父元素的属性以及UA的提供的属性。这个过程包括两步：找到命中的选择器和设置样式。</p> <h3>（1）选择器命中判断</h3> <p>用以下html做为demo：</p> <pre> <code class="language-css"><style> .text{ font-size: 22em; } .text p{ color: #505050; } </style> <divclass="text"> <p>hello, world</p> </div> </code></pre> <p>上面会生成两个rule，第一个rule会放到上面提到的四个哈希map其中的classRules里面，而第二个rule会放到tagRules里面。</p> <p>当这个样式表解析好时，触发layout，这个layout会更新所有的DOM元素：</p> <pre> <code class="language-css">void ContainerNode::attachLayoutTree(const AttachContext& context) { for (Node* child = firstChild(); child; child = child->nextSibling()) { if (child->needsAttach()) child->attachLayoutTree(childrenContext); } } </code></pre> <p>这是一个递归，初始为document对象，即从document开始深度优先，遍历所有的dom结点，更新它们的布局。</p> <p>对每个node，代码里面会依次按照id、class、伪元素、标签的顺序取出所有的selector，进行比较判断，最后是通配符，如下：</p> <pre> <code class="language-css">//如果结点有id属性 if (element.hasID()) collectMatchingRulesForList( matchRequest.ruleSet->idRules(element.idForStyleResolution()), cascadeOrder, matchRequest); //如果结点有class属性 if (element.isStyledElement() && element.hasClass()) { for (size_t i = 0; i < element.classNames().size(); ++i) collectMatchingRulesForList( matchRequest.ruleSet->classRules(element.classNames()[i]), cascadeOrder, matchRequest); } //伪类的处理 ... //标签选择器处理 collectMatchingRulesForList( matchRequest.ruleSet->tagRules(element.localNameForSelectorMatching()), cascadeOrder, matchRequest); //最后是通配符 ... </code></pre> <p>在遇到div.text这个元素的时候，会去执行上面代码的取出classRules的那行。</p> <p>上面domo的rule只有两个，一个是classRule，一个是tagRule。所以会对取出来的这个classRule进行检验：</p> <pre> <code class="language-css">if (!checkOne(context, subResult)) return SelectorFailsLocally; if (context.selector->isLastInTagHistory()) { return SelectorMatches; } </code></pre> <p>第一行先对当前选择器(.text)进行检验，如果不通过，则直接返回不匹配，如果通过了，第三行判断当前选择器是不是最左边的选择器，如果是的话，则返回匹配成功。如果左边还有限定的话，那么再递归检查左边的选择器是否匹配。</p> <p>我们先来看一下第一行的checkOne是怎么检验的：</p> <pre> <code class="language-css">switch (selector.match()) { case CSSSelector::Tag: return matchesTagName(element, selector.tagQName()); case CSSSelector::Class: return element.hasClass() && element.classNames().contains(selector.value()); case CSSSelector::Id: return element.hasID() && element.idForStyleResolution() == selector.value(); } </code></pre> <p>很明显，.text将会在上面第6行匹配成功，并且它左边没有限定了，所以返回匹配成功。</p> <p>到了检验p标签的时候，会取出”.text p”的rule，它的第一个选择器是p，将会在上面代码的第3行判断成立。但由于它前面还有限定，于是它还得继续检验前面的限定成不成立。</p> <p>前一个选择器的检验关键是靠当前选择器和它的关系，上面提到的relationType，这里的p的relationType是Descendant即后代。上面在调了checkOne成功之后，继续往下走：</p> <pre> <code class="language-css">switch (relation) { case CSSSelector::Descendant: for (nextContext.element = parentElement(context); nextContext.element; nextContext.element = parentElement(nextContext)) { MatchStatusmatch = matchSelector(nextContext, result); if (match == SelectorMatches || match == SelectorFailsCompletely) return match; if (nextSelectorExceedsScope(nextContext)) return SelectorFailsCompletely; } return SelectorFailsCompletely; case CSSSelector::Child: //... } </code></pre> <p>由于这里是一个后代选择器，所以它会循环当前元素所有父结点，用这个父结点和第二个选择器”.text”再执行checkOne的逻辑，checkOne将返回成功，并且它已经是最后一个选择器了，所以判断结束，返回成功匹配。</p> <p>后代选择器会去查找它的父结点 ，而其它的relationType会相应地去查找关联的元素。</p> <p>所以不提倡把选择器写得太长，特别是用sass/less写的时候，新手很容易写嵌套很多层，这样会增加查找匹配的负担。例如上面，它需要对下一个父代选器启动一个新的递归的过程，而递归是一种比较耗时的操作。一般是不要超过三层。</p> <p>上面已经较完整地介绍了匹配的过程，接下来分析匹配之后又是如何设置style的。</p> <h3>（2）设置style</h3> <p>设置style的顺序是先继承父结点，然后使用UA的style，最后再使用用户的style：</p> <pre> <code class="language-css">style->inheritFrom(*state.parentStyle()) matchUARules(collector); matchAuthorRules(*state.element(), collector); </code></pre> <p>每一步如果有styleRule匹配成功的话会把它放到当前元素的m_matchedRules的向量里面，并会去计算它的优先级，记录到 m_specificity 变量。这个优先级是怎么算的呢？</p> <pre> <code class="language-css">for (const CSSSelector* selector = this; selector; selector = selector->tagHistory()) { temp = total + selector->specificityForOneSelector(); } return total; </code></pre> <p>如上代码所示，它会从右到左取每个selector的优先级之和。不同类型的selector的优级级定义如下：</p> <pre> <code class="language-css"> switch (m_match) { case Id: return 0x010000; case PseudoClass: return 0x000100; case Class: case PseudoElement: case AttributeExact: case AttributeSet: case AttributeList: case AttributeHyphen: case AttributeContain: case AttributeBegin: case AttributeEnd: return 0x000100; case Tag: return 0x000001; case Unknown: return 0; } return 0; } </code></pre> <p>其中id的优先级为0x100000 = 65536，类、属性、伪类的优先级为0x100 = 256，标签选择器的优先级为1。如下面计算所示：</p> <pre> <code class="language-css">/*优先级为257 = 265 + 1*/ .text h1{ font-size: 8em; } /*优先级为65537 = 65536 + 1*/ #my-text h1{ font-size: 16em; } </code></pre> <p>内联style的优先级又是怎么处理的呢？</p> <p>当match完了当前元素的所有CSS规则，全部放到了collector的m_matchedRules里面，再把这个向量根据优先级从小到大排序：</p> <pre> <code class="language-css">collector.sortAndTransferMatchedRules(); </code></pre> <p>排序的规则是这样的：</p> <pre> <code class="language-css">static inline bool compareRules(const MatchedRule& matchedRule1, const MatchedRule& matchedRule2) { unsigned specificity1 = matchedRule1.specificity(); unsigned specificity2 = matchedRule2.specificity(); if (specificity1 != specificity2) return specificity1 < specificity2; return matchedRule1.position() < matchedRule2.position(); } </code></pre> <p>先按优先级，如果两者的优先级一样，则比较它们的位置。</p> <p>把css表的样式处理完了之后，blink再去取style的内联样式（这个在已经在构建DOM的时候存放好了），把内联样式push_back到上面排好序的容器里，由于它是由小到大排序的，所以放最后面的优先级肯定是最大的。</p> <pre> <code class="language-css">collector.addElementStyleProperties(state.element()->inlineStyle(), isInlineStyleCacheable); </code></pre> <p>样式里面的important的优先级又是怎么处理的？</p> <p>所有的样式规则都处理完毕，最后就是按照它们的优先级计算CSS了。将在下面这个函数执行：</p> <pre> <code class="language-css">applyMatchedPropertiesAndCustomPropertyAnimations( state, collector.matchedResult(), element); </code></pre> <p>这个函数会按照下面的顺序依次设置元素的style：</p> <pre> <code class="language-css"> applyMatchedProperties<HighPropertyPriority, CheckNeedsApplyPass>( state, matchResult.allRules(), false, applyInheritedOnly, needsApplyPass); for (autorange : ImportantAuthorRanges(matchResult)) { applyMatchedProperties<HighPropertyPriority, CheckNeedsApplyPass>( state, range, true, applyInheritedOnly, needsApplyPass); } </code></pre> <p>先设置正常的规则，最后再设置important的规则。所以越往后的设置的规则就会覆盖前面设置的规则。</p> <p>最后生成的Style是怎么样的？</p> <p>按优先级计算出来的Style会被放在一个ComputedStyle的对象里面，这个style里面的规则分成了几类，通过检查style对象可以一窥：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/0ad344e890e0303fc0c2572f591ff382.png"></p> <p>把它画成一张图表：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/a900e5c2e71bc08f4ef372c4c2d9962c.png"></p> <p>主要有几类，box是长宽，surround是margin/padding，还有不可继承的nonInheritedData和可继承的styleIneritedData一些属性。Blink还把很多比较少用的属性放到rareData的结构里面，为避免实例化这些不常用的属性占了太多的空间。</p> <p>具体来说，上面设置的font-size为：22em * 16px = 352px：</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/507fa0762a4b8790e6c64e6e736596c6.png"></p> <p>而所有的色值会变成16进制的整数，如blink定义的两种颜色的色值：</p> <pre> <code class="language-css">static const RGBA32lightenedBlack = 0xFF545454; static const RGBA32darkenedWhite = 0xFFABABAB; </code></pre> <p>同时blink对rgba色值的转化算法：</p> <pre> <code class="language-css">RGBA32makeRGBA32FromFloats(float r, float g, float b, float a) { return colorFloatToRGBAByte(a) << 24 | colorFloatToRGBAByte(r) << 16 | colorFloatToRGBAByte(g) << 8 | colorFloatToRGBAByte(b); } </code></pre> <p>从这里可以看到，有些CSS优化建议说要按照下面的顺序书写CSS规则：</p> <p>1.位置属性(position, top, right, z-index, display, float等)</p> <p>2.大小(width, height, padding, margin)</p> <p>3.文字系列(font, line-height, letter-spacing, color- text-align等)</p> <p>4.背景(background, border等)</p> <p>5.其他(animation, transition等)</p> <p>这些顺序对浏览器来说其实是一样的，因为最后都会放到computedStyle里面，而这个style里面的数据是不区分先后顺序的。所以这种建议与其说是优化，倒不如说是规范，大家都按照这个规范写的话，看CSS就可以一目了然，可以很快地看到想要了解的关键信息。</p> <p>到这里，CSS相关的解析和计算就分析完毕，笔者将尝试在下一篇介绍渲染页面的第三步layout的过程。</p> <p> </p> <p>来自：http://www.renfed.com/2017/02/22/chrome-css/</p> <p> </p>