选择器

  • 其实现由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)