webkit一般性渲染过程
在浏览器中,有一个最重要的模块,它主要作用是将页面转变成可视化的图形结果,这就是浏览器内核。通常,它也被称为渲染引擎。所谓的渲染,就是根据描述或者定义构建数学模型,通过模型生成图像的过程。浏览器的渲染引擎就是能够将HTML/CSS/JavaScript文本及其相应的资源文件转换成图像结果的模块。
根据渲染引擎所提供的渲染网页的功能,一般而言,它需要包含很多模块,主要分三层,最上层用虚线框住的是渲染引擎所提供的功能。
从图中大致可以看出,一个渲染引擎主要包括HTML解释器、CSS解释器、布局和JavaScript引擎等,其他还有绘图模块、网络等并没有在图中直接表示出来。
- HTML解释器:解释HTML文本的解释器,主要作用是将HTML文本解释成DOM树,DOM是一种文档的表示方法。
- CSS解释器:级联样式表的解释器,它的作用是为DOM中的各个元素对象计算出样式信息,从而为计算最后网页的布局提供基础设施。
- 布局:在DOM创建之后,Webkit需要将其中的元素对象同样式信息结合起来,计算它们的大小位置等布局信息,形成一个能够表示这所有信息的内部表示模型。
- JavaScript引擎:使用JavaScript代码可以修改网页的内容,也能修改CSS的信息,JavaScript引擎能够解释JavaScript代码并通过DOM接口和CSSOM接口来修改网页内容和样式信息,从而改变渲染的结果。
这些模块依赖很多其他的基础模块,这其中包括网络、存储、2D/3D图形、音频视频和图片解码器等。实际上,渲染引擎中还应该包括如何使用这些依赖模块的部分。
一般的渲染过程:如下图,从左上角开始,首先是网页内容,输入到HTML解释器,HTML解释器在解释它后构建成一棵DOM树,这期间如果遇到JavaScript代码则交给JavaScript引擎去处理;如果网页中包含CSS,则交给CSS解释器去解释。当DOM建立的时候,渲染引擎接收来自CSS解释器的样式信息,构建一个新的内部绘图模型。该模型由布局模块计算模型内部各个元素的位置和大小信息,最后由绘图模块完成从该模型到图像的绘制。
图中虚线表示在渲染过程中,每个阶段可能使用到的其他模块。在网页内容的下载中,需要使用到网络和存储,这点显而易见。但计算布局和绘图的时候,需要使用2D/3D的图形模块,同时因为要生成最后的可视化结果,这时需要开始解码音频、视频和图片,同其他内容一起绘制到最后的图像中。
在渲染完成之后,用户可能需要跟渲染的结果进行交互,或者网页自身有动画操作,一般而言,这需要持续的重复渲染过程。
Webkit的加载和渲染
浏览器的主要作用就是将用户输入的URL转变成可视化的图像。按照某些文档的分析,这其中包含两个过程,其一是网页加载过程,就是从URL到构建DOM树;其二是网页渲染过程,从DOM树到生成可视化图像。其实,这两个过程也会交叉,很难给予明确的区分,所以,为了简单起见,统称网页渲染过程。
网页渲染还有一个特性,就是网页通常比我们的屏幕可视面积要大,而当前可见的区域,我们称为视图(viewport)。因为网页比可视区域大,所以浏览器在渲染网页的时候,一般会加入滚动条以帮助翻滚网页。就用户体验来说,垂直方向滚动效果好于水平方向。
Webkit的渲染过程
整个渲染的过程中的包含数据和模块是:数据包含网页内容、DOM、内部表示和图像,模块则包括HTML解释器、CSS解释器、JavaScript引擎以及布局和绘图模块。
根据数据的流向,这里将渲染过程分成三个阶段,第一个阶段是从网页的URL到构建完DOM树,第二个阶段是从DOM树到构建完WebKit的绘图上下文,第三个阶段是从绘图上下文到生成最终的图像。
图中描述的是从网页URL到构建完DOM树的这个过程,数字表示的是基本顺序,当然也不是严格一致,因为这个过程可能重复并且可能交叉。
具体的过程如下。
1.当用户输入网页URL的时候,WebKit调用其资源加载器加载该URL对应的网页。
2.加载器依赖网络模块建立连接,发送请求并接收答复。
3.WebKit接收到各种网页或者资源的数据,其中某些资源可能是同步或异步获取的。
4.网页被交给HTML解释器转变成一系列的词语(Token)。
5.解释器根据词语构建节点(Node),形成DOM树。
6.如果节点是JavaScript代码的话,调用JavaScript引擎解释并执行。
7.JavaScript代码可能会修改DOM树的结构
8.如果节点需要依赖其他资源,例如图片、CSS、视频等,调用资源加载器来加载它们,但是它们是异步的,不会阻碍当前DOM树的继续创建;如果是JavaScript资源URL(没有标记异步方式),则需要停止当前DOM树的创建,直到JavaScript的资源加载并被JavaScript引擎执行后才继续DOM树的创建。
在上述的过程中,网页在加载和渲染过程中会发出“DOMContent”事件和DOM的"onload"事件,分别在DOM树构建完成之后,以及DOM树建完并且网页所依赖的资源都加载完成之后发生,因为某些资源的加载并不会阻碍DOM树的创建,所以这两个事件多数时候不是同时发生的。
接下来就是WebKit利用CSS和DOM树构建RenderObject树直到绘图上下文
这一阶段的具体过程如下:
1.css文件被css解释器解释成内部表示结构
2.CSS解释器工作完之后,在DOM树上附加解释后的样式信息,这就是RenderObject树
3.RenderObject节点在创建的同时,WebKit会根据网页的层次结构创建RenderLayer树,同时构建一个虚拟的绘图上下文。
RenderObject树的建立并不表示DOM树会被销毁,事实上,上述图中的四个内部表示结构一直存在,直到网页被销毁,因为它们对于网页的渲染起了非常大的作用。
最后就是根据绘图上下文生成最终的图像,这一过程主要依赖2D和3D图形库,如下图:
图中这一阶段对应的具体过程如下:
1.绘图上下文是一个与平台无关的抽象类,它将每个绘图操作桥接到不同的具体实现类,也就是绘图具体实现类。
2.绘图实现类也可能有简单的实现,也可能有复杂的实现。
3.绘图实现类将2D图形库或者3D图形库绘制的结果保存下来,交给浏览器来同浏览器界面一起显示。
这一过程实际上可能不像图中描述的那么简单,现代浏览器为了绘图上的高效性和安全性,可能会在这一过程中引入复杂的机制。而且,绘图也从之前单纯的软件渲染,到现在的GPU硬件渲染、混合渲染模型等方式。
上面介绍的是一个完整的渲染过程。现代网页很多事动态网页,这意味着在渲染完成之后,由于网页的动画或者用户的交互,浏览器其实一直在不停地重复执行渲染过程。
相关推荐
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 后来发现代码里写的好好的,一到页面上居然没有反应,和没写一个样,f12看了下,原来是-webkit-box-orient: vertical;这个属性丢失,...
Qtwebkit安装库适用于QT5.14版本。 包含了MinGw730 、VS2017 编译器的的32和64位库。 qtwebkit-Windows-Windows_7-Mingw73-Windows-Windows_7-X86.7z qtwebkit-Windows-Windows_10-Mingw73-Windows-Windows_10-X86_...
webkit-ubuntu-20.04
Linux7安装teamviewer_13或teamviewer_14版本缺少qt5-qtwebkit包,可使用rpm -ivh qt5-qtwebkit-5.6.2-1.el7.x86_64.rpm --nodeps安装qt5包,在安装teamviewer即可。 error: Failed dependencies: libQt5WebKit.so....
《WebKit技术内幕》从炙手可热的HTML5 的基础知识入手,重点阐述目前应用最广的渲染引擎项目——WebKit。不仅着眼于系统描述WebKit 内部渲染HTML 网页的原理,并基于Chromium 的实现,阐明渲染引擎如何高效地利用...
qt5-qtwebkit-5.9.1-2.el7.x86_64.rpm插件,完美解决Teamviewer Linux 报错
WebKit-SVN-r38240.zip WebKit-SVN-r38240.zip WebKit-SVN-r38240.zip
浏览器内核开发,WebKit.net是对WebKit的.Net封装,使用.net程序可以非常方便的集成和使用webkit作为加载网页的容器。
安装Mac 可以简单的使用 brew 安装: brew install ios-webkit-debug-proxyLinux 或者 Mac: sudo apt-get install \ autoconf automake \ libusb-dev libusb-1.0-0-dev \ libplist-dev ...
WebKit技术内幕WebKit技术内幕WebKit技术内幕WebKit技术内幕WebKit技术内幕
ios-webkit-debug-proxy-1.9.0-win64-bin
能解决部分linux安装teamviewer种的报错问题,共享给大家,方便你我他,自己解压就是rpm
-webkit-line-clamp 概述: -webkit-line-clamp 是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。 限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他外来的...
成功安装Teamviewer的关键,解决:缺少libQt5WebKitWidgets.so的关键包。 以下是错误原文 Error: Package: teamviewer-13.0.6634-0.x86_64 (/teamviewer.x86_64) Requires: libQt5WebKitWidgets.so.5()(64bit) >...
linux 安装 teamviewer qt5-qtwebkit-5.9.1-1.el7.x86_64.rar
主要介绍了CSS3 Notes: -webkit-box-reflect实现倒影的实例,具有一定的参考价值,有需要的可以了解一下。
html5-webkit-cube-slider.zip
web 打包工具32 位node-webkit - nwjs-v0.34.5-win-ia32 32位系统