Skip to content
On this page

浏览器是什么?

这是一个浏览器解构的文章。

浏览器近代史

1990年,万维网之父tem Burners-Lee开发出第一个浏览器,Word Wide Web。

在world wide web浏览器开发完成后,1992年Mark Andresssen在NCSA(国家超级电脑应用中心)工作,他带领团队研究出了mosaic浏览器,后续万维网火热起来,因为mosaic浏览器添加了图形接口。

当时Andresssen还未毕业,后续创建了mosaic通讯公司,由于与NCSA存在浏览器的版权冲突,所以将公司改名为Netscape,也就是在互联网历史上留下浓墨重彩的网景公司。后来写出了网景浏览器,并逐渐成为最流行的浏览器。

95年的时候,微软在mosaic浏览器的基础上研发了IE1.0浏览器,和网景进行竞争,后来微软将浏览器和windows捆绑销售,这也是后来我们需要兼容多浏览器的开端。不过ie是最早支持css的浏览器,由于windows操作系统一家独大,ie的市场占有率也一度达到90%以上,这段历史可以算是第一次浏览器大战,结果是ie彻底将网景送入坟墓。

网景虽然落幕了,但其成员在98年成立了mozilla基金会,并将其在97年开发的gecko浏览器的渲染引擎开源。

同年苹果参与了KDE开发社区,开发了一个叫khtml的渲染引擎项目,开发了三年,由于后续产生分歧,就创建了自己的web kit引擎。

时间来到2002年,mozilla创建了一个基于gecko引擎的浏览器项目,这个项目叫Phoenix,有想要浴火重生的意思,后来名字定为Firefox。

2003年苹果发布Safari浏览器。

2004年FireFox正式发布,同期Linux市场开始预装FireFox,有种卷土重来的感觉。08年之前火狐的市场占有率最高到30%。

2005年苹果开源了webkit。

2008年谷歌发布了以webkit为引擎的chromium,同时发布Chrome,并且与safari不同的是他们的脚本引擎改成了自研的v8引擎,这里的webkit是渲染引擎用于渲染页面,v8是js引擎用于解析并执行脚本。v8后来也被用于node和electron。 这里的chromium开源理解为开源的浏览器软件,Chrome是chromium+谷歌服务的一个商业浏览器软件。

2010年苹果发布webkit2。

2013年谷歌宣布发起webkit2,改为使用自己的blink渲染引擎。主要因为chromium的多进程模式和webkit2浏览器并不同,由于架构差异最终撂挑子不干了。

因为chrome基于多进程模式,还有v8的高效快速,很快占据了大部分市场。而gecko是浏览器基于mpl2.0开源协议,需要公开其源码,chromium基于bsd开源协议,不用公开源代码。不过开发浏览器是非常复杂,可以比肩操作系统的复杂度。

chrome的崛起也说明了ie的衰败,后来ie放弃本身的架构,重组之后开发了edgehtml引擎,并在2015年发布edge浏览器。不过后来反响并不强烈,所以微软也放弃了edgehtml引擎的开发,直接选用了chromium的内核进行开发。

万维网和互联网有啥区别?

互联网就是Internet,是一个基于TCP IP协议族的计算机网络,协议就是保证双方计算机都能识别的一种约定的数据格式。而万维网由伯纳斯李老哥发明的一个基于互联网访问的由超链接和统一资源标志符(连接)的文件和其他资源的全球集合,也就是word wide web 3W,亦称web。

比如web浏览器就是指万维网浏览器,但注意这个word wide web并不是指万维网,撞名字了。

万维网的组成

万维网由三部分组成,第一部分就是全球网络资源唯一认知的系统就是统一资源标识符,第二部分就是超文本标记语言,就是html,第三部分是超文本传输协议,也就是传输hyml的一个协议,就是http。

超文本是啥

超文本就是含有指向其他资源链接的文本,当我们写的内容指向一个视频或者另外一个链接,那么这个文本本身就不是单纯的文本,所以称之为超文本。

html

一些标签组成的内容,这些标签会被浏览器识别并渲染,如果我们想要表示一个图片或者视频,就需要指明它的位置,这个位置就是URI,uniform resource identifier,统一资源标志符,是一个字符串,用来表示抽象或物理的资源。

除了uri,还有url,uniform resource locator,统一资源定位符。

uri是一种语义上的抽象概念,而url是uri的一种具体的形式。比如网址就是互联网中网页资源的url,我们可以通过http协议来寻找某个网站的资源。

