浏览器构架
在讲浏览器构架之前，先理解两个概念，进程和线程。
进程（process）是程序的一次执行过程，是一个动态概念，是程序在执行过程中分配和管理资源的基本单位，线程（thread）是CPU调度和分派的基本单位，它可与同属一个进程的其他的线程共享进程所拥有的全部资源。
简单的说呢，进程可以理解成正在执行的应用程序，而线程呢，可以理解成我们应用程序中的代码的执行器。而她们的关系可想而知，线程是跑在进程上面的，一个进程上面可能有一个或则多个线程，而一个线程，只能隶属于一个进程。
大家都晓得，浏览器属于一个应用程序，而应用程序的一次执行，可以理解为计算机启动了一个进程，进程启动后，CPU会给该进程分配相应的显存空间，当我们的进程得到了显存以后，就可以使用线程进行资源调度，进而完成我们应用程序的功能。
而在应用程序中，为了满足功能的须要，启动的进程会创建另外的新的进程来处理其他任务，这些创建下来的新的进程拥有全新的独立的显存空间，不能与原先的进程外向显存，如果这种进程之间须要通讯，可以通过IPC机制（Inter Process Communication）来进行。
#3:b:7:3:5:a:5:b:1:b:b:1:d:5:4:9:5:1:6:3:1:c:0:9:7:0:e:e:1:2:4:c#
很多应用程序就会采取此类多进程的方法来工作，因为进程和进程之间是相互独立的它们互不影响，也就是说，当其中一个进程死掉了以后，不会影响到其他进程的执行，只须要重启死掉的进程就可以恢复运行。
浏览器的多进程构架
假如我们去开发一个浏览器，它的构架可以是一个单进程多线程的应用程序，也可以是一个使用IPC通讯的多进程应用程序。
不同的浏览器使用不同的构架，下面主要以Chrome为例，介绍浏览器的多进程构架。
在Chrome中，主要的进程有4个：
#9:f:4:0:2:8:6:e:2:7:9:6:0:2:2:1:9:e:d:1:2:a:a:6:e:6:e:1:5:6:4:e#
这4个进程之间的关系是哪些呢？
首先，当我们是要浏览一个网页，我们会在浏览器的地址栏里输入URL，这个时侯Browser Process会向这个URL发送恳求，获取这个URL的HTML内容，然后将HTML交给Renderer Process，Renderer Process解析HTML内容，解析遇见须要恳求网路的资源又返回来交给Browser Process进行加载，同时通知Browser Process，需要Plugin Process加载插件资源，执行插件代码。解析完成后，Renderer Process估算得到图像帧，并将这种图像帧交给GPU Process，GPU Process将其转化为图象显示屏幕。
#a:d:9:6:6:d:5:8:6:7:0:7:a:9:1:c:1:0:2:a:8:1:7:4:9:3:9:1:b:2:0:3#
多进程构架的益处
Chrome为何要使用多进程构架呢？
第一，更高的容错性。当今WEB应用中，HTML，JavaScript和CSS日渐复杂，这些跑在渲染引擎的代码，频繁的出现BUG，而有些BUG会直接造成渲染引擎崩溃，多进程构架促使每一个渲染引擎运行在各自的进程中，相互之间不受影响，也就是说，当其中一个页面崩溃死掉以后，其他页面还可以正常的运行不收影响。
#d:e:3:8:4:1:8:4:c:4:1:3:f:5:7:2:1:4:f:7:a:b:8:1:5:d:a:4:4:7:5:f#
第二，更高的安全性和沙盒性（sanboxing）。渲染引擎会经常性的在网路上遇见不可信、甚至是恶意的代码，它们会借助那些漏洞在你的笔记本上安装恶意的软件，针对这一问题，浏览器对不同进程限制了不同的权限，并为其提供沙盒运行环境，使其更安全更可靠
第三，更高的响应速率。在单进程的构架中，各个任务互相竞争抢劫CPU资源，使得浏览器响应速率变慢，而多进程构架刚好规避了这一缺点。
多进程构架优化
之前的我们说到，Renderer Process的作用是负责一个Tab内的显示相关的工作，这就意味着，一个Tab，就会有一个Renderer Process，这些进程之间的显存难以进行共享，而不同进程的显存往往须要包含相同的内容。
浏览器的进程模式
为了节约显存，Chrome提供了四种进程模式（Process Models），不同的进程模式会对 tab 进程做不同的处理。
这里须要给出 site 和 site-instance 的定义
理解了概念以后，下面解释四个进程模式
首先是Single process，顾名思义，单进程模式，所有tab就会使用同一个进程。接下来是Process-per-tab，也是顾名思义，每打开一个tab，会新建一个进程。而对于Process-per-site，当你打开 a.baidu.com 页面，在打开 b.baidu.com 的页面，这两个页面的tab使用的是共一个进程，因为这两个页面的site相同，而这么一来，如果其中一个tab崩溃了，而另一个tab也会崩溃。
Process-per-site-instance是最重要的，因为这个是 Chrome 默认使用的模式，也就是几乎所有的用户都在用的模式。当你打开一个 tab 访问 a.baidu.com ，然后再打开一个 tab 访问 b.baidu.com，这两个 tab 会使用两个进程。而假如你在 a.baidu.com 中，通过JS代码打开了 b.baidu.com 页面，这两个 tab 会使用同一个进程。
默认模式选择
那么为何浏览器使用Process-per-site-instance作为默认的进程模式呢？
Process-per-site-instance兼容了性能与易用性，是一个比较中庸通用的模式。
导航过程都发生了哪些
前面我们讲了浏览器的多进程构架，讲了多进程构架的各类用处，和Chrome是如何优化多进程构架的，下面从用户浏览网页这一简单的场景，来深入了解进程和线程是怎样呈现我们的网站页面的。
网页加载过程
之前我们我们谈到，tab以外的大部分工作由浏览器进程Browser Process负责，针对工作的不同，Browser Process 划分出不同的工作线程：
#0:1:a:5:c:e:4:7:3:8:6:3:e:4:d:7:a:b:b:5:6:3:4:f:9:4:a:2:1:e:a:b#
第一步：处理输入
当我们在浏览器的地址栏输入内容按下回车时，UI thread会判定输入的内容是搜索关键词（search query）还是URL，如果是搜索关键词，跳转至默认搜索引擎对应都搜索URL，如果输入的内容是URL，则开始恳求URL。
#f:4:e:2:6:8:9:9:9:f:3:2:8:e:2:2:1:c:e:6:e:3:7:4:8:7:f:f:3:5:c:a#
第二步：开始导航
回车按下后，UI thread将关键词搜索对应的URL或输入的URL交给网路线程Network thread，此时UI线程使Tab前的图标展示为加载中状态，然后网路进程进行一系列例如DNS主存，建立TLS联接等操作进行资源恳求，如果收到服务器的301重定向响应，它才会告知UI线程进行重定向之后它会再度发起一个新的网路恳求。
#0:1:5:7:b:5:b:5:7:c:b:8:4:3:a:0:a:7:7:5:2:a:2:0:7:6:7:b:e:c:3:1#
第三步：读取响应
network thread接收到服务器的响应后，开始解析HTTP响应报文，然后按照响应头中的Content-Type数组来确定响应主体的媒体类型（MIME Type），如果媒体类型是一个HTML文件，则将响应数据交给渲染进程（renderer process）来进行下一步的工作，如果是 zip 文件或则其它文件，会把相关数据传输给下载管理器。
与此同时，浏览器会进行 Safe Browsing 安全检查，如果域名或则恳求内容匹配到已知的恶意站点，network thread 会展示一个警告页。除此之外，网络线程都会做 CORB（Cross Origin Read Blocking）检查来确定这些敏感的跨站数据不会被发送至渲染进程。
第四步：查找渲染进程
各种检测完毕之后，network thread 确信浏览器可以导航到恳求网页，network thread 会通知 UI thread 数据早已打算好，UI thread 会查找到一个 renderer process 进行网页的渲染。
#9:8:c:e:6:4:f:0:5:3:0:b:8:b:7:2:4:5:a:7:7:b:1:a:2:a:6:e:6:5:a:e#
浏览器为了对查找渲染进程这一步骤进行优化，考虑到网路恳求获取响应须要时间，所以在第二步开始，浏览器早已预先查找和启动了一个渲染进程，如果中间步骤一切顺利，当 network thread 接收到数据时，渲染进程早已准备好了，但是假如遇见重定向，这个打算好的渲染进程似乎就不可用了，这个时侯会重新启动一个渲染进程。
第五步：提交导航
到了这一步，数据和渲染进程都准备好了，Browser Process会向Renderer Process发送IPC消息来确认导航，此时，浏览器进程将打算好的数据发送给渲染进程，渲染进程接收到数据然后，又发送IPC消息给浏览器进程，告诉浏览器进程导航早已递交了，页面开始加载。
#2:9:b:a:1:0:e:c:f:b:3:5:a:5:d:1:a:9:9:6:6:d:f:9:c:3:1:8:f:f:3:1#
这个时侯导航栏会更新，安全指示符更新（地址后面的小锁），访问历史列表（history tab）更新，即可以通过前进退后来切换该页面。
第六步：初始化加载完成
当导航递交完成后，渲染进程开始加载资源及渲染页面（详细内容下文介绍），当页面渲染完成后（页面及内部的iframe都触发了onload风波），会向浏览器进程发送IPC消息，告知浏览器进程，这个时侯UI thread会停止展示tab中的加载中图标。
网页渲染原理
导航过程完成以后，浏览器进程把数据交给了渲染进程，渲染进程负责tab内的所有事情，核心目的就是将HTML/CSS/JS代码，转化为用户可进行交互的web页面。那么渲染进程是怎样工作的呢？
渲染进程中，包含线程分别是：
#e:0:a:2:6:7:8:3:2:4:b:2:c:e:f:b:2:3:3:0:a:f:3:4:b:2:e:2:6:1:6:f#
不同的线程，有着不同的工作职责。
构建DOM
当渲染进程接受到导航的确认信息后，开始接受来自浏览器进程的数据，这个时侯，主线程会解析数据转化为DOM（Document Object Model）对象。
DOM为WEB开发人员通过JavaScript与网页进行交互的数据结构及API。
子资源加载
在建立DOM的过程中，会解析到图片、CSS、JavaScript脚本等资源，这些资源是须要从网路或则缓存中获取的，主线程在建立DOM过程中若果遇见了这种资源，逐一发起恳求去获取，而为了提高效率，浏览器也会运行预加载扫描（preload scanner）程序，如果HTML中存在img、link等标签，预加载扫描程序会把这种恳求传递给Browser Process的network thread进行资源下载。
#7:5:7:c:a:f:7:1:3:9:b:a:b:d:5:e:8:8:e:5:6:6:5:b:5:1:3:e:f:b:a:9#
JavaScript的下载与执行
构建DOM过程中，如果碰到
