浏览器-05 HTML和CSS解析1
- 一个浏览器内核几个主要部分,
HTML/CSS
解析器,网络处理,JavaScript
引擎,2D/3D
图形引擎,多媒体支持等;
HTML 解析和 DOM
网页基本结构
- 一个网页(
Page
),每个Page
都有一个主框(Main Frame
),该框通常包含一个HTML Document
, 主框也可能包含子框(sub frame
); - 这些框构成一个树型结构,以主框为根节点,每个框也可能包含自己的
HTML Document
,它是一颗DOM
树; WebKit
相对应的类,和网页的结构一一对应;
WebKit设计模式
- 以类
Chrome
为例,需要实现:- 具备有获取各个平台资源的能力;
- 把 WebKit 的状态和进度等信息分发给
WebKit
的使用者;
WebKit
通过Chrome
的接口来完成后使用ChromeClient
抽象类来实现;- 每个
port
实现类ChromeClient
,一方面监听WebKit
状态,一方面返回WebKit
所需要的资源和信息; WebKit
直接调用Chrome
的接口,Chrome
调用ChromeClient
的接口,而ChromeClient
的实现由各个移植来完成;WebKit
中很多都是该模式的类组合:Frame
和FrameLoader
:Frame
是页面框和框的加载器;一个负责页面的表示,一个负责加载需要的接口及实现;Document
和DocumentLoader
;CachedImage
和ImageLoader
;WebView
和Page
:Page
是WebKit 内部表示网页的类,
WebView是
WebKit对外表示网页的类,
Page只有一个实现,
WebView`在不同的移植中有不同的实现;
- 类
Chrome
是一个非常重要的类,是WebKit
与它的使用者之间的桥梁,主要功能:- 跟
UI
和渲染显示相关的需要移植实现的接口集合类; - 继承自
HostWindow
(宿主窗口),其包含一系列接口,用来通知重绘或者更新相应整个窗口,滚动窗口等; - 窗口相关操作,例如显示,隐藏等;
- 显示/隐藏窗口中的
toolbar,statusbar,scroolbar
等; - 显示
JavaScript
相关的窗口,例如JavaScript
的Alert,confirm, prompt
窗口等;
- 跟
HTML
解析的一般过程
DOM 标准
- 定义的是一组平台无关和语言无关的接口,该接口允许编程语言动态访问和更改结构化文档;
DOM level 1
Core
:一 组底层的接口,其接口可以表示任何结构化的文档,同时也允许对其进行扩展,典型的例子是支持XML
文档;HTML
:一组基于Core
定义的上层接口,主要是为了方便HTML
文档的访问;
DOM level 2
Core
:对DOM level1
中core
部分的扩展,如getElementById
;还有很多跟名空间(namespace
)相关的接口;Views
:允许动态访问和修改文档内容的表示,主要是两个接口AbstractView
和DocumentView
;Events
:主要有EventTarget
,Mouse events
等接口,但不支持Keyboard
;Style
:加入接口可以修改样式属性;Traversal and range
:遍历树加上对制定范围的文档修改删除等操作;HTML
: 扩充DOM level1
的HTML
部分,允许动态访问和修改HTML
文档;
DOM level 3
Core
:加入了新的adoptNode
和textContent
支持;Load and save
:动态加载和序列化DOM
表示;Validation
:根据scheme
验证文档的有效性;Events
:主要扩展对keyboard
,Touch
的支持XPath
: 使用XPath1.0
来访问DOM
树;是一种简单直观的检索DOM
树节点的方式;
WebKit的CSS实现
解析器
- 解析器对上层的接口是
CSSParser
,所有任务均有其处理; - 调用
CSSParser
的createStyleRule
函数,将选择器和属性列表处理生成StyleRule
类型对象; - 可能调用情况:
- 当
DOM
建立好之后在创建RenderObject
的时候会调用CSSParser
; JS
代码被执行时,JavaScript
引擎会间接调用CSSParser
为元素的 属性style
解析;
- 当
- 实际上
WebKit
会为每个网页设置一个缺省的样式,不同的的移植(port)会有不同的缺省样式;
内部表示
被解析后的
CSS
样式就是一组样式规则,每一个规则包含一组选择器和一组样式属性;
- 样式规则是一种基本的样式类型,
CSS
的标准包含了多种规则类型:Style
:这个是基本类型,一般大多数规则属于这个类型;Import
:是WebKit
中为方便引入的,其对应的是一个导入CSS
文件的Style
元素;Media
: 对应于CSS
标准中的@media
类型;Fontface
:CSS3
新引入的自定义字体的规则类型;Page
:对于CSS
标准中的@page
类型;Keyframes
:WebKit
的@-webkit-key-frames
类型,用来指定特定帧的样式属性信息;Region
:对CSS
标准正在进行中的Regions
的支持,方便开发者对页面进行分区域来排版;
StyleRuleImport
类,这个一个伪类型,CSS
中并没有该类型的定义,是WebKit
处理CSS
文件方便引入的;- 该类需要两个类来辅助完成
StyleSheetContents
类,就是 CSS 文件中各个规则的处理和内部表示,这些规则被称为子规则,构成一个列表;CSSStyleSheet
,该类是个包装类,代表CSS
文件包,浏览器-05 HTML和CSS解析1的更多相关文章
- 浏览器-06 HTML和CSS解析2
选择器 其实现由CSSSelector类来完成: CSSSelector的作用是储存从解析器生成的结果信息; 这里匹配指的是当需要为每个DOM中的节点计算样式时,WebKit需要根据当前的节点信息来从 ...
- IE浏览器没有加载CSS或js文件的秘密及解决办法
其实是两处资料拼成这一篇博文的,因为在开发过程中遇到,有的文章只是说明原因,而没有给出解决方案,所以再次给出解释和解决方法,以供参考,如果有好的解决方法,也请分享下! ---------------- ...
- CSS Houdini:用浏览器引擎实现高级CSS效果
vivo 互联网前端团队-Wei Xing Houdini被称之为Magic of styling and layout on the web,看起来十分神秘,但实际上,Houdini并非什么神秘组织 ...
- IE浏览器各版本的CSS Hack
IE浏览器各版本的CSS Hack 如下示例: .test{ color:black;/*W3C*/ color:red\9;/* IE6-IE10 */ _color:black;/*IE6*/ ...
- 判断浏览器是否支持某个css属性
方法:直接判断浏览器是否支持某个CSS属性才是王道,document.documentElement.style 如:判断是否支持 transform if( 'MozTransform' in do ...
- 最全的CSS浏览器兼容问题【CSS技巧 】
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格 ...
- 在不同的浏览器使用不同的css样式,解决浏览器兼容问题
区别IE6与FF: background:orange; *background:blue; 区别IE6与IE7: background:green !import ...
- 如何让不同浏览器调用不同的CSS样式
如何让不同浏览器调用不同的CSS样式 由 于对W3C标准支持程度的不同,往往导致同一个CSS样式表在各种Web浏览器中的呈现大相径庭.以目前市场占有率最高的两个浏览器Microsoft Interne ...
- 网站怎么布局能解决不同浏览器对CSS解析的差异,使用css reset
很多地方都提到过CSS Reset这个概念,而且细心的朋友会发现,许多大网站的CSS文件中也含有CSS Reset内容. CSS Reset是什么? 在HTML标签在浏览器里有默认的样式,例如 p 标 ...
随机推荐
- 【Beta】七天屠蛟记
团队名字: 一不小心就火了 屠龙天团少年们: 031402504 陈逸超 (组长) 031402505 陈少铭 031402511 黄家俊 031402515 翁祖航 031402516 黄瑞钰 03 ...
- bzoj4571: [Scoi2016]美味
4571: [Scoi2016]美味 Time Limit: 30 Sec Memory Limit: 256 MB Submit: 275 Solved: 141 [Submit][Status][ ...
- JS事件-事件处理程序-笔记总结ing...
html事件处理程序:缺点-行为与结构耦合<input type="button" onclick = "diaoyong();"> dom0级事件 ...
- 20145204&20145212信息安全系统实验一
信息安全系统实验报告 博客链接
- [Unity3D]粒子系统学习笔记
粒子阴影的处理 通过Material填充粒子系统的render后,默认是显示阴影的: 可以通过设置来调整: 调整后的效果, 每个粒子就没有阴影了 增加粒子效果 设置为合成的材质,效果显示加倍: 添加子 ...
- java8--类加载机制与反射(java疯狂讲义3复习笔记)
本章重点介绍java.lang.reflect包下的接口和类 当程序使用某个类时,如果该类还没有被加载到内存中,那么系统会通过加载,连接,初始化三个步骤来对该类进行初始化. 类的加载时指将类的clas ...
- [NHibernate]存储过程的使用(一)
目录 写在前面 文档与系列文章 Nhibernate中使用存储过程 一个例子 总结 写在前面 上篇文章一个小插曲,分析了延迟加载是如何解决N+1 select查询问题的.这篇开始介绍在nhiberna ...
- jQuery包装集
jQuery包装集指的是通过$()方法返回的一个元素集,这跟一般的javascript数组有所区别, 包装集在后者的基础上还有一些初始化的函数和属性. 我们可以对二者进行一个比较: jsdiv = d ...
- MySQL中find_in_set()和in的区别
弄个测试表来说明两者的区别 CREATE TABLE `test` ( `id` int(8) NOT NULL auto_increment, `name` varchar(255) NOT NUL ...
- Swift3.0P1 语法指南——控制流
原档:https://developer.apple.com/library/prerelease/ios/documentation/Swift/Conceptual/Swift_Programmi ...
- 浏览器-06 HTML和CSS解析2