现代浏览器的内部工作原理（详细流程图）

现代室内

摘要图

计算机的核心CPU和GPU

CPU: 中央处理单元（Central Processing Unit）. 中央处理器是计算机的大脑. 每个CPU内核将一个接一个地执行不同的任务. 现在，许多计算机都是多芯片和多核的.

GPU: 图形处理单元（图形处理器），GPU擅长处理跨核心的简单任务，并且是为解决图形问题而开发的. 在图形环境中，“使用GPU支持”和“使用CPU”都与快速渲染和平滑渲染有关.

许多带有扳手的GPU内核表明它们只能执行有限的任务

启动计算机时，由CPU和GPU为应用程序供电. 通常，应用程序通过提供的机制在CPU和GPU上运行.

三层计算机体系结构: 最底层是机器硬件，中间是操作系统，最顶层是应用程序.

在进程和线程上执行程序进程（进程）和线程（线程）

该过程充当边界框，并且线程在其中游动以寻找抽象鱼

一个过程可以描述为一个应用程序执行程序. 进程中存在一个线程并执行任何部分.

启动应用程序时，将创建一个或多个进程来帮助应用程序工作. 操作系统提供了一个可由进程使用的“内存”. 应用程序的所有状态都保存在此专用内存空间中. 关闭应用程序和进程它将关闭，操作系统将释放内存.

该进程可以请求操作系统的另一个进程执行不同的任务. 此时，将为新进程分配不同的内存，并且进程可以通过（IPC: 进程间通信）进行通信. 应用程序的工作进程失去响应，可以在不停止应用程序其他进程的情况下重新启动该过程.

通过IPC通信进行独立过程的

浏览器体系结构

不同的浏览器可以是多进程或单进程.

使用多进程体系结构的Chrome浏览器体系结构

浏览器的顶层是浏览器进程，它与浏览器的其他应用程序模块协调.

Chrome浏览器每个过程的工作:

浏览器进程:

地址栏，书签栏，前进和后退按钮以及其他信息

一些不可见的操作，请求，文件访问等

重做过程

负责网络标签的所有工作

插件过程

插入过程，处理网页中使用的插件，例如Flash插件

GPU处理

负责处理GPU相关工作

*还有其他过程，例如: 扩展应用程序，应用程序过程

不同的进程指向浏览器用户界面的不同部分

每个浏览器网站（网页）是一个独立的过程，可以确保即使该网页崩溃了，其他网页也不会受到影响. 在浏览器中具有多个进程的优点是安全性和沙箱处理. 由于操作系统提供了一种限制进程权限的方法，因此浏览器可以使用沙箱来保护某些进程. 由于该进程具有其自己的私有内存空间，因此每个进程都有一个公共基础结构的副本，这也意味着它将占用更多的内存. 当运行到极限时，Chrome将在同一站点进程中的不同标签上使用相同的内容.

以上内容不用于商业目的. 如果涉及知识产权问题，请联系薄伟峰（021-64471599-8017）的所有者，我们将立即处理.

[福利]填写问卷并发送所选的测试包+接口测试课程！为测试行业做些事！

Chrome在功能强大的硬件上运行时，会将不同的服务功能模块分配给不同的进程，从而提高了稳定性，但是当在较弱的硬件设备上运行时，某些服务功能模块将集成到同一进程中以节省内存，但是相应的稳定性也会降低.

每个Iframe）网站隔离的呈现过程

网站隔离使每个Iframe都能在独立的渲染过程中运行. 每个标签页网站都运行一个单独的过程，并且该网站内的iframe运行一个单独的呈现过程，以便在不同的网站中，同一iframe可以共享内存.

同源策略是Web的安全性模型，也就是说，如果一个站点未经授权，则其他站点将无法获取其数据. 流程隔离是分离站点的最有效方法.

站点隔离图

导航时发生了什么？

从浏览器过程开始

浏览器进程管理除Ta之外的所有内容. 浏览器进程中有许多线程，例如绘制浏览器按钮和输入字段的UI线程，处理网络堆栈以从Internet获取的网络线程，控制文件访问存储线程. 输入URL时，输入由浏览器进程的UI线程处理.

顶部是浏览器用户界面，底部是具有UI，网络和存储线程的浏览器流程图

简单的导航

过程输入

浏览器进程的UI线程首先确定它是搜索查询还是URL. UI线程决定是搜索内容到搜索引擎还是网站.

UI线程询问输入内容是搜索查询还是URL地址

当按下Enter键时，UI线程使网络能够检索站点的内容，并且加载将显示在选项卡的角落. 网络线程将通过适当的协议为请求建立TLS连接.

SSL（安全套接字层）及其后续的传输层安全性（TLS）是一种安全协议，可为网络通信提供安全性和数据完整性. TLS和SSL在传输层加密网络连接.

SSL协议位于TCP / IP协议和各种应用程序层协议之间，以为数据通信提供安全支持. SSL协议可分为两层: SSL记录协议: 它建立在可靠的传输协议（例如TCP）上，并提供对基本功能的支持，例如数据封装，压缩和高级协议的加密.

