CSS引擎分析.docVIP

Webkit CSS引擎分析 分类： webkit2011-12-10 10:03 161人阅读 评论(0) 收藏 举报 目录(?)[+] 转载自/cnnzp/article/details/6590087 Webkit CSS引擎分析 浏览器CSS模块负责CSS脚本解析，并为每个element计算出样式。CSS模块虽小，计算量大，设计不好往往成为浏览器性能的瓶颈。CSS模块在实现上有几个特点：CSS对象众多(颗粒小而多)，计算频繁(为每个element计算样式)。这些特性决定了webkit在实现CSS引擎上采取的设计,算法。如何高效的计算样式是浏览器内核的重点也是难点。 前端工程师可能更关注: 能被浏览器高效执行的CSS脚本 浏览器内核工程师可能更关注: CSS内部数据的组织 计算样式 思考 总结 高效执行的CSS脚本 我这里仅从webkit执行的性能上来讲高效的CSS，不涉及CSS设计问题。 如果两个或多个element的computedStyle不通过计算可以确认他们相等，那么这些computedStyle相等的elements只会计算一次样式，其余的仅仅共享该computedStyle。例如：view plaincopy to clipboard table tr class=row td class=cell width=300 nowrapCell One/td /tr tr class=row td class=cell width=300 nowrapCell Two/td /tr [html] view plaincopy table tr class=row td class=cell width=300 nowrapCell One/td /tr tr class=row td class=cell width=300 nowrapCell Two/td /tr 那么两个tr共享computedStyle， 两个td共享computedStyle。在内核里，只会计算第一个tr和第一个td的ComputedStyle。那么如何做到共享computedStyle呢： 该共享的element不能有id属性且CSS中还有该id的StyleRule.哪怕该StyleRule与Element不匹配。譬如:view plaincopy to clipboard div#id1{color:red} pparagraph1/p p id=id1paragraph2/p [html] view plaincopy div#id1{color:red} pparagraph1/p p id=id1paragraph2/p 可以看到这两个p标签computedStyle本来是一样的，但他们不共享。 tagName和class属性必须一样。 mappedAttribute必须相等。 不能有style属性。哪怕style属性相等，他们也不共享。例如:view plaincopy to clipboard p style=color:redparagraph1/p p style=color:redparagraph2/p [html] view plaincopy p style=color:redparagraph1/p p style=color:redparagraph2/p 他们并不共享computedStyle。 不能使用sibling selector，譬如:first-child, :last-selector, + selector. 使用id selector非常的高效。在使用id selector的时候需要注意一点：因为id是唯一的，所以不需要既指定id又指定tagName。例如：view plaincopy to clipboard Bad p#id1 {color:red;} Good #id1 {color:red;} [html] view plaincopy Bad p#id1 {color:red;} Good #id1 {color:red;}  使用class selector的策略与id selector一样。在内核实现上，id selector与class selector的匹配并没有多大