浏览器-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 标 ...
随机推荐
- asp.net mvc 通过T4模板生成框架
http://www.cnblogs.com/rdst/archive/2012/08/13/2637210.html http://www.kuqin.com/shuoit/20140716/341 ...
- mate标签
<meta charset='utf-8'> <!-- 优先使用 IE 最新版本和 Chrome --> <meta http-equiv="X-UA-C ...
- Java 数据库操作类
import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import ...
- 关于Visual Studio 2015中没有报表项(ReportViewer)的解决方案。
没有报表,一般默认安装之后会出现这种情况,在安装的时候选择自定义安装,把Microsoft Office 开发人员工具.Microsoft SQL Server Data Tools勾选上,安装之后就 ...
- 评价cnblogs.com的用户体验
我们作为大学计算机科学与技术专业的本科生,使用博客园主要是用来搜索和阅读技术资料,并且使用它来编辑发表博客.我们偏向于搜索便捷,界面友好的网站风格.我们对cnblogs的期望是更便捷精准,更便于编辑. ...
- PHP函数call_user_func和call_user_func_array详解
今天在群里面,有个叫lewis的在问call_user_func_array的用法,因为之前一直没有用过,也不能说什么,于是看一下手册,发现是这么写的: call_user_func_array (P ...
- 第2月第1天 GCDAsyncSocket dispatch_source_set_event_handler
一.GCDAsyncSocket的核心就是dispatch_source_set_event_handler 1.accpet回调 accept4Source = dispatch_source_cr ...
- JSON.stringify()和JSON.parse()
parse用于从一个字符串中解析出json对象,如 var str = '{"name":"huangxiaojian","age":&qu ...
- Windows10+Ubuntu双系统安装 (转)
1.Windows10+Ubuntu双系统安装: http://www.jianshu.com/p/2eebd6ad284d 2.UEFI启动模式安装ubuntu指南 : http://col ...
- EL操作 web 对象的常用方法
11个常见的web对象 pageScope :获得pageContext对象中存的数据 requestScope :获得request对象中存的数据 sessionScope :获得session对象 ...
- 浏览器-06 HTML和CSS解析2