选择器

  • 其实现由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. Brackets前端开发IDE工具

      Brackets是一个开源的前端开发IDE工具,网页设计师和前端开发人员必备的前端开发IDE工具. 它能够使你在开发WEB网站实时预览你的网页,目前版本只适用于Chrome浏览器可以实时预览效果 支持 ...

    2. mysql关联表的复制

      1. 复制被参照的表: CREATE TABLE clone_product_1 LIKE product_1; INSERT INTO clone_product_1 SELECT * FROM p ...

    3. 【转载】Java反射: 数组

      原创链接:http://czj4451.iteye.com/blog/1479486 java.lang.reflect.Array Java反射机制通过Array类来处理数组,结合java.lang ...

    4. 搬家到cnblogs

      从openshift搬到LOFTER再到点点然后来cnblogs,晃悠一大圈,主要是没时间学习很多东西,再加上cnblogs的搜索收录情况比较好一点(百 度搜索).另外听闻百度空间bye-bye了,以 ...

    5. MySQL查询优化之explain的深入解析

      在分析查询性能时,考虑EXPLAIN关键字同样很管用.EXPLAIN关键字一般放在SELECT查询语句的前面,用于描述MySQL如何执行查询操作.以及MySQL成功返回结果集需要执行的行数.expla ...

    6. Table

      Table tb = new Table();TableRow r = new TableRow(); TableCell c = new TableCell();c.Text = "Sta ...

    7. thinkphp语言包

      1.config.php语言包相关配置. //开启语言包 'LANG_SWITCH_ON' => true, 'LANG_AUTO_DETECT' => true, // 自动侦测语言 开 ...

    8. 数据存储_SQLite (2)

      SQL代码应用示例 一.使用代码的方式批量添加(导入)数据到数据库中 在ios项目中使用代码批量添加多行数据示例 代码示例: 1 // 2 // main.m 3 // 01-为数据库添加多行数据 4 ...

    9. [Head First设计模式]生活中学设计模式——迭代器模式

      系列文章 [Head First设计模式]山西面馆中的设计模式——装饰者模式 [Head First设计模式]山西面馆中的设计模式——观察者模式 [Head First设计模式]山西面馆中的设计模式— ...

    10. 如何应对ISP乱插广告（案例分析）

      一.广告从何而来? 利益让人铤而走险,从而推动行业“发展”:广告的利益还真不小,xx房产门户网站上一个广告位少则几千,多则几十万:记得在校读书的时候,刚学会做网站,第一想法就是等自己的网站发展成熟有人 ...