几乎复刻了视频内容，不过看笔记有层次感一点，O(∩_∩)O哈哈~

【干货】浏览器是如何运作的？_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1x54y1B7RE/?spm_id_from=trigger_reload一、问题引出

当浏览器获取网页数据（html，css，JavaScript代码）后，浏览器如何将数据转换为视图呈现到浏览器窗口的呢？后面我们来学习浏览器是如何工作的。前面大段大段的知识一定要认真看，边画图边食用跟佳哦！(*^▽^*)

二、简单介绍浏览器组成

简化的浏览器组件结构图

功能角度

我们往往把浏览器的渲染引擎称之为浏览器内核。下面的图：

三、换个角度来拆解浏览器组成结构

我们可以把浏览器看做运行在计算机操作系统上的一个应用程序。每个应用程序必须至少启动一个进程来启动其功能。每个程序往往需要运行很多任务，进程就会创建多个线程来帮助它去执行这些小的任务。

这里，我们引入两个概念，进程和线程。(*^▽^*)

ε=(´ο｀*)))唉，看不懂，我们结合计算机应用程序运行过程来讲讲叭！

一点一点来看进程和线程之间的联系和区别

（1）当我们启动某程序时，就会创建一个进程来执行任务代码，同时会为该进程分配内存空间，该应用程序的状态都保存在该内存空间里。当应用关闭时，该内存空间就会被回收。

（2）进程可以启动更多的进程来执行任务，每个进程分配的内存空间是独立的。

（3）如果两个进程间需要传递某些数据，则需要通过进程间通信管道IPC来传递。

（4）很多应用程序都是多进程的结构，这样是为了避免某一个进程卡死，由于进程间，相互独立，这样不会影响到整个应用程序（使得应用程序关闭等我们不愿发生的事情）。举个例子，你可以把笔记本电脑想象成一个应用程序，外接鼠标是该应用程序的一个进程。如果外界鼠标出了问题，并不会让你的笔记本电脑直接关机无法使用，比如键盘依然可以工作，屏幕可以工作，音响可以工作。

（5）进程可以将任务分成更多细小的任务（task），然后通过创建多个线程并行（不太懂）执行不同的任务（task）。同一进程下的线程之间是可以直接通信共享数据的。

不知道你有没有听懂进程和线程的联系和区别？

没听懂没有关系继续往下听，也许你会慢慢理解。

四、早期浏览器的设计

今天的浏览器也是一个多进程结构，但早期的浏览器并不是多进程的结构，而是一个单进程上的结构。

（一）单进程浏览器的设计

大致为：一个进程中大概有页面线程负责页面渲染和展示等，JS线程执行JS代码，还有其他各种线程。

（二）单进程浏览器的问题

而且单进程的结构引发了很多问题：

① 不稳定，其中一个现象的卡死可能会导致整个进程出问题，比如你打开多个标签页，希望一个标签卡死，可能会导致整个浏览器无法正常运行。

② 不安全，浏览器之间是可以共享数据的。那这些线程岂不是可以随意访问浏览器进程内的所有数据。也就是说，一个标签页可以访问另一个标签页的数据，比如：账号密码，存款，聊天记录等

③ 不流畅，一个进程需要负责太多事情，会导致运行效率的问题，这里不展开。

（三）解决单进程浏览器问题

所以为了解决以上这些问题，现在采用了多进程浏览器结构。

说完了单进程浏览器，接下来，我们根据进程功能不同来拆解浏览器。后面就是开始真正理解浏览器运行原理了。准备好哦！！！！！！

我在地址栏输入内容后，浏览器内部发生什么事情让我可以看到页面内容？就好比我面对一个机器，我只要点点按钮就可以给我一个漂亮的工艺品，它内部怎么搞出来这个工艺品我不知道，它就是一个“黑盒”，现在我要拆开了看看它到底有什么？怎么拼起来继续工作？

下面就来《拆浏览器》和《拼浏览器》

五、现代浏览器的设计

现在采用了多进程浏览器机构，根据进程功能不同来拆解浏览器，我们可以将它分解为这样的结构。

（一）多进程设计结构

①浏览器进程，负责控制Chrome浏览器除标签页外的用户界面包括地址栏书签，后退和前进按钮，以及负责与浏览器的其他进程协调工作；

②网络进程，负责发起接受网络请求；

③GPU进程，负责整个浏览器界面的渲染；

④插件进程，负责控制网站使用的所有插件，例如flash，这里的插件并不是指Chrome市场里安装的扩展；

⑤渲染器进程，用来控制显示 tab 标签内的所有内容。

⑥缓存进程

（二）Chromium的四种进程模型

问：浏览器在默认情况下，会不会每一个标签（tab）也都创建了一个进程？

答：可能是这样。为什么这里会说有可能呢？这和你启动Chrome时选择的进程模型有关。

查看Chromium的官方档

