浏览器是如何运作【前端必备】

浏览器是如何运作的

1、进程与线程
2、浏览器结构
- 2.1用户界面
- 2.2多进程浏览器结构

浏览器是如何运作的？
浏览器是运行在操作系统上的一个应用程序。
每个应用程序必须至少启动一个进程来执行其功能。每个程序往往需要运行很多任务，进程就会创建一些线程来帮助它去执行这些小的任务。

1、进程与线程

当我们启动某个程序时，就会创建一个进程来执行任务代码，同时会为该进程分配内存空间，该应用程序的状态都保存在该内存空间里。当应用关闭时，该内存空间就会被回收。
由于每个进程分配的内存空间是独立的，如果两个进程间需要传递某些数据，则需要通过进程间通信管道IPC来传递。
很多应用程序都是多进程的结构，这样是为了避免某一个进程卡死。由于进程间相互独立，这样不会影响到整个应用程序。
进程可以将任务分成更多细小的任务，然后通过创建多个线程并行执行不同的任务，同一进程下的线程之间是可以直接通信共享数据的。

2、浏览器结构

2.1用户界面

浏览器引擎：用于在用户界面和渲染引擎之间传递数据
渲染引擎（浏览器内核）：负责渲染用户请求的页面内容。（IE使用Trident、Firefox使用Gecko、Safari使用Webkit、Chrome/Opera/Edge使用Blink）
渲染引擎下还有很多小的功能模块，比如负责网络请求的网络模块，用于解析和执行js的js解释器，UI后端还有数据存储持久层（帮助浏览器存储各种数据，比如cookie等等）

2.2多进程浏览器结构

浏览器进程:控制除标签页外的用户界面，包括地址，书签，后退，前进按钮等，以及负责与浏览器其他进程负责协调工作
缓存进程
网络进程：负责发起接受网络请求
渲染器进程：用来控制显示Tab标签内的所有内容。浏览器在默认情况下会为每个标签页都创建一个渲染器进程
GPU进程：负责整个浏览器界面的渲染
插件进程：负责控制网站所有的插件
在浏览器地址栏里输入内容时，浏览器内部会发生什么事情？（以Chrome为例）
在浏览器地址栏里输入地址时，浏览器进程的UI线程会捕捉你的输入内容，如果访问的是网址，则UI线程会启动一个网络线程来请求DNS进行域名解析，接着开始连接服务器获取数据；如果你的输入不是网址，而是一段关键词，浏览器就知道你是要搜索，于是就会使用默认配置的搜素引擎来查询。

网络线程获取到数据之后会发生什么样的事情？

当网络线程获取到数据后，会通过SafeBrowsing来检查站点是否是恶意站点，如果是，则会提示个警告页面，告诉你这个站点有安全问题，浏览器会阻止你的访问，当然也可以强行继续访问。

SafeBrowsing是谷歌内部的一套站点安全系统，通过检测该站点的数据来判断是否安全，比如通过查看该站点的IP是否在谷歌的黑名单之内。

当返回数据准备完毕并且安全校验通过时，网络线程就会通知UI线程，然后UI线程会创建一个渲染器进程来渲染页面。浏览器进程通过IPC管道将数据传递给渲染器进程，正式进入渲染流程。渲染器进程接到的数据是HTML，渲染器进程的核心任务就是把html、css、js、image等资源渲染成用户可以交互的web页面。

渲染器进程的主线程将html进行解析，构造DOM数据结构，DOM也就是文档对象模型，是浏览器对页面在其内部的表示形式，是web开发程序员可以通过JS与之交互的数据结构和API。

html首先经过tokeniser标记化，通过词法分析将输入的html内容解析成多个标记，根据识别后的标记进行DOM树构造，在DOM树构造过程中会创建document对象，然后以document的为根节点的DOM树不断进行修改，向其中添加各种元素。
html代码中往往会引入一些额外的资源，比如图片、css、js脚本等。图片和css这些资源需要通过网络下载或者从缓存中直接加载，这些资源不会阻塞html的解析，因为它们不会影响DOM的生成，但当HTML解析过程中遇到script标签，就会停止html解析流程，转而去加载解析并且执行JS（因为浏览器并不知道JS执行是否会改变当前页面的HTML结构，如果JS代码里用了document.write方法来修改html，那之前的HTML解析就没有任何意义了）

在html解析完成后，就会获得一个DOM Tree。主线程需要解析CSS，并确定每个DOM节点的计算样式（没有自定义样式，浏览器也有自己的默认样式）。主线程通过遍历DOM和计算好的样式来生成Layout Tree。Layout Tree上的每个节点都记录了x、y坐标和边框尺寸。

DOM Tree和Layout Tree并不是一一对应的，设置了display：none的节点不会出现在Layout Tree上，而在before伪类中添加了content值的元素，content里的内容会出现在Layout Tree上，不会出现在DOM树里，这是因为DOM是通过HTML解析获取，并不关心样式，而Layout Tree是根据DOM和计算好的样式来生成。Layout Tree是和最后展示在屏幕上的节点对应的。

为了保证在屏幕上展示正确的层级，主线程遍历Layout Tree创建一个绘制记录表（Paint Record），该表记录了绘制的顺序，这个阶段被称为绘制（paint）。知道了文档的绘制顺序后，该把这些信息转化成像素点显示在屏幕上，这种行为被称为栅格（Rastering）。

现在的Chrome使用一种复杂的栅格化流程，叫做合成，合成是一种将页面的各个部分分成多个图层，分别对其进行栅格化，并在合成器线程（Compositor Thread）中单独进行合成页面的技术。简单来说，就是页面所有的元素按照某种规则进行分图层，并把图层都栅格化好了，然后只需要把可视区的内容组合成一帧，展示给用户即可。

主线程遍历Layout Tree,生成Layer（图层） Tree，当Layer Tree生成完毕和绘制顺序确定后，主线程将这些信息传递给合成器线程，合成器线程将每个图层栅格化。由于一层可能像页面的整个长度一样大，因此合成器线程将他们切分为许多图块（tiles），然后将每个图块发送给栅格化线程（Raster Thread），栅格线程栅格化每个图块，并将它们存储在GPU内存中。

当图块栅格化完成后，合成器线程将收集称为“draw quads”的图块信息，这些信息记录了图块在内存中的位置和在页面哪个位置绘制图块的信息。根据这些信息合成器线程生成了一个合成器帧(Compositor Frame），然后合成器帧通过IPC传送给浏览器进程，接着浏览器进程将合成器帧传送到GPU，然后GPU渲染展示到屏幕上。
当页面发生变化，比如滚动页面，都会生成一个新的合成器帧，新的帧再传给GPU，然后再次渲染到屏幕上。

简述：

浏览器进程中的网络线程请求获取到html数据后，通过IPC将数据传给渲染器进程的主线程。
主线程将html解析构造DOM树，然后进行样式计算。根据DOM树和生成好的样式生成Layout Tree。
通过遍历Layout Tree生成绘制顺序表，接着遍历了Layout Tree生成了Layer Tree。
主线程将Layer Tree和绘制顺序信息一起传给合成器线程。
合成器线程按规则进行分图层，并把图层分为更小的图块传给栅格化线程进行栅格化。
栅格化完成后，合成器线程会获得栅格线程传过来的“draw quads”图块信息。
根据这些信息，合成器线程合成了一个合成器帧，然后将该合成器帧通过IPC传回给浏览器进程，浏览器进程再传到GPU进行渲染，之后就展示到你的屏幕上了。