浏览器是怎样工作的二:渲染引擎 HTML解析
发布时间:2012-05-09 20:34:20
渲染引擎
渲染引擎的职责是……渲染,也就是把请求的内容显示到浏览器屏幕上。
默认情况下渲染引擎可以显示HTML,XML文档以及图片。 通过插件(浏览器扩展)它可以显示其它类型文档。比如使用PDF viewer插件显示PDF文件。我们会在一个专门的章节讨论插件与扩展。在这一节我们将专注渲染引擎的主要用途——显示用CSS格式化的HTML与图片。
各种渲染引擎
我们提到的Firefox, Safari两种浏览器构建于两种渲染引擎之上:Firefox使用Gecko —— Mozilla自家的渲染引擎;Safari 和 Chrome 都使用 Webkit。
Webkit 是一个开源的渲染引擎,它源自Linux平台上的一个引擎,经过Apple公司的修改可以支持Mac与Windows平台。更多信息可以参考: http://webkit.org/ 。
主要流程
渲染引擎开始于从网络层获取请求内容,一般是不超过8K的数据块。接下来就是渲染引擎的基本工作流程:
图 2:渲染引擎的基本工作流程(解析HTML构建DOM树,渲染树构建,渲染树布局,绘制渲染树)。
渲染引擎会解析HTML文档并把标签转换成内容树中的DOM节点。它会解析style元素和外部文件中的样式数据。样式数据和HTML中的显示控制将共同用来创建另一棵树——渲染树。
渲染树包含带有颜色,尺寸等显示属性的矩形。这些矩形的顺序与显示顺序一致。
渲染树构建完成后就是"布局"处理,也就是确定每个节点在屏幕上的确切显示位置。 下一个步骤是 绘制 —— 遍历渲染树并用UI后端层将每一个节点绘制出来。
一定要理解这是一个缓慢的过程,为了更好的用户体验,渲染引擎会尝试尽快的把内容显示出来。它不会等到所有HTML都被解析完才创建并布局渲染树。它会 在处理后续内容的同时把处理过的局部内容先展示出来。
主要流程示例
图 3:Webkit主要流程
图 4:Mozilla的Gecko渲染引擎主要流程(3.6)
从图3和图4中可以看出,尽管Webkit与Gecko使用略微不同的术语,这个过程还是基本相同的。
Gecko 里把格式化好的可视元素称做"帧树"(Frame tree)。每个元素就是一个帧(frame)。 Webkit 则使用"渲染树"这个术语,渲染树由"渲染对象"组成。Webkit 里使用"layout"表示元素的布局,Gecko则称为"Reflow"。Webkit使用"Attachment"来连接DOM节点与可视化信息以构建渲染树。一个非语义上的小差别是Gecko在HTML与DOM树之间有一个附加的层 ,称作"content sink",是创建DOM对象的工厂。我们会讨论流程中的每一部分。
解析
因为解析是渲染引擎中一个很重要的处理,我们会讲的略深入一些。让我们从一个小的解析介绍开始。
解析一个文档意味着把它翻译成有意义的结构以供代码使用。解析的结果通常是一个表征文档的由节点组成的树,称为解析树或句法树。
示例——解析表达式"2 + 3 – 1″可以返回下面的树:
图 5:数学表达式树节点
语法
解析是基于文档所遵循的语法规则——书写所用的语言或格式——来进行的。每一种可以解析的格式必须由确定的语法与词汇组成。这被称之为上下文无关语法。 人类语言并非此种语言,所以不能用常规的解析技术来解析。
解析器——词法分析器组合
解析器有两个处理过程——词法分析与句法分析。
词法分析负责把输入切分成符号序列,符号是语言的词汇——由该语言所有合法的单词组成。
句法分析是对该语言句法法则的应用。
解析器通常把工作分给两个组件——分词程序负责把输入切分成合法符号序列,解析程序负责按照句法规则分析文档结构和构建句法树。词法分析器知道如何过滤像空格,换行之类的无关字符。
图 6:从源文档到解析树(文档,词法分析,句法分析,解析树)。
解析过程是交互式的。解析器通常会从词法分析器获取新符号并尝试匹配句法规则。如果匹配成功,就在句法树上创建相应的节点,并继续从词法分析器获取下一个符号。如果没有匹配的规则,解析器会内部保存这个符号,并继续从词法分析器获取符号,直到内部保存的所有符号能够成功匹配一个规则。如果最终无法匹配,解析器会抛出异常。这意味着文档无效,含有句法错误。
转换
多数情况下解析树并非最终结果。解析经常是为了从输入文档转换成另外一种格式。比如编译器要把源码编译成机器码,会首先解析成解析树,再把解析树转换成机器码。
图 7:编译过程(源码,解析,解析树,转换,机器码)。
猜你喜欢
- Tornado是一个python的开源web框架,它比django要轻量级到多,也没有什么组件,只有运用到对应到业务场景下我才使用这个框架,
- 学习器在测试集上的误差我们通常称作“泛化误差”。要想得到“泛化误差”首先得将数据集划分为训练集和测试集。那么怎么划分呢?常用的方法有两种,k
- 前言:本文的主要内容是介绍Python中 if 语句及其使用,包括条件测试、if -else 语句、if -elif-else 语句以及使用
- 软件测试大型软件系统的开发是一个很复杂的过程,其中因为人的因素而所产生的错误非常多,因此软件在开发过程必须要有相应的质量保证活动,而软件测试
- 本文实例讲述了JS实现带鼠标效果的头像及文章列表代码。分享给大家供大家参考。具体如下:这是一种带图片功能的文章或新闻列表功能,鼠标滑过标题列
- 内容摘要:在像网站首页这样的资源比较集中的页面中,那些栏目最经常被用户点击?居左居右对广告的点击率的影响是什么?“一切用数字说话”:以上问题
- 方法一: $(document).on('touchmove',function(e){ e.preventDefault(
- 登录、注销和登录限制:登录在使用authenticate进行验证后,如果验证通过了。那么会返回一个user对象,拿到user对象后,可以使用
- 一:修改文件上传语言为PHP 打开fckconfig.js 找到: var _FileBrowserLanguage = 'asp&
- 发现问题最近在工作中遇到了一个问题,在定义了schema之后,每一次save都会报E11000,但是db.xxx.find()里面根本就没有
- 一个图形化的交互式运行环境,对于编程语言的学习和开发,特别是可视化方面,提供了极大的便利。比如在window上使用R语言进行绘图,在R语言自
- python time模块计算时间之间的差距练习题1. 当前月1号对应的0点的时间戳# 定义一个当前月分的一号0点字符串格式的时间 now_
- 异常描述有时我们的Excel有一个调整过自定义格式的日期字段:当我们用pandas读取时却是这样的效果:不管如何指定参数都无效。出现原因没有
- mark标记在实际工作中,我们要写的自动化用例会比较多,也不会都放在一个py文件中,如果有几十个py文件,上百个方法,而我们只想运行当中部分
- 这个间歇性向上滚动js代码很适合做广告展示,友情链接等等。与平常的无缝向上连续滚动不同的是它每滚动一个就会停顿一会儿。<!DOCTYP
- JavaScript中的typeof其实非常复杂,它可以用来做很多事情,但同时也有很多怪异的表现.本文列举出了它的多个用法,而且还指出了存在
- 接口性能测试时,接口请求参数是根据一定的规则拼接后进行MD5加密后再进行传参,因此借助于python脚本实现,则可以有效提升测试效率。1.分
- 注:转载就注入出自'孤孤浪子博客'原创 http://itpro.blog.163.com 第一步 http://itpro
- 问题你想将一个模块分割成多个文件。但是你不想将分离的文件统一成一个逻辑模块时使已有的代码遭到破坏。解决方案程序模块可以通过变成包来分割成多个
- 一个简单的验证码爬取程序本文介绍了在Python2.7环境下爬取网站验证码:思路就是获取验证码对应的url,然后发起requst请求,读取该