1、浏览器功能特性
- 网络:它是第一步,浏览器通过网络模块下载各种资源。如hmtl、 css、js 等等。
- 资源管理: 从网络下载或者获取本地资源,并将它们管理起来,这需要高效的管理机制。例如如何避免重复下载资源等。
- 多页面管理: 浏览器支持多页浏览,需要支持多个网页同时加载,如何解决多页面的相互影响和安全。
- 插件与扩展:插件,不仅能显示网页,而且能支持各种形式的插件和扩展。插件是用来显示网页特定的内容,而扩展是增加浏览器新功能的软件或压缩包。
- 帐户和同步:将浏览器的相关信息,例如历史书签等信息同步到服务器上给用户多系统下统一体验。
- 安全机制:本质上提供一个浏览的环境。避免用户信息被各种非法工窃取和破坏。
- 开发者工具: 对普通用户用处不大,但是对前端开发者来说,是一个必备的工具。
1.1 浏览器内核的功能特性
在浏览器中,有一个重要的模块,它的主要作用是将页面转化为可视化的图像结果,这就是浏览器内核。通常它也被称不渲染引擎。一个渲染引擎主要包括下面几个主要模块。
- HTML解释器: 解释HTML,主要将HTML 文本解释成 DOM 树,DOM 是一种文档表示的方法。
- css 解释器: 它的作用是为DOM中各个元素树计算出样式信息。从而为计算网页的布局提供基础设施。
- 布局: 在DOM 创建之后,Webkit 需要将其中的元素对象同样式信息结合起来,计算它们的大小位置布避信息,形成一个能够表示这所有信息的内部表示模型。
- javascript 引擎:使用js 代码,能够修改dom 结构,也能修改css .从而改变渲染结果。
- 绘图: 使用图形库将布局计算后的各个网页的节点绘制成图像结果。
这些模块是一起工作来完成网页的渲染过程。首先是网页内容,输入到HTML 解释器,HTML 解释器在解释它后构建成一颗DOM 树,这期间如果遇到js 代码,则交给js 引擎去处理;如果网页中包含css,则交给css 解释器去解释。当DOM 建立的时候,渲染引擎接来自css解释器的样式信息,构建一个新的内部绘图模型。该模型由布局模块计算模型各个元素的位置和大小信息,最后由绘图模块完成该模型到图像的绘制。
1.3 webkit 渲染过程
前面介绍这些模块,下面将这些模块进行具体的细化
- 当用户输入url的时候,webkit会调用其资源加载器加载该 url 对应的网页。
- 加载器依赖网络模块建立连接,发送请求并接收答复。
- webkit 接收到各种网页或者资源的数据,其中某些资源可能是同步或者是异步获取的。
- 网页被交给 HTML 解释器转变一系的词语 (TOKEN)
- 解释器根据词语构建 节点(node),形成 Dom 树。
- 如果节点是 js 代码,则调用js 引擎执行。
- js 代码可能会修改 dom 树的结构。
- 如果节点依赖其他资源,如css image,则调用资源加载器来加载这们,但是它是异步的。不会阻碍 dom 树的继续创建;如果 js 资源的url 没有标明是异步加载。则会停止当前DOM 的创建,直到 js 资源 加载完成并执行才能继续 DOM 的创建。 上述的过程中,网页在被加载中会发 ‘DOMConent’ 事件和 DOM 的‘onload’ 事件,分别在 DOM 树构建完之后,以及DOM树构建完成并且网页依赖的资源都加载完成之后发生,因为某些资源的加载不会阻碍 DOM 树的构建,所以这两个事件基本上不会同时发生的。 接下来就是 webkit 利用css 和dom 树构建 renderObject 树直到绘图上下文,这一阶段的具体过程如下。
- css 文件 被css 解释器解释成内部表示的结构。
- css 解释器工作完之后,在DOM 树上附加解释后的样式信息,这就是 RenderObject 树。
- RenderObject 节点在创建的同时,webkit 会根据网页的层次结构创建RenderLayer 树,同时构建一个虚拟的绘图上下文。其中这中间还复杂的过程。 RenderObject 树的建立并不表示DOM 树会被销毁, DOM 树、RenderObject 树、RenderLayer 树、绘图上下文,这四个表示结构一直存在,直到网页被销毁,因为它们对于网页的渲染起了非常大的作用。 最后就是根据绘图上下文生成最终的图像,这一过程主要依赖2D和3D 图形库。
结束语:上面大概介绍一些浏览器 webkit 核心的部件的概述,以及它们合作 工作的过程。在后面对浏览器中主要的这些核心部件进行更加详细的分析。使大家更加深入的了解 浏览器。这可能帮助在优化代码可以更多方面的考虑。