在Chrome的官方文档上说明了，可我们一共有四种进程模型，分别是：

（1）默认的 Process-per-site-instance：默认情况下Chromium为用户访问的网站的每个实例创建一个渲染器进程，这样可以确保来自不同站点的页面是独立呈现的，并且对同一站点的单独访问也是彼此隔离的。简单来说，就是访问不同站点和同一站点的不同页面，都会创建新的进程。

（2）Process-per-site 模型：表示同一站点使用同一进程。

（3）Process-per-tab 模型：表示一个 tab 里的所有站点，使用一个进程。

（4）Single process模型：会让浏览器引擎和渲染引擎共有一个进程。

该文档还说明了各个进程模型的好处和坏处，大家有兴趣的可以自己去阅读一下我不这里就不做过多说明。

显而易见，默认的 Process-per-site-instance 模型会创建更多的进程，占用更多的内存空间，但确实是最安全的。原因就是：每个tab以及tab内的每个站点都是相互隔离，互不影响的。当其中一个标签页渲染器进程卡死，并不会影响其他标签。现在我们在浏览器上输入网址www.bilibili.com，给你三秒钟，想想浏览器是如何通过互联网获取到网页数据的，如果想不起来，就去看这期的视频内容补补课吧！！！！！！

【干货】10分钟带你了解互联网是如何运作的！_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1Rz4y197Jd/?spm_id_from=333.788.recommend_more_video.1

或者看看这篇笔记~~~（待完成(*^▽^*)）

六、浏览器运行原理

（一）浏览器运行疑问

通过直观看看，我们打开浏览器想要浏览花哨的网页的话，首先要在浏览器地址栏里输入内容，然后就会过一活儿就会呈现页面内容。那么，你们会不会有这样的疑问：

我在地址栏输入内容后，浏览器内部发生什么事情让我可以看到页面内容？就好比我面对一个机器，我只要点点按钮就可以给我一个漂亮的工艺品，它内部怎么搞出来这个工艺品我不知道，它就是一个“黑盒”，现在我要拆开了看看它到底有什么？怎么拼起来继续工作呢？

（二）浏览器运行原理（回答问题）

前面我们已经拆开了浏览器，现在来拼浏览器让它工作。

# 拆成这样

①浏览器进程，负责控制Chrome浏览器除标签页外的用户界面包括地址栏书签，后退和前进按钮，以及负责与浏览器的其他进程协调工作；

②渲染器进程，用来控制显示 tab 标签内的所有内容。

③GPU进程，负责整个浏览器界面的渲染；

④插件进程，负责控制网站使用的所有插件，例如flash，这里的插件并不是指Chrome市场里安装的扩展；

⑤网络进程，负责发起接受网络请求；

⑥缓存进程

# 开始拼接步骤

后面有总结~~~

步骤一（浏览器线程请求数据）

我们要在地址栏输入地址时，这时使用浏览器主进程的UI线程，它会捕捉你的输入内容。并对内容进行判断：

情况1 => 输入的是网址，就会启动一个浏览器进程中的网络线程来请求DNS进行域名解析，接着开始连接服务器，连接成功服务器返回数据；

情况2 => 输入不是网址，而是一串关键词。浏览器就知道你是要搜索，于是就会使用默认配置的搜索引擎来查询，也会启动一个浏览器进程中的网络线程来向默认搜索引擎的服务器域名请求数据，连接成功服务器返回相应数据。

步骤一

步骤二（浏览器线程接收数据并传递给渲染器进程）

# 简化版本：

浏览器进程中的网络线程获取到数据后进行安全校验，然后浏览器进程中的网络线程会通知UI线程。然后UI线程会创建一个渲染器进程（Renderer Process）来渲染页面，浏览器进程通过IPC管道将数据传递给渲染器进程。正式进入渲染流程。

# 较完整版本：

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

浏览器获取到数据后会通过 SafeBrowing 来检查站点是否是恶意站点。如果是，则会展示一个警告页面，告诉你这个站点有安全问题，浏览器（进程）就会阻止你的访问，当然你也可以强行继续访问。当返回数据准备完毕，并且安全校验通过时，网络线程会通知UI线程，我就准备好了，该你了。然后UI现场会创建一个渲染器进程来渲染页面。接着浏览器进程通过IPC管道将数据传递给渲染器进程。正式进入渲染流程。

步骤二

后面步骤三看看我的这篇

浏览器运行原理之＞＞页面渲染原理_咕噜一口温开水的博客-CSDN博客https://blog.csdn.net/qq_47286790/article/details/122866048?spm=1001.2014.3001.5502前置知识：

浏览器从磁盘或网络读取HTML的原始字节，并根据文件的指定编码（例如 UTF-8）将它们转换成字符串。在网络中传输的内容其实都是 0 和 1 这些字节数据。当浏览器接收到这些字节数据以后，它会将这些字节数据转换为字符串，也就是我们写的代码。将字符串转换成Token，例如：<html>、<body>等。Token中会标识出当前Token是“开始标签”或是“结束标签”亦或是“文本”等信息。

