选择器

  • 其实现由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的内容会被包

    浏览器-06 HTML和CSS解析2的更多相关文章

    1. 浏览器-05 HTML和CSS解析1

      一个浏览器内核几个主要部分,HTML/CSS解析器,网络处理,JavaScript引擎,2D/3D图形引擎,多媒体支持等; HTML 解析和 DOM 网页基本结构 一个网页(Page),每个Page都 ...

    2. IE浏览器没有加载CSS或js文件的秘密及解决办法

      其实是两处资料拼成这一篇博文的,因为在开发过程中遇到,有的文章只是说明原因,而没有给出解决方案,所以再次给出解释和解决方法,以供参考,如果有好的解决方法,也请分享下! ---------------- ...

    3. CSS Houdini：用浏览器引擎实现高级CSS效果

      vivo 互联网前端团队-Wei Xing Houdini被称之为Magic of styling and layout on the web,看起来十分神秘,但实际上,Houdini并非什么神秘组织 ...

    4. IE浏览器各版本的CSS Hack

      IE浏览器各版本的CSS   Hack 如下示例: .test{ color:black;/*W3C*/ color:red\9;/* IE6-IE10 */ _color:black;/*IE6*/ ...

    5. 判断浏览器是否支持某个css属性

      方法:直接判断浏览器是否支持某个CSS属性才是王道,document.documentElement.style 如:判断是否支持 transform if( 'MozTransform' in do ...

    6. 最全的CSS浏览器兼容问题【CSS技巧 】

      CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格 ...

    7. 在不同的浏览器使用不同的css样式,解决浏览器兼容问题

      区别IE6与FF:       background:orange;       *background:blue; 区别IE6与IE7:       background:green !import ...

    8. 如何让不同浏览器调用不同的CSS样式

      如何让不同浏览器调用不同的CSS样式 由 于对W3C标准支持程度的不同,往往导致同一个CSS样式表在各种Web浏览器中的呈现大相径庭.以目前市场占有率最高的两个浏览器Microsoft Interne ...

    9. 网站怎么布局能解决不同浏览器对CSS解析的差异,使用css reset

      很多地方都提到过CSS Reset这个概念,而且细心的朋友会发现,许多大网站的CSS文件中也含有CSS Reset内容. CSS Reset是什么? 在HTML标签在浏览器里有默认的样式,例如 p 标 ...

    随机推荐

    1. 2次使用fork避免产生僵尸进程和不去处理SIGCHLD信号

      1.如下代码所示 #include <unistd.h> #include <sys/types.h> #include <unistd.h> int main(i ...

    2. ARCGIS常用几种本地数据AE初始化

      1.Personal GDB 新建一个在E盘的名为test的mdb: IWorkspaceFactory workspaceFactory = new AccessWorkspaceFactoryCl ...

    3. Q: ossfs挂载时如何设置权限？

      Q: ossfs挂载时如何设置权限? 如果要允许其他用户访问挂载文件夹,可以在运行ossfs的时候指定allow_other参数: ossfs your_bucket your_mount_point ...

    4. QT C1041错误

      使用QT Createor + MSVC2013写程序时.我复制了一份之前OK的代码到新的工程中,工程名字和之前的工程一样,出现了奇怪的错误.开始程序总是崩溃,后来我删掉shadow build目录, ...

    5. 关闭Linux防火墙(iptables) 及 SELinux

      一.关闭防火墙 1.重启后永久性生效: 开启:chkconfig iptables on 关闭:chkconfig iptables off 2.即时生效,重启后失效: 开启:service ipta ...

    6. 读取70开头的xml,gbk转成utf-8

      //读取70开头的xml,gbk转成utf-8 //InputStream is = new FileInputStream(super.getFile());//文件读取 //InputStream ...

    7. ASP.NET Core--基于授权的资源

      翻译如下: 通常授权取决于正在访问的资源. 例如,文档可以具有作者属性. 将只允许文档作者对其进行更新,因此必须在进行授权评估之前从文档存储库加载资源. 这不能使用Authorize属性来完成,因为属 ...

    8. Windows环境配置HTTP服务(Windows + Apache + Mysql + PHP)

      1.安装WampServer 2.管理HTTP服务 任务图标绿色为正常启动状态 注意事项:1.检查网络是不是通的 ping 对方IP2.检查防火墙是否开启,如果开启将不能正常被访问3.检查访问权限 A ...

    9. java后端制作MD5加密

      由于一次业务的需要,我制作了一次密码的修改子业务. 当用户忘记密码的情况下,我需要动态的发给他一个6位的随机密码,通过即时通,短信,微信等.并同时修改数据库中的原密码为这6位的随机密码.让用户再去修改 ...

    10. java程序打包成jar

      1. 建立文件夹:proj,在该文件夹下建立3个子文件夹:lib,src 2. 在lib文件夹中放置依赖的jar包 3. 在src中放置类文件:com.cnjava.demo.Main.java 4. ...