浏览器是如何工作的系列:渲染引擎

渲染引擎的功能就是渲染,在浏览器上显示请求的内容。
默认情况下,渲染引擎可以显示HTML和XML文档和图像。他也可以显示其他类型的插件(浏览器扩展)。例如显示PDF使用PDF浏览器插件。
我们将用一个特殊的章节来讨论插件和扩展。在这个章节中,我们重点来关注使用CSS样式渲染的HTML和图片。

一、渲染引擎:
我们的参考浏览器——FF、Chrome、Safrai都是建立在两个渲染引擎下。
FF使用Gecko——“自制”Mozilla渲染引擎,Safrai和Chrome都使用Webkit引擎。
Webkit是一个开源的渲染引擎,开始时适用于linux平台,但是经过Apple公司修改之后开始支持Mac和windows系统。
获取更多详细信息,参考:http://webkit.org。

二、主要流程:
渲染引擎开始从网络层获取请求的文档内容。通常会在8K的块。
下图2.0是渲染引擎的基本流程:

渲染引擎开始解析HTML文档,并且把HTML标签转化为一个被叫做“内容树”的DOM树,它将
解析CSS样式,包括外部样式和内嵌样式。样式数据和HTML中的显示控制将共同用来创建另一棵树——渲染树。
渲染树包含带有颜色和尺寸等显示属性的矩形,这个矩形的顺序与显示顺序一致。

渲染树构建完成后就是“布局”处理。也就是确定每个节点在屏幕上的确切显示位置。 下一个步骤就是绘制,
遍历渲染树并用UI后端层将每一个节点绘制出来。

一定要理解,这是一个缓慢(渐进)的过程,为了更好的用户体验,渲染引擎将尽可能的把内容显示到屏幕上。
它不会等到所有的HTML被解析完才开始创建和布局渲染树。它会在处理后续内容的同时把已经处理过的内容显示出来。
图2.1是Webkit主要流程示例:

图2.2是Gecko主要流程示例:

从图2.1和图2.2可以看出虽然Webkit和Gecko使用术语稍微不同,主要流程还是基本相同的。
Gecko 里把格式化好的可视元素称做“帧树”(Frame tree)。每个元素就是一个帧(frame)。 Webkit 则使用”渲染树”这个术语,渲染树由”渲染对象”组成。
Webkit 里使用”layout”表示元素的布局,Gecko则称为”Reflow”。Webkit使用”Attachment”来连接DOM节点与可视化信息以构建渲染树。
一个非语义上的小差别是Gecko在HTML与DOM树之间有一个附加的层 ,称作”content sink”,是创建DOM对象的工厂。我们会讨论流程中的每一部分。

 

转载于:https://www.cnblogs.com/snake-hand/archive/2013/06/12/3132880.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/261550.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

洛杉矶手机资费9.9美元包打一年

“洛杉矶的油价比中国还便宜两块钱。我就想了,中石油、中石化这是怎么回事啊?能不能换我当老总,试半年,不行我再还给你?” 政府工作报告语言更平实 昨日,政协分组讨论政府工作报告,小崔第二个发…

软考信息系统监理师第五次作业

一、组织协调1、组织协调的基本原则是什么(记)?(1)公平、公正、独立原则(2)守法原则(3)诚信原则(4)科学原则2、什么是科学的原则?科学…

杨氏矩阵问题