这时候你一定会有疑问，节点与节点之间的关系如何维护？

事实上，这就是Token要标识“起始标签”和“结束标签”等标识的作用。例如“title”，Token的起始标签和结束标签之间的节点肯定是属于“head”的子节点。

事实上，构建DOM的过程中，不是等所有Token都转换完成后再去生成节点对象，而是一边生成Token一边消耗Token来生成节点对象。换句话说，每个Token被生成后，会立刻消耗这个Token创建出节点对象。注意：带有结束标签标识的Token不会创建节点对象。

深入浅出浏览器渲染原理 - 知乎 (zhihu.com)

浏览器渲染页面的流程_哔哩哔哩_bilibili

步骤三（渲染器进程处理数据）

渲染器进程接受到数据就是HTML。渲染器进程的核心任务就是把HTML，CSS，JS的资源渲染成用户可以交互的Web页面。渲染器进程的主线程将HTML进行解析，构造DOM数据结构。

补充：DOM也就是文档对象模型，是浏览器对页面在其内部的表示形式，是Web开发程序员可以通过JS与之交互的数据结构和API。HTML文件首先经过tokenier标记化，通过词法分析将输入的HTML内容解析成多个标记，根据识别后的标记进行DOM树构造，在DOM树构造过程中会创建 document 对象，然后以 document 为根节点的DOM树不断进行修改，向其中添加各种元素。HTML代码中往往会引入一些额外的资源，如图片、CSS、JS脚本等。图片和CSS这些资源需要通过网络下载或者从缓存中直接加载，这些资源不会堵塞HTML的解析，因为他们不会影响DOM的生成。

浏览器运作原理笔记（来自up主objtube的卢克儿的视频）相关推荐

Chrome浏览器渲染原理笔记
以前没怎么系统性的深入学习这方面,今天看了篇文章后还是觉得要好好整理归纳下的.顺便尝试能不能养成写笔记的习惯. 目录浏览器的架构 Chrome浏览器的多进程架构多进程架构的好处多进程架构优化 C ...
《浏览器工作原理与实践》学习笔记
浏览器原理前言本文是学习李兵老师的<浏览器工作原理与实践>过程中记录笔记,详细链接见文末进程vs线程进程:一个应用程序的运行实例就是一个进程,详细来说就是:启动一个应用程序的时候, ...
主机主浏览服务器宣告的运作原理机制
主机主浏览服务器宣告的运作原理机制.刚启动的电脑会在第1,第2,第4,第8 第12 分钟向主浏览器进行主机宣告,此后每间隔12分钟进行主机宣告! 问题一请问如果第1分钟就已经注册成功了,那是不是 ...
＜＜浏览器工作原理与实践＞＞读书笔记
1. 进程和线程的区别概念: 进程:操作系统进行资源分配和调度的基本单位:程序的运行实例:(在我们启动一个程序的时候,操作系统会为该程序创建一块内存空间,用来存放代码,运行数据,和执行任务的主线程, ...
渡一大师课笔记（重点：事件循环、浏览器渲染原理）
渡一大师课笔记(重点:事件循环.浏览器渲染原理) 响应式原理(渡一) 什么是数据响应式? 函数与数据的关联(重要) 数据变化后,会自动重新运行依赖该数据的函数(重要) 被监控的函数 render.co ...
浏览器工作原理与实践学习笔记
浏览器工作原理与实践参考来源: 极客时间-李兵专栏李兵简介: 08年,在 Chromium 和 IE 发布了一款双核浏览器:太阳花,国内第一款双核浏览器 ,支持chrome并兼容IE,日活达到了2 ...
【浏览器工作原理与实践笔记一】：宏观视角上的浏览器
[浏览器工作原理与实践笔记一]:宏观视角上的浏览器文章目录 [浏览器工作原理与实践笔记一]:宏观视角上的浏览器一.Chrome架构:仅仅打开了1个页面,为什么有4个进程二.TCP协议:如何保证页 ...
单文件浏览器_图文并茂深度解析浏览器渲染原理，包看懂超值得收藏
在我们面试过程中,面试官经常会问到这么一个问题,那就是从在浏览器地址栏中输入URL到页面显示,浏览器到底发生了什么?这个问题看起来是老生常谈,但是这个问题回答的好坏,确实可以很好的反映出面试者知识的广 ...
浏览器内存不足导致页面崩溃_深度精读:浏览器渲染原理 [8000字图文并茂]
原文地址:https://segmentfault.com/a/1190000022633988作者:_杨溜溜在我们面试过程中,面试官经常会问到这么一个问题,那就是从在浏览器地址栏中输入URL到页面 ...

浏览器运作原理笔记（来自up主objtube的卢克儿的视频）