进程

process,进程,是程序运行实例,当我们启动一个程序,操作系统会创建一块内存,用于运行代码和计算数据,并且创建一个线程来处理任务,这样的环境就是进程。

线程?

线程是进程的执行任务,或者也可以叫做控制单元,复杂当前进程中程序的执行。一个进程至少有一个线程,一个进程也可以运行多个线程,多个线程之间共享数据。

他们有这些特点

  • 进程中,一个线程崩溃,整个进程崩溃。
  • 同一个进程中的线程数据共享。
  • 进程关闭后内存会回收。
  • 不同进程间的内容相互隔离,若想要访问,进程通信需要依靠IPC。

在chrome出现之前,绝大多数浏览器都是单进程的,单进程的所有功能模块都会在同一进程中运行,比如网络线程,插件线程,渲染线程,页面线程。这样就会存在不稳定,易卡顿,内存泄漏,插件安全问题等缺点。

而chrome采用多进程架构,它就是每个页面有单独的渲染进程和插件进程,并且将每个页面的渲染和插件进程都放到沙县内,让他们无法获取到系统权限。有关权限问题同一交给浏览器主进程来操作,不同进程之间可以通过ipc通信。

chrome如今的几大进程:浏览器主进程,渲染进程,插件进程,网络进程和gpu进程。 浏览器进程主要负责页面展示,用户交互,管理子进程和提供存储功能。 网络进程组要负责下载网络资源。 gpu进程主要负责绘制网页和ui界面。 渲染进程,包括js的v8引擎和排版引擎blink,主要功能是将html css和js转化为网页。 插件进程负责加载和运行页面上的插件。

网络协议补充

若你很熟悉网络协议可以不看。

ip协议

internet protocol,互联网协议,他是一个网络层协议,两台设备相互传输数据需要遵守互联网协议,我们知道的互联网就是基于ip协议的一个架构体系,想要进行数据传输,每个主机都需要特定的ip地址。

我们知道ip协议的ip通常不好记,所以我们用域名来替代ip,比如说我们只需要知道摸鱼排的网址就能找到猫猫在哪儿,这个过程就是域名的实际使用。

而这其中用到了DNS域名系统。DNS就是domain name system,中文名域名系统,当我们发送请求时,会通过各种域名服务器,来寻找到我们想要的ip地址。

找到具体服务器ip后,如何指定访问程序呢?

这里我们会用到udp和tcp协议。

UDP协议

user datagram protocol,用户数据包协议。我们可以通过该协议,通过端口号来访问指定的程序。但是udp发送数据时,不能保证接收端一定收到数据。

TCP协议

transmission control protocol,中文叫传输控制协议。和udp一样是一个传输系统协议,但不同的是它更可靠,对于数据包的缺失,它提供重传机制。

另外tcp协议是面向连接的,传输完成后会和目标进行断开连接,创建和断开的过程就是著名的三次握手和四次挥手。

数据传输格式

我们有了协议用于传输数据,而数据本身也是需要规定格式的,这样方便浏览器对数据进行解析。

所以这里规定了http协议,也就是超文本传输协议。

http请求流程

1.连接阶段

我们可以通过url请求服务器,让它返回文件,在正是请求开始之前浏览器会找有没有缓存,若有缓存就不发送请求。这样可以缓解服务器压力。

没有缓存就用过http协议做应用层协议,通过tcpip协议发送请求数据。

发送之前会让dns通过域名查找ip地址,查到后进行缓存。若没加端口号,则浏览器会默认是80端口。

握手之后,我们会接受到服务器返回的数据。

2.请求阶段

浏览器在发送请求时候,会让浏览器主进程通过进程通信,将url发送给网络进程,然后浏览器标签也的图标开始转圈,当网络进程收到服务器返回的http响应头时,就会让浏览器开启一个渲染进程,并给他发送一个提交文档的命令,同时网络进程传递文档信息,也就是http的响应体给渲染进程。传递完毕后,渲染器会给浏览器进程发送一个接受完毕的命令。当前页面就会发送改变。

接下来渲染进程联合cpu进程开始渲染,最后返回网页图给浏览器主进程。

渲染解析

网络进程一般会查询本地是否有缓存资源,有就用缓存,没有进入网络流程,第一步就是dns解析,解析完成之后进行连接,浏览器会构建请求头和请求体,向服务器发送请求命令,接收后会返回对应数据交给网络进程。

(未完待续)