选择器

  • 其实现由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. Alpha阶段第三次Scrum Meeting

      情况简述 Alpha阶段第三次Scrum Meeting 敏捷开发起始时间 2016/10/24 00:00 敏捷开发终止时间 2016/10/25 00:00 会议基本内容摘要 总结了之前学习的内容 ...

    2. 动手实验iptables的NAT功能实现流量穿透

      1.NAT和iptables理论见: http://lustlost.blog.51cto.com/2600869/943110 2.引子 近期,有同事抱怨说数据入库时,由于数据库所在的服务器只有内网 ...

    3. ionic 界面数据缓存问题

      在ionic开发过程中列表到详情,在返回是可能存在,列表重新加载问题,不能回到用户上次点击的地方 在处理前期各种坑,把详情设置为弹出层,缓存数据等等,然而会出现各种问题,无意间发现一篇文章,一个属性解 ...

    4. python3随记——字符编码

      1.1什么是字节 字节(Byte)是计算机信息技术用于计量存储容量的一种计量单位,也表示一些计算机编程语言中的数据类型和语言字符. 比特(bit)在计算机中最小的单位,在二进制位的电脑的系统中,每一b ...

    5. Linux快速体验

      目录结构: /:根目录,根目录下一般只存放子目录,不存放文件./bin: 存放可执行的二进制文件,如常用的命令ls. tar.mv. cat等./boot: 存放linux系统启动时需要的一些文件./ ...

    6. web前端基础知识-（一）html基本操作

      1. HTML概述 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样 ...

    7. 点评前端开发工具cortex安装使用方法

      cortex安装方法: 安装最新版 sudo npm install -g cortex cortex config set registry http://registry.cortexjs.org ...

    8. 11月6日下午PHP注册审核（审核状态控制登录、可以更改审核状态）

      1.创建登录界面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

    9. js分页小结

       今天解决了JS分页的问题1 页码 给每页的内容套一个相同的类名 通过选择器加上.length或者.size() 来获得总页数2当前页的页码可以使用each(function(index,DOMsss ...

    10. ubuntu下安装mysql及卸载mysql方法

      1. 删除mysql a. sudo apt-get autoremove --purge mysql-server-5.0 b. sudo apt-get remove mysql-server c ...