1.常用的Chrome架构Chrome打开一个页面需要启动多少个进程？可以点击Chrome浏览器右上角的“选项”菜单，选择“更多工具”子菜单，点击“任务管理器”查看相关概念并行处理：同时处理多个任务**（多线程，大大提高了性能）线程VS进程：1.线程不能单独存在。它由进程启动和管理。2、当启动一个程序时，操作系统会为程序创建一块内存，用于存放代码和运行数据，以及一个执行任务的主线程，我们称这样的运行环境为进程。线程依附于进程，在一个进程中使用多线程并行处理可以提高计算效率。进程中任何一个线程执行错误都会导致整个进程崩溃。进程中的数据在线程之间共享。当一个进程关闭时，操作系统会回收该进程占用的内存。进程之间的内容是相互隔离的。采用进程间通信（IPC）机制。单进程浏览器是指浏览器的所有功能模块都运行在同一个进程中，这些模块包括网络、插件、JavaScript运行环境、渲染引擎和页面。使用单进程浏览器会带来以下三个原因：不稳定、不流畅、不安全Chrome进程架构（多线程）从图中可以看出，最新的Chrome浏览器包括：1个浏览器（Browser）主进程，1个GPU进程、1个网络（NetWork）进程、多个渲染进程、多个插件进程。下面我们一一分析这些进程的作用。浏览器进程。主要负责界面展示、用户交互、子进程管理，并提供存储等功能。渲染过程。核心任务是将HTML、CSS和JavaScript转换成用户可以与之交互的网页。排版引擎Blink和JavaScript引擎V8都运行在这个过程中。默认情况下，Chrome会为每个Tab标签创建一个渲染进程。出于安全原因，渲染过程以沙盒模式运行。显卡进程。使用GPU的初衷是为了实现3DCSS的效果，但是后来网页和Chrome的UI界面选择使用GPU来绘制。网络过程。主要负责加载页面的网络资源。它曾经作为一个模块运行在浏览器进程中，但直到最近才独立出来，成为一个单独的进程。插件进程。主要负责插件的运行。因为插件很容易崩溃，所以需要通过插件进程进行隔离，保证插件进程的崩溃不会对浏览器和页面造成影响。多线程模型除了提升浏览器的稳定性、流畅性和安全性之外，还带来了：更高的资源占用。（内存消耗）更复杂的架构。（浏览器模块耦合度高，扩展性差）探索未来面向服务的架构2.TCP协议，保证页面文件能够完整的传递给浏览器。在衡量网页的性能时，有一个重要的指标叫做：“FP”指的是从页面加载到开始绘制的时间。影响FP的指标：网络加载速度。HTTPWebSocket基于TCP/IP，TCP/IP是优化网页加载速度的基础。如何保证页面文件能够完整的传递给浏览器呢？从数据包的角度来看，IP负责将数据包传送到目的主机。2、UDP：将数据包递交给应用程序，因为IP是一个很底层的协议，只负责把数据包传递给对方的电脑，而对方的电脑不知道交给哪个程序数据包到，所以需要基于IP。在开发可以处理应用程序的协议上，常见的“用户数据报协议”称为UDP。IP通过IP地址信息将数据包发送到指定的计算机，而UDP通过端口将数据包分发到正确的程序。使用UDP会出现那些问题：1.UDP发送数据时，由于各种因素会出现丢包，而且没有重传机制，数据可靠性无法保证。2、UDP的传输速度非常快，所以UDP会用在一些注重速度但对数据完整性要求不那么严格的领域，比如在线视频，互动游戏等。为了解决UDP容易丢失的问题数据包传输过程，TCP介绍。TCP：它是一种面向连接的、可靠的、基于字节流的传输层通信协议，将数据完整地传递给应用程序。TCP的两个特点：1、针对数据丢包的情况，TCP提供了重传机制；2、TCP引入数据包排序机制，保证乱序的数据包组合成一个完整的文件。一个完整的TCP连接的生命周期包括：1.建立连接2.传输数据3.断开TCP为了保证数据传输的可靠性（大块的数据传输是通过TCP头来保证的），传输速度数据包被牺牲了，因为“三次握手”和“数据包校验机制”使得传输过程中的数据包数量增加了一倍。3.HTTP请求流程，很多网站第二次打开会很快？HTTP协议是建立在TCP连接之上的（HTTP应用层，TCP传输层）。HTTP是一种允许浏览器从服务器获取资源的协议，是Web的基础。为什么很多网站第二次打开速度很快？这都隐藏在HTTP请求中。浏览器发起HTTP请求流程：1.构造请求行信息。构建完成后，浏览器就可以发起网络请求了。2.找到缓存。在实际发起网络请求之前，浏览器首先检查浏览器缓存中是否有请求的文件。其中，浏览器缓存是一种在本地保存一份资源副本，以供下次请求时直接使用的技术。发起网络请求——浏览器缓存保存的副本——拦截请求——返回资源副本——结束请求（不会再次从服务器下载资源）。资源占用时间少）2、对于网站来说，缓存是资源快速加载的重要环节。3、准备IP地址和端口HTTP网络请求的第一步是与服务器建立TCP连接。建立TCP连接的第一步是准备IP地址和端口号（HTTP默认80，HTTPS默认443）。DNS数据缓存服务，解析域名供下次直接使用，减少一次网络请求。4.等待TCP队列。Chrome有一个机制。同一个域名最多只能同时建立6个TCP连接。如果同一个域名下同时有10个请求，那么有4个请求会进入等待状态，直到请求进行中。结束。5、建立TCP连接6、发送HTTP请求（请求行、请求头、请求体（数据））get和post方法服务器端处理浏览器端发送的HTTP请求1、返回请求（成功状态码200,notfoundPage404,responseline,responseheader,responsebody)2.断开连接（服务器返回请求数据给客户端，关闭TCP连接）3.重定向页面会很快再次打开吗？1、DNS缓存2、页面资源缓存DNS缓存：将浏览器的本地IP和域名关联起来。页面资源缓存：响应头Cache-Control字段用于设置是否缓存资源。持续时间由Max-age参数设置。Cache-Control:Max-age=2000如果缓存资源过期，会继续发起请求。很多网站的二次访问可以秒开，因为这些网站在本地缓存了很多资源，浏览器缓存直接使用本地的副本响应请求，不会产生真正的网络请求，从而节省了时间。同时DNS数据也被浏览器缓存起来，省去了DNS查询链接。我如何保持登录状态？4、从输入网址到显示页面是什么体验？整个过程需要各个进程之间的协作：浏览器进程：主要负责用户交互、子进程管理和文件存储等功能。网络进程：为渲染进程和浏览器进程提供网络下载功能。渲染进程：主要职责是将从网络下载的HTML、JavaScript、CSS、图片等资源解析成可以展示和交互的页面。由于渲染进程的所有内容都是通过网络获取的，因此会存在一些利用浏览器漏洞攻击系统的恶意代码，因此运行在渲染进程中的代码是不可信的。这就是为什么Chrome让渲染进程运行在安全沙箱中的原因，只是为了保证系统安全。无论用户输入搜索关键字是什么情况：1.用户输入url并回车2.浏览器进程检查url并组装协议形成完整的url3.浏览器进程将url请求发送到网络通过进程间通信（IPC）进程4.网络进程收到url请求后，检查本地缓存是否缓存了请求的资源，如果有，则将资源返回给浏览器。流程5.如果没有，则网络流程向web服务器发起http请求（网络请求），请求流程如下：5.1进行DNS解析，获取服务器ip地址和端口（http端口默认80，https默认to443)5.2使用ip地址与服务器建立tcp连接5.3构建请求头信息5.4发送请求头信息5.5服务器响应后，网络进程接收响应头和响应信息，解析响应内容6.网络进程解析响应进程；6.1查看状态码，如果是301/302，需要重定向，自动从Location中读取地址，重复步骤4。301资源永久移除，302资源还在。6.2200响应处理：检查响应类型Content-Type，如果是字节流类型，将请求提交给下载管理器，导航流程结束，不再进行后续渲染，如果是html，通知浏览器进程准备渲染器进程已准备好渲染。7、准备渲染进程7.1浏览器进程检查当前url是否与之前打开的渲染进程的根域名相同。如果它们相同，则将重用原始过程。如果它们不同，将启动一个新的渲染过程。8.传输数据和更新状态8.1渲染进程就绪后，浏览器向渲染进程发送“提交文档”消息，渲染进程收到该消息，网络进程建立传输数据的“管道”。8.2渲染进程收到数据后，向浏览器发送“确认提交”消息8.3浏览器进程收到确认消息后，更新浏览器界面状态：安全、地址栏url、前进后退历史状态，并更新网页。9.渲染进程对文档进行页面解析和子资源加载，HTML通过HTM解析器转换为DOMTree（类似二叉树结构的东西），CSS根据CSS规则和CSS解释器转换为CSSOMTREE，并将两棵树组合起来形成rendertree（不包括HTML的具体元素和要绘制的元素的具体位置），可以通过Layout计算出每个元素的具体宽高和颜色位置，组合起来，开始绘制，最后显示在屏幕上。显示新页面。5.渲染过程：HTML、CSS、JavaScript是如何变成页面的？渲染机制过于复杂，所以渲染模块在执行时会被分成很多子阶段。输入HTML经过这些子阶段，最后输出像素。我们称这样的处理流程为渲染管线。从HTML到DOM、样式计算、布局、图层、绘图、光栅化、合成和显示DOM树：渲染过程将HTML内容转换为人类可读的DOM树结构。样式计算：渲染引擎??将CSS样式表转换成浏览器可以理解的styleSheets，计算出DOM节点的样式。布局树：创建布局树，计算元素的布局信息。Hierarchy：对布局树进行层次化，生成层次树。Draw：为每一层生成一个drawlist，提交给compositingthread。栅格化：合成线程将图层划分为瓦片，并在栅格化线程池中将瓦片转换为位图。合成：合成线程将绘制瓦片命令DrawQuad发送到浏览器进程。显示：浏览器进程根据DrawQuad消息生成一个页面，显示在监视器上。重排：如果通过JavaScript或CSS修改元素的几何位置属性，比如改变元素的宽高，浏览器会触发重新布局，解析后的一系列子阶段，这个过程是称为重排。毫无疑问，回流需要更新完整的渲染管线，所以开销也是最大的。重绘：如果修改了元素的背景色，布局阶段不会执行，因为不会引起几何位置的变换，所以直接进入绘制阶段，之后执行一系列的子阶段也就是说，这个过程叫做重绘。与重排操作相比，重绘省去了布局和分层阶段，因此执行效率会比重排操作高。合成：如果你改变一个既不布局也不绘制的属性，会发生什么？渲染引擎会跳过布局和绘制，只进行后续的合成操作。我们称这个过程为合成。减少重排和重绘的方法有很多：使用类操作方式而不是频繁操作方式避免使用表格布局批量dom操作，例如createDocumentFragment，或者使用框架，例如ReactDebouncewindowresizeevent分离will-change以供读取和编写dom属性：转换以进行优化。课程地址