杨氏矩阵问题 问题描述: 杨氏矩阵定义:同行元素从左向右依次递增,同列元素从上到下依次递增,注意:杨氏矩阵行列数可以不相等 杨氏矩阵举例: 123456789 在杨氏矩阵中查找一个元素key,要求时间复杂度小于O(…

win10水印烦死了_win10系统下word去水印的方法【图文】

很多win10系统用户都会从网上下载word文档来进行修改,而在下载的word文档中有时候会有水印,而有些用户并不知道要怎么去除word中水印,为此win7之家小编这就给大家带来win10系统下word去水印的方法吧。方法一、1、进入「设计」-「页面背景」-「…

python中如何对dict对象进行排序

有程序:mydict {carl:40,alan:2,bob:1,danny:3}for key in sorted(mydict.iterkeys()):print "%s: %s" % (key, mydict[key])输出结果为: alan: 2 bob: 1 carl: 40 danny: 3 使用key来进行dict的排序: keylist mydict.keys() key…

富丽的SUSE Linux 10.3(1)

作者: hr127 出自: http://www.linuxdiyf.com版权声明: 原创作品,容许转载,转载时请务必以超链接编制标明文章 原始出处 、作者信息和本声明。不然将追究执法责任。 转载于:https://www.cnblogs.com/zgqjymx/archive/2011/03/07/1976023.htm…

ios CGRec用法

/*rect(x,y,width,height);width, height正负代表了从原点的绘制方向,矩形的长宽都是取得绝对值*/// Do any additional setup after loading the view, typically from a nib.#pragma mark -------------------------------------------生成CGRect----------------…

怎么判断子元素距离父元素顶部位置_js获取元素的距离父元素、窗口的距离offsetTop,offsetHeight,clientHeight...

前言相信很多项目中都会有这样一个小需求(PC端,移动端则是点击),鼠标移上某个菜单或者某个位置,显示一个弹出框,移开则隐藏弹出框,就是css中hover效果,这种通常做法是每个子菜单下都有一个弹框,…

matlab实现同态滤波

定义 一幅图像可看成由两部分组成,即 fi代表随空间位置不同的亮度(Illumination)分量,其特点是缓慢变化,集中在图像的低频部分。fr代表景物反射到人眼的反射(Reflectance)分量,其特…

WordPress Mail Subscribe List插件‘sml_name’参数HTML注入漏洞

漏洞名称:WordPress Mail Subscribe List插件‘sml_name’参数HTML注入漏洞CNNVD编号:CNNVD-201306-205发布时间:2013-06-14更新时间:2013-06-14危害等级: 漏洞类型:输入验证威胁类型:远程CVE编…

大摩维持浩大游戏“增持”评级

网易科技讯 3月3日动静,摩根士丹利往日宣布投资陈诉,指出浩大游戏第四季度业绩凌驾预期,具有多个利好要素,另外该公司在Mochi Media平台方面的极力也值得垂青。因此,摩根士丹利维持浩大游戏“增持”的评级。以下为陈诉…

数字图像处理频域滤波实现低通与高通滤波(包含matlab代码)

低通滤波器 理想低通滤波 作用:保留频谱图中圆内低频分量,截断频谱图中圆外高频分量函数表示: 假设频谱中心在 (M/2,N/2)处,则任意频谱成分(u,v) 到中心(原点)的距离D(u,v) 定义为: D0为低通滤…

api报错 javaee maven_JavaEE关于Maven的配置与学习

关于Maven的配置与学习1. 简介官方说法:Apache Maven is a software project management and comprehension tool. Based on the concept of a project object model (POM), Maven can manage a projects build, reporting and documentation from a central piece …

jQuery以Post方式发送请求并获取返回的文件供下载!

用ajax请求文件下载当然是可以的,不用有返回值,代码差不多是这样: try{string FileName ".//doc//[大家网]Beginning.ASP.NET.2.0.E-Commerce.in.C#.2005.From.Novice.to.Professional[www.TopSage.com].pdf";FileName ".//…

Direct3D的一些小贴士收藏(转载)

GPU性能调试: 通常来说,使用CPU时间事件来调试GPU是低效并且是不准确的。D3D API在多数命令下会阻塞,甚至是Draw函数。它会在一些时间片上做一些真正的工作,而这往往是不可预知的。因此,GPU的性能调试只能用PIX或者是其…

数字图像处理同态滤波(matlab)

定义 一幅图像可看成由两部分组成,即 fi代表随空间位置不同的亮度(Illumination)分量,其特点是缓慢变化,集中在图像的低频部分。fr代表景物反射到人眼的反射(Reflectance)分量,其特…

Java并发编程-ReentrantLock源码分析

一、前言 在分析了 AbstractQueuedSynchronier 源码后,接着分析ReentrantLock源码,其实在 AbstractQueuedSynchronizer 的分析中,已经提到过ReentrantLock,ReentrantLock表示下面具体分析ReentrantLock源码。 二、ReentrantLock数…

谷歌浏览器好用的复制粘贴插件_copybetter增强复制 很好用的chrome复制粘贴插件 解除页面复制限制...

使用说明:增强复制(copybetter) 简介增强复制(copybetter)是一款国人开发的chrome浏览器复制增强扩展插件,作者参考了Copy Fixer和Autocopy两个扩展插件开发而成的。这里是他的个人网站:kodango.com。插件集成了关于复制粘贴功能的几个非常常…

绿色vmware 安装后看不到虚拟的网卡

绿色vmware 安装后看不到虚拟的网卡,按下面方法就可以添加。 1. 到Vmware 安装目录,运行 vmnetcfg,运行后出现虚拟网络编辑器 2. 转到主机虚拟适配器,单击添加 3. 转到网络连接就可以看到新增的vmware 虚拟网卡 转载于:https://www.cnblogs.c…

C语言strtok函数的用法

strtok是字符串切割函数 定义 参数一:待切割字符串参数二:分隔符集合首次调用时传递参数为: strtok(str,seps);之后再次调用时传递参数为: strtok(NULL,seps);​ 若可以切割,函数返回值为字符指针,各段切割好的字符串…