How Broswers Work<二>渲染引擎(1)
来源:互联网 发布:数据渲染 编辑:程序博客网 时间:2024/06/03 19:57
渲染引擎的工作当然是渲染,也就是说将用户请求的内容以特定的方式显示在浏览器显示窗口中。
浏览器默认会现实的格式是HTML,XML 文档和图片,他也能通过插件(浏览器的扩展)显示其他类型的内容,比如使用PDF显示插件可使浏览器显示PDF。我们将用专门的章节讲解插件,在本章节中,我们将重点讲解CSS是如何影响HTML以及图片的显示的。
渲染引擎
下面讲解涉及的浏览器-Firefox,Chrome和Safari 都内建两个渲染引擎。Firefox用的是自家的Gecko,Safari和Chrome用的是Webkit.
关于浏览器引擎的介绍在第一篇翻译中有详细的,想了解更多,参照第一篇
主要的过程
首先渲染引擎要从来自网络层的文档中获取内容,通常以8K分块的方式完成,之后的基本流程如下:
Figure 2:Rendering engine basic flow.
渲染引擎将开始解析HTML文档,将它标签转化成DOM节点并形成一棵DOM树也称“内容树”,随后解析数据的样式,包括文档外的css文件以及在文档内的元素的样式,这些样式信息也将建立一棵树-渲染树(the render tree).
渲染树有一些包含可见属性例如颜色和大小的矩阵组成,他们将以正确的顺序显示到屏幕。
建完渲染树后,渲染引擎将开始布局。这意味着将给每个节点准确的定位。在此之后就开始绘画,即将所有准备好的东西在浏览器中绘制出来-渲染引擎的工作完成啦,接下来就是UI Backend层的事啦。
理解这是一个平缓的过程很重要,就更好的用户体验来看,渲染引擎应该尽可能快的将内容绘制到屏幕上,它不会等待在HTML解析完成到渲染树建立完成的时间,当还有部分内容还在从网络层到达渲染引擎层的时候,内容的一部分将被解析并被显示到屏幕。
主要流程的例子
Figure 3: Webkit main flow
Figure 4: Mozilla’s Gecko rendering engine main flow
通过上面的图3与图4可以看出:尽管webkit和Gecko使用的术语稍有不同,他们的主要流程基本相同。Gecko称由格式化元素组成的树为frame树,每个元素都是一个frame,webkit则使用render树这个名词来命名由渲染对象组成的树。Webkit中元素的定位称为布局,而Gecko中称为回流。Webkit称利用dom节点及样式信息去构建render树的过程为attachment,Gecko在html和dom树之间附加了一层,这层称为内容接收器(content sink),相当制造dom元素的工厂。下面将讨论流程中的各个阶段。
- How Broswers Work<二>渲染引擎(1)
- How Broswers Work<二>渲染引擎(3)--HTML解析
- How Broswers Work<二>渲染引擎-script解析(上)
- #How Broswers Work<二>渲染引擎--script(下)
- How Broswers Work<二>渲染引擎(3)--Layout
- How Broswers Work<二>渲染引擎--CSS解析
- How Broswers Work<二>渲染引擎(2)--解析的一般过程
- How Browsers Work<二>渲染引擎--painting
- DX11渲染引擎进展(二)
- [摘录]How browsers work之页面渲染流程
- 浏览器工作原理(二):渲染引擎的详细介绍
- 浏览器原理(二)——渲染引擎
- How browsers work----The rendering engine(1)
- 引擎系列学习【二】图形渲染管线
- Unity3D引擎之渲染技术系列二
- 浏览器内核(渲染引擎)
- How Servlet Containers Work(zz )
- How dose SMI-S work?(2)
- 【Unity Shaders】Mobile Shader Adjustment—— 什么是高效的Shader
- 判断jquery对象是否存在 用 $("#id").length>0
- 用Java自带的MD5加密
- Django博客开发(九)—添加多说评论和JS日历
- Java调用Linux下的shell命令并将结果以流的形式返回
- How Broswers Work<二>渲染引擎(1)
- EChart
- JS中将数字保留小数点后N位的方法
- Shell函数
- iOS-----AVFoundation框架的功能详解 相机自定义拍照和录制视频
- bzoj2823: [AHOI2012]信号塔
- mac下为eclipse安装反编译插件
- 一张图教你如何使用Lucene
- 如何彻底卸载MySQL