浏览器-06 HTML和CSS解析2

选择器

• 其实现由CSSSelector类来完成；
• CSSSelector的作用是储存从解析器生成的结果信息;
• 这里匹配指的是当需要为每个DOM中的节点计算样式时,WebKit需要根据当前的节点信息来从规则列表中找到能够符合调节的规则,并把规则中的属性列表提取出来生成节点的样式信息;

应用到具体元素上

• StyleResolver是管理类,负责根据样式规则为每一个Document中的元素匹配相应的样式属性,和Document节点一一对应;即当WebKit为每个Document创建一个StyleResolver对象,就为所有该Document中的节点计算样式,并将其结果保存到RenderStyle对象中;大致步骤
  • 创建一个新的RenderStyle对象从它的父亲那里继承它的一切可以继承的属性;
  • 如果是link类元素,设置link属性;
  • 从已知规则中找到匹配到的属性
  • 将匹配到的属性应用到RenderStyle对象中;
  • 为该DOM元素的RenderStyle做一些修正工作;
  • 清理StyleResolver,为下次匹配请求做准备;

• RenderStyle是元素所有样式属性的内部表示;为了节约空间,WebKit将属性分为常用属性和非常用属性;非常用属性会进行分组合并,并且仅在需要时创建;该对象在被StyleResolver创建后由该元素所对应的RenderObject所拥有;

• 元素在匹配生成其样式属性值之后,RenderStyle对象被RenderObject所获得,这个触发一个重新绘制的动作, WebKit此时可以根据样式属性值来计算它的布局和显示;

JavaScript设置样式

• 大致过程:JavaScript引擎调用设置属性值的公共处理函数,然后该函数调用属性值解析函数;
• 将解析后的信息设置到元素的style属性的样式中,设置该元素需要重新计算style和invalidate它的style属性;
• 在这之后,重新绘制请求被处理时,WebKit先会重新计算布局,而后在渲染相应的区域;

CSS3 变形(transform)、变换(transition)和动画(animation)

• 上面例子的三种树结构中:元素P的内容会被包