浏览器与网页渲染

一、浏览器是什么？

从用户的角度来讲，浏览器是网络用户用来与互联网交互的软件，用来呈现存放在互联网或者局域网上的包含文字、图像、多媒体以及其他内容的网页文件，并且为用户提供与互联网交互的操作。
从开发人员的角度来讲，浏览器是用来向web服务器发出数据请求、接收web服务器发送回来的网页数据、解析网页原始数据并渲染网页、最后将渲染出来的网页呈现给用户的一个软件。

二、浏览器的主要组件

（1） User Interface（用户界面）：包含地址栏、显示窗口、前进/后退按钮、刷新/暂停按钮、主页按钮、书签选项等元素。其中地址栏是给用户输入和显示URL的输入栏，浏览器会根据用户输入的URL请求对应的资源；显示窗口用来呈现渲染完成之后的网页。

（2） Browser engine（浏览器引擎）：即浏览器的主线程，主要负责页面管理、将渲染得到的内存中的Bitmap（位图）绘制到显示窗口上、与用户交互（如前进与后退等）、网络资源的下载与管理等。

（3） Rendering engine（渲染引擎）：即浏览器的内核，主要负责解析HTML文件和CSS文件，是浏览器的组件中最重要的部分。

（4） Networking（网络）：负责完成网络调用，例如建立TCP/IP连接、完成HTTP或者HTTPS请求等。

（5） UI Backend（用户界面后端）：用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。

（6） JavaScript Interpreter（JavaScript解释器，也叫做JS引擎）：负责解释和执行JavaScript代码

（7） Data Persistence（数据存储）：负责在硬盘上存储数据，属于持久层，浏览器需要在硬盘中存储各种数据，例如cookie等。随着HTML5的发布，浏览器根据HTML5规范增加了Web SQL Database（本地数据库），这是一个可以在浏览器端运行的轻量级数据库，该数据库通过JavaScript脚本对数据库进行操作。

三、浏览器请求过程

浏览器的一次完整的请求流程，是从用户输入URL（统一资源定位符）开始，直到最后在显示窗口显示整个网页为止，具体来讲需要进行以下流程：

① 读取用户输入的URL，对URL中的主机域名进行DNS（域名系统协议）查询，获得域名所对应的IP地址。

② 发起TCP的三次握手，如果传输协议为HTTPS，则还需要在TCP三次握手完成之后进行TLS四次握手，若所有握手正常，则进行下一步，否则停止建立连接。

③ 建立TCP连接后发起HTTP/HTTPS请求。

④ 服务器相应请求，发送html文件到浏览器。

⑤ 浏览器解析html文件里面的代码，同时请求html代码中的资源，例如图片、CSS文件和JS代码文件等。

⑥ 浏览器对页面进行渲染，并将渲染结果呈现在浏览器上。

四、浏览器内核

浏览器的内核主要由两部分组成：渲染引擎和JS引擎。

4.1 JS引擎

JS引擎是负责解释和执行JS代码的一个解释器，一般由浏览器开发的厂商设计编写，因此不同的浏览器所用的JS引擎也不一样，常见的浏览器所用的JS引擎如下：

公司	浏览器	JS引擎
Microsoft	IE6-8	JScritp(IE3-IE8)/Chakra(IE9+)
Microsoft	Edge	Chakra
Mozilla	Firefox	JagerMonkey
Google	Chrome	V8
Apple	Safari	Squirrel Extreme
Opera	Opera	Carakan

由于如今JS引擎越来越独立，因此狭义上的内核就只指代渲染引擎。

4.2 渲染引擎

渲染引擎一般是由各大浏览器厂商根据W3C标准研发的，是浏览器的核心，也是浏览器中最重要的组成部分。目前市场上主流的渲染引擎主要有以下5个：

