浏览器⼯作原理和实践（⼀）——浏览器
  《》是极客时间上的⼀个浏览器学习系列，在学习之后特在此做记录和总结。
⼀、Chrome架构
1）线程和进程
  Chrome打开⼀个页⾯会启动4个进程：⽹络进程、GPU进程、浏览器主进程和渲染进程。
  ⼀个进程就是⼀个程序的运⾏实例，启动⼀个程序的时候，操作系统会为该程序创建⼀块内存，⽤来存放代码、运⾏中的数据和⼀个执⾏任务的主线程，这样⼀个运⾏环境叫进程。
  线程是依附于进程的，⽽进程中使⽤多线程并⾏处理能提升运算效率。
  进程和线程之间的关系有以下 4 个特点：
  （1）进程中的任意⼀线程执⾏出错，都会导致整个进程的崩溃。
  （2）线程之间共享进程中的数据。
  （3）当⼀个进程关闭之后，操作系统会回收进程所占⽤的内存。
  （4）进程之间的内容相互隔离。
2）Chrome进程架构
  最新的 Chrome 浏览器包括：1 个浏览器（Browser）主进程、1 个 GPU 进程、1 个⽹络（NetWork）进程、多个渲染进程和多个插件进程，如下图所⽰。
  （1）浏览器主进程：负责界⾯显⽰、⽤户交互、⼦进程管理，同时提供存储等功能。
  （2）渲染进程：核⼼任务是将 HTML、CSS 和 JavaScript 转换为⽤户可以与之交互的⽹页，排版引擎 Blink 和 JavaScript 引擎 V8 都是运⾏在该进程中，默认情况下，Chrome 会为每个 Tab 标签创建⼀个渲染进程。出于安全考虑，渲染进程都是运⾏在沙箱模式下。
  （3）GPU进程：GPU 的使⽤初衷是为了实现 3D CSS 的效果，随后⽹页、Chrome 的 UI 界⾯都选择采⽤ GPU 来绘制，这使得 GPU 成为浏览器普遍的需求。
  （4）⽹络进程：负责页⾯的⽹络资源加载，之前是作为⼀个模块运⾏在浏览器进程⾥⾯的。
  （5）插件进程：负责插件的运⾏，因插件易崩溃，所以需要通过插件进程来隔离，以保证插件进程崩溃不会对浏览器和页⾯造成影响。
⼆、⽹络协议
1）TCP协议
  在衡量 Web 页⾯性能时有⼀个重要的指标FP（First Paint），它是指从页⾯加载到⾸次开始绘制的时长。⽽影响 FP 指标的⼀个重要因素就是⽹络加载速度。
  互联⽹，实际上是⼀套理念和协议组成的体系架构。互联⽹中的数据是通过数据包来传输的。
  （1）IP：把数据包送达⽬的主机。
  （2）UDP：把数据包送达应⽤程序。
  （3）TCP：把数据完整地送达应⽤程序。
2）HTTP协议
chrome浏览器最新版
  HTTP 是⼀种允许浏览器向服务器获取资源的协议，是 Web 的基础。
  浏览器端发起 HTTP 请求流程：
  （1）构建请求，构建好后，浏览器准备发起⽹络请求。
  （2）查缓存，当浏览器发现请求的资源已经在浏览器缓存中存有副本，它会拦截请求，返回该资源的副本，并直接结束请求。
  （3）准备 IP 地址和端⼝，HTTP 的内容是通过 TCP 来传输的，第⼀步就是先建⽴TCP连接，⽽请求 DNS（DNS数据缓存服务）可返回域名对应的 IP。
  （4）等待 TCP 队列，同⼀个域名同时最多只能建⽴ 6 个 TCP 连接，如果同时有 10 个请求发⽣，那
么其中 4 个会进⼊等待状态。
  （5）建⽴ TCP 连接，快乐地和服务器握⼿。
  （6）发送 HTTP 请求，和服务器进⾏通信，向服务器发送请求⾏，包括请求⽅法、请求 URI（Uniform Resource Identifier）和 HTTP 版本协议。
  服务器端处理 HTTP 请求流程：
  （1）返回请求，⼀旦服务器处理结束，便可以返回响应⾏，包括协议版本和状态码。
  （2）断开连接，但浏览器或者服务器在其头信息中加⼊了：Connection:Keep-Alive，那么 TCP 连接在发送后将仍然保持打开状态。
  （3）重定向，当两个 URL 不⼀样时，会涉及⼀个重定向操作。
  为什么很多站点第⼆次打开速度会很快？因为 DNS 缓存和页⾯资源缓存这两块数据是会被浏览器缓存的。
  登录状态是如何保持的？浏览器页⾯状态是通过使⽤ Cookie 来实现的。如果服务器端发送的响应头内有 Set-Cookie 的字段，那么浏览器就会将该字段的内容保存到本地。
  下⾯是张详细的“HTTP 请求⽰意图”，⽤来展现浏览器中的 HTTP 请求所经历的各个阶段。
  浏览器中的 HTTP 请求从发起到结束⼀共经历了⼋个阶段：构建请求、查缓存、准备 IP 和端⼝、等待 TCP 队列、建⽴ TCP 连接、发起 HTTP 请求、服务器处理请求、服务器返回请求和断开连接。