安全传输层协议（TLS）用于在两个通信应用程序之间提供机密性和数据完整性. 该协议由两层组成: TLS记录协议（TLS记录）和TLS握手协议（TLS握手）. 较低层是TLS记录协议，它位于可靠的传输协议（例如TCP）上，与特定应用程序无关. 因此，TLS协议通常被归类为传输层安全协议.

罗杰[rɑ: d（r）]: 无线通信答案: 已收到. UI线程告诉网络线程导航到mysite.com

这时，网络线程可能会收到服务器重定向标头，例如HTTP301. 在这种情况下，网络线程将告知UI线程服务器正在请求重定向. 然后，将启动另一个URL请求.

阅读回复

Content-Type响应标头和有效载荷作为实际数据

一旦开始接收响应主体，网络线程将检查数据流的前几个字节浏览器加载图片原理，并且响应消息的Content-Type字段将声明数据类型. 但是可能会有错误. 因此，使用MIME类型嗅探可以解决此问题.

如果响应是HTML文件，则下一步是将数据传递到呈现过程. 如果它是下载文件，则表示有下载请求，它将被传递给下载管理器.

网络线程询问响应数据是否是来自安全网站的HTML

此时还将检查SafeBrowsing. 如果域名和数据与恶意网站匹配，则网络线程将显示警告页面. 此外，还将检查跨源读取大块（CORB），以确保不将敏感的跨域数据传递给呈现过程.

查找渲染过程

一旦所有检查都已处理完毕，并且网络线程确定要导航到请求的站点，则网络请求线程将告诉UI线程所有数据请求已完成. UI线程将寻找渲染过程并开始渲染网页.

网络线程告诉UI线程查找渲染过程

由于网络请求线程需要时间，因此可以一次应用优化措施. 当UI线程向网络线程发送URL请求时，它也可以在待机状态下查找并启动渲染过程. 如果导航重定向，则可能不会使用渲染过程.

提交导航

现在数据和渲染过程已经准备就绪，浏览器将向渲染过程发送IPC（进程间通信）以提交导航，并且他还将传递数据流，因此渲染过程将继续接受一旦浏览器进程收到HTML数据，则确认消息已提交呈现过程，导航已完成，并且文档加载和分析开始.

这时，地址栏已更新，安全指示符和站点设置UI将显示新页面的站点信息，并且此选项卡页面的会话历史记录已更新，因此前进和后退按钮将当您关闭标签或窗口时，转到刚浏览的网站. 为了优化Tab /会话的还原，会话历史记录保存在硬盘上.

浏览器和呈现过程之间的IPC请求呈现页面.

额外步骤: 初始加载已完成

一旦不提交导航，呈现过程就会开始加载资源并呈现页面. 渲染过程渲染完成后，它将IPC发送回浏览器过程（在触发并完成所有frameh和onload事件之后，也会发生此情况）. 此时，UI线程会在选项卡页面上停止加载.

导航到另一个站点

简单的导航已完成. 在导航栏中输入URL时，浏览器进程将首先检查渲染的站点是否与beforeUnload事件有关. 如果未确认，它将执行相同的操作并导航到另一个站点.

befounload事件将在用户离开或关闭标签页时提示“离开此站点”.

注意: 请勿添加无条件的beforeunload处理程序，这会导致延迟.

浏览器进程将IPC发送到呈现过程，告诉它它将导航到另一个站点

如果呈现过程开始导航（window.location.herf = xxx），则呈现过程将首先检查bebeeload事件处理程序，并将执行与浏览器处理导航相同的步骤. 唯一的区别是导航请求是由渲染生成的. 该过程被发送到浏览器过程.

当新导航到新站点时，它将调用一个独立的渲染过程来处理导航，同时保留当前的渲染过程来处理unload事件.

2个IPC（从浏览器过程到新的渲染过程）通知渲染页面并告知旧的渲染过程卸载

要添加的Service Worker

渲染过程的内部机制

渲染过程处理网站内容

渲染过程负责标记内发送的所有内容. 在渲染过程中，主线程处理服务器返回给用户的大部分数据. 如果使用Web sworker或Service Sorker，则工作线程将处理一些JS. 合成和栅格线程也在渲染过程中运行，以高效，流畅地渲染页面.

呈现过程的核心工作是将HTML，CSS和JavaScript转换为用户可以与之交互的网页.

渲染过程包含主线程，辅助线程，合成线程和栅格线程

解析

Dom建设

当呈现过程接收到HTML数据时，主线程将解析文本字符串（HTML）并将其转换为（DOM）.

DOM是浏览器中页面的内部性能，也是开发人员通过JS与之交互的数据结构

HTML标记的分析由HTML Standar决定. HTML规范可以非常优雅地处理一些标记错误.

子资源加载

网站图像，CSS和JS外部资源需要从Internet或缓存中加载. 解析和构建DOM时，主线程将按处理顺序一一加载. 为了加快速度，将同时执行“预加载扫描仪”. 如果文档具有 ，则预加载扫描程序将在浏览器进程中发送请求.

主线程解析HTML并构建DOM树

3.JS阻塞分析

在解析HTML时，遇到