• Trident：俗称IE内核，也被叫做MSHTML引擎，由微软开发，从IE4到现在一直在使用。由于Trident提供了开放的接口，因此也被很多国产浏览器拿去使用。
• Gecko：俗称Firefox内核，由Mozilla组织开发。由于Gecko完全开放源代码，每个程序员都可以为其编写代码，增加功能，受到了很多人的青睐。
• Webkit：俗称Safari内核，由苹果公司开发，广泛应用在移动端。
• Blink：由Google和Opera Software开发的渲染引擎，这个渲染引擎是Webkit中WebCore组件的一个分支。目前很多移动app内嵌的浏览器内核也在使用Blink。
• Presto：Opera浏览器的前内核，在Opera12.17之后，Opera公司便放弃了Presto转而使用了Blink。

由于渲染引擎开发难度极大，目前国内并没有自主研发的浏览器内核，因此国产浏览器一般都是套用现有的内核，或者在现有内核的基础上做一点修改。

由于某些特殊网页有指定渲染引擎，例如很多网上银行出于安全性考虑，只支持Trident，但是Trident的渲染速度却一直饱受诟病，因此浏览器厂商为了兼顾特殊情况和速度而设计出了双内核浏览器，例如搜狗浏览器和QQ浏览器等，普遍采取Trident + Chromium(Blink渲染引擎和V8 JS引擎整合的统称)双内核。早期的双核浏览器需要用户手动切换内核，如今的双核浏览器在浏览普通网页的时候以追求速度为主而使用速度更快的Chromium，只有在只支持Trident的页面才使用Trident。

五、渲染引擎的工作流程

浏览器渲染引擎最重要的工作就是将HTML文档和CSS文档解析组合并绘制到浏览器窗口上。简单来讲，渲染引擎包括了四个模块：Loader、Parser、Layout和Paint。Loader模块负责请求资源；Parser模块负责解析HTML、CSS和JavaScript；Layout模块包含创建渲染树和计算布局两部分；Paint模块负责将渲染树映射成可视的图形。
虽然每个渲染引擎的工作流程都差不多，但是其核心流程在细节上却会有一些不同，以Webkit内核为例，其核心流程如下图所示：

HTML Parser的任务就是将HTML文件的标签元素解析成多个DOM元素对象节点，并将这些节点根据父子关系组织成一个树状结构（DOM Tree）。
CSS Parser的任务就是将CSS文件解析成CSS规则（CSS Rules，实际上也是个树状结构），然后将每条CSS规则按照从右向左的方式在DOM树上逆向匹配，同时计算布局，生成一棵具有样式规则描述和布局信息的渲染树（Render Tree）。
最后Painting模块会遍历渲染树，调用渲染树上的每个节点的绘制方法，将其内容显示在位图上，最后呈现在浏览器上。

由于布局计算和绘制非常耗时间，为了更好的用户体验，渲染引擎会尽可能早的将内容显示在浏览器窗口上，而不是等到所有HTML都解析完成后才去构建和布局渲染树，在渲染的同时可能还需要通过网络下载剩余的未下载的内容。

六、不同浏览器的最大允许并发数

在解析HTML文件的时候，解析出来的需要下载的内容往往不止一个，浏览器为了提高加载速度，不可能等待一个内容下载完再下载下一个，因此往往会开启多个并发连接，充分利用电脑带宽。由于不同浏览器采用的内核一般不同，因此不同浏览器在一个网页上所允许的最大并发连接数也不尽相同，以下是几个主流的浏览器在宽带连接下，不同的协议版本所允许的最大并发连接数：

浏览器	内核	HTTP1.0	HTTP1.1
IE9	Trident	4	2
Edge	EdgeHTML	4	2
Firefox74	Gecko	6	6
Chrome68	Blink	6	6
Safari	Webkit	4	4
Opera	Blink	10	10

这里并不是说浏览器在每个页面都一直保持着连接数的上线，浏览器会根据实际情况开启适合的连接数量去下载内容。虽然实际上浏览器的最大并发连接数是可以修改的，但是鉴于实际上很少人会去修改这个数值，并且浏览器并不是打开每一个网页所启动的连接数量都会触及上限，因此直接采取默认数值也是由一定的参考意义。

七、如有错误，欢迎评论指出