三、导航流程
  在浏览器⾥，从输⼊ URL 到页⾯展⽰，这中间发⽣了什么？其中涉及到了⽹络、操作系统、Web 等⼀系列的知识，如下图所⽰。
  整个流程⼤致描述如下：
  （1）⾸先，浏览器进程接收到⽤户输⼊的 URL 请求，浏览器进程便将该 URL 转发给⽹络进程。
  （2）然后，在⽹络进程中发起真正的 URL 请求。
  （3）接着，⽹络进程接收到了响应头数据，便解析响应头数据，并将数据转发给浏览器进程。
  （4）浏览器进程接收到⽹络进程的响应头数据之后，发送“提交导航 (Commit Navigation)”消息到渲染进程；
  （5）渲染进程接收到“提交导航”的消息之后，便开始准备接收 HTML 数据，接收数据的⽅式是直接和⽹络进程建⽴数据管道；
  （6）最后，渲染进程会向浏览器进程“确认提交”，这是告诉浏览器进程：“已经准备好接受和解析页⾯数据了”。
  （7）浏览器进程接收到渲染进程“提交⽂档”的消息之后，便开始移除之前旧的⽂档，然后更新浏览器进程中的页⾯状态。
  这其中，⽤户发出 URL 请求到页⾯开始解析的这个过程，就叫做导航。
1）⽤户输⼊
  当⽤户在地址栏中输⼊⼀个查询关键字时，地址栏会判断输⼊的关键字是搜索内容，还是请求的 URL。
  当⽤户输⼊关键字并键⼊回车之后，这意味着当前页⾯即将要被替换成新的页⾯，不过在这个流程继续之前，浏览器还给了当前页⾯⼀次执⾏ beforeunload 事件的机会。
  beforeunload 事件允许页⾯在退出之前执⾏⼀些数据清理操作，还可以询问⽤户是否要离开当前页⾯，⽐如当前页⾯可能有未提交完成的表单等情况，因此⽤户可以通过 beforeunload 事件来取消导航，让浏览器不再执⾏任何后续⼯作。
2）URL 请求过程
  浏览器进程会通过进程间通信（IPC）把 URL 请求发送⾄⽹络进程，⽹络进程接收到 URL 请求后，会在这⾥发起真正的 URL 请求流程（参考上⾯的HTTP请求流程）。
3）准备渲染进程
  Chrome 会为每个页⾯分配⼀个渲染进程，也就是说，每打开⼀个新页⾯就会配套创建⼀个新的渲染进程。
  但如果属于同⼀站点，即根域名（例如）和协议（例如 或者 ）都相同，那么新页⾯会复⽤⽗页⾯的渲染进程。官⽅把这个默认策略叫 process-per-site-instance。
4）提交⽂档
  提交⽂档，就是指浏览器进程将⽹络进程接收到的 HTML 数据提交给渲染进程，具体流程是这样的：
  （1）⾸先当浏览器进程接收到⽹络进程的响应头数据之后，便向渲染进程发起“提交⽂档”的消息；
  （2）渲染进程接收到“提交⽂档”的消息后，会和⽹络进程建⽴传输数据的“管道”；
  （3）等⽂档数据传输完成之后，渲染进程会返回“确认提交”的消息给浏览器进程；
  （4）浏览器进程在收到“确认提交”的消息后，会更新浏览器界⾯状态，包括了安全状态、地址栏的 URL、前进后退的历史状态，并更新 Web 页⾯。
5）渲染阶段
  ⼀旦⽂档被提交，渲染进程便开始页⾯解析和⼦资源加载。
  ⼀旦页⾯⽣成完成，渲染进程会发送⼀个消息给浏览器进程，浏览器接收到消息后，会停⽌标签图标上的加载动画。
四、渲染流程
  HTML 的内容是由标记和⽂本组成。标记也称为标签，每个标签都有它⾃⼰的语义，浏览器会根据标签的语义来正确展⽰ HTML 内容。
  如果需要改变 HTML 的字体颜⾊、⼤⼩等信息，就需要⽤到 CSS。CSS ⼜称为层叠样式表，是由选择器和属性组成。
  ⾄于 JavaScript（简称为 JS），使⽤它可以使⽹页的内容“动”起来。
  由于渲染机制过于复杂，所以渲染模块在执⾏过程中会被划分为很多⼦阶段，输⼊的 HTML 经过这些⼦阶段，最后输出像素，这样的⼀个处理流程叫做渲染流⽔线。
  按照渲染的时间顺序，流⽔线可分为如下⼏个⼦阶段：构建 DOM 树、样式计算、布局阶段、分层、绘制、分块、光栅化和合成。
1）构建 DOM 树
  浏览器⽆法直接理解和使⽤ HTML，所以需要将 HTML 转换为浏览器能够理解的结构——DOM 树，如下所⽰。
2）样式计算
  样式计算（Recalculate Style）地⽬的是为了计算出 DOM 节点中每个元素的具体样式，这个阶段⼤体可分为三步来完成。
  （1）把 CSS 转换为浏览器能够理解的结构——styleSheets。
  （2）转换样式表中的属性值，使其标准化，如 2em、blue、bold，需要将它们转换为渲染引擎容易理解的、标准化的计算值。
  （3）计算出 DOM 树中每个节点的具体样式，涉及到 CSS 的继承规则和层叠规则。此阶段最终输出的内容是每个 DOM 节点的样式，并被保存在 ComputedStyle 的结构内。
3）布局阶段
  布局就是计算 DOM 树中可见元素⼏何位置的过程。Chrome 在布局阶段需要完成两个任务：创建布局树和布局计算。
  （1）创建只包含可见元素的布局树。
  （2）计算布局树节点的坐标位置。
4）分层
  渲染引擎还需要为特定的节点⽣成专⽤的图层，并⽣成⼀棵对应的图层树（LayerTree）。
  打开 Chrome 的“开发者⼯具”，选择“Layers”标签，就可以可视化页⾯的分层情况，如下图所⽰。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。