WebKit技术内幕(第一章读书笔记)

279 阅读5分钟

浏览器发展(时间线)

(1) Berners-Lee在80年代后期90年代初期发明了世界上第一个浏览器WorldWideWeb(后改名为Nexus)
特点: 在80年代后期90年代初期发明了世界上第一个浏览器WorldWideWeb(后改名为Nexus) (2) Marc Andreessen带领团队开发浏览器Mosaic(网景(Netscape)浏览器)
(3) 微软推出了IE浏览器,受益于Windows操作系统,获得了空前的成功,逐渐取代了网景浏览器。
(4) 1998年,网景公司开发了火狐浏览器 (5) 2003年,苹果发布了Safari浏览器,发起了一个新的开源项目WebKit
(6) 2008年,Google公司以苹果开源项目WebKit作为内核,创建了一个新的项目Chromium。在Chromium项目的基础上,Google发布了自己的浏览器产品Chrome

浏览器特性

(1)网络: 浏览器通过网络模块来下载各种各样的资源
(2)资源管理: 从网络下载或者本地获取资源,并将它们管理起来,这需要高效的管理机制
(3)网页浏览: 它通过网络下载资源并从资源管理器获得资源,将它们转变为可视化的结果
(4)多页面管理: 使用线程或是进程来绘制网页
(5)插件和扩展
(6)账户和同步:将浏览的相关信息,例如历史记录、书签等信息同步到服务器,给用户一个多系统下的统一体验
(7)安全机制:避免用户信息被各种非法工具窃取和破坏
(8)开发者工具

技术

HTML

(1)HTML5包含了一系列的标准,一共包含了10个大的类别,它们分别是离线(offline)、存储(storage)、连接(connectivity)、文件访问(file access)、语义(semantics)、音频和视频(audio/video)、3D和图形(3D/graphics)、展示(presentation)、性能(performance)和其他(Nuts and bolts)

CSS

HTTP/HTTPS

用户代理和浏览器行为

用户代理(User Agent)是个很奇怪的东西,其作用是表明浏览器的身份,因而互联网的内容供应商能够知道发送请求的浏览器身份,浏览器能够支持什么样的功能
Mozilla/1.0(Windows NT 6.1;rv:2.0.1)Gecko/20100101Firefox/4.0.1”,此字符串表明这是一个Windows版的使用Gecko引擎(火狐浏览器内核)的火狐浏览器
Mozilla/4.0(compatible;MSIE 7.0;Windows NT 6.0)它表明这是一个可以和Mozilla兼容的Windows版IE浏览器
苹果的Safari浏览器也设置了类似的代理,但是该浏览器额外加入了AppleWebKit、Safari等信息

浏览器内核及特性

在浏览器中,有一个最重要的模块,它主要的作用是将页面转变成可视化(准确讲还要加上可听化)的图像结果,这就是浏览器内核。通常,它也被称为渲染引擎。 浏览器的渲染引擎(内核)就是能够将HTML/CSS/JavaScript文本及其相应的资源文件转换成图像结果的模块。

捕获.PNG 目前,主流的渲染引擎包括Trident、Gecko和WebKit,它们分别是IE、火狐和Chrome的内核。

内核特征

捕获.PNG

(1)HTML解释器:解释HTML文本的解释器,主要作用是将HTML文本解释成DOM(文档对象模型)树,DOM是一种文档的表示方法。
(2)CSS解释器:级联样式表的解释器,它的作用是为DOM中的各个元素对象计算出样式信息,从而为计算最后网页的布局提供基础设施。
(3)布局:在DOM创建之后,Webkit需要将其中的元素对象同样式信息结合起来,计算它们的大小位置等布局信息,形成一个能够表示这所有信息的内部表示模型
(4)JavaScript引擎:使用JavaScript代码可以修改网页的内容,也能修改CSS的信息,JavaScript引擎能够解释JavaScript代码并通过DOM接口和CSSOM接口来修改网页内容和样式信息,从而改变渲染的结果。
(5)绘图:使用图形库将布局计算后的各个网页的节点绘制成图像结果。

这些模块是如何一起工作以完成网页的渲染过程

从左上角开始,首先是网页内容,输入到HTML解释器,HTML解释器在解释它后构建成一棵DOM树,这期间如果遇到JavaScript代码则交给JavaScript引擎去处理;如果网页中包含CSS,则交给CSS解释器去解释。当DOM建立的时候,渲染引擎接收来自CSS解释器的样式信息,构建一个新的内部绘图模型。该模型由布局模块计算模型内部各个元素的位置和大小信息,最后由绘图模块完成从该模型到图像的绘制。

捕获.PNG 在渲染完成之后,用户可能需要跟渲染的结果进行交互,或者网页自身有动画操作,一般而言,这需要持续的重复渲染过程。

WebKit内核

历史

(1)1998年,苹果公司参与了由KDE开源社区发起的网页渲染引擎KHTML的开源项目开发. (2)在2001年,苹果宣布从KHTML的源代码树中复制代码出来,成立了一个新的项目webkit (3)2005年,苹果决定将WebKit项目开源

Chromium内核:Blink

2013年4月(又是4月),Google宣布了从WebKit复制出来并独立运作的Blink项目,因为Google希望未来在Blink中加入很多新的技术。