本文详细介绍了浏览器的工作原理，从单进程到现代浏览器的多进程架构，包括浏览器进程、渲染器进程、网络进程等的职责。阐述了数据从输入URL到页面展示的过程，涉及DNS解析、安全校验、渲染流程及DOM构建等关键步骤。同时，探讨了不同进程模型对性能和安全的影响。
几乎复刻了视频内容，不过看笔记有层次感一点，O(∩_∩)O哈哈~
【干货】浏览器是如何运作的？_哔哩哔哩_bilibili
https://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，给你三秒钟，想想浏览器是如何通过互联网获取到网页数据的，如果想不起来，就去看这期的视频内容补补课吧！！！！！！
或者看看这篇笔记~~~（待完成(*^▽^*)）
六、浏览器运行原理
（一）浏览器运行疑问
通过直观看看，我们打开浏览器想要浏览花哨的网页的话，首先要在浏览器地址栏里输入内容，然后就会过一活儿就会呈现页面内容。那么，你们会不会有这样的疑问：
我在地址栏输入内容后，浏览器内部发生什么事情让我可以看到页面内容？就好比我面对一个机器，我只要点点按钮就可以给我一个漂亮的工艺品，它内部怎么搞出来这个工艺品我不知道，它就是一个“黑盒”，现在我要拆开了看看它到底有什么？怎么拼起来继续工作呢？
（二）浏览器运行原理（回答问题）
前面我们已经拆开了浏览器，现在来拼浏览器让它工作。
# 拆成这样
①浏览器进程，负责控制Chrome浏览器除标签页外的用户界面包括地址栏书签，后退和前进按钮，以及负责与浏览器的其他进程协调工作；
②渲染器进程，用来控制显示 tab 标签内的所有内容。
③GPU进程，负责整个浏览器界面的渲染；
④插件进程，负责控制网站使用的所有插件，例如flash，这里的插件并不是指Chrome市场里安装的扩展；
⑤网络进程，负责发起接受网络请求；
⑥缓存进程
# 开始拼接步骤
后面有总结~~~
步骤一（浏览器线程请求数据）
我们要在地址栏输入地址时，这时使用浏览器主进程的UI线程，它会捕捉你的输入内容。并对内容进行判断：
情况1 => 输入的是网址，就会启动一个浏览器进程中的网络线程来请求DNS进行域名解析，接着开始连接服务器，连接成功服务器返回数据；
情况2 => 输入不是网址，而是一串关键词。浏览器就知道你是要搜索，于是就会使用默认配置的搜索引擎来查询，也会启动一个浏览器进程中的网络线程来向默认搜索引擎的服务器域名请求数据，连接成功服务器返回相应数据。
步骤一
步骤二（浏览器线程接收数据并传递给渲染器进程）
# 简化版本：
浏览器进程中的网络线程获取到数据后进行安全校验，然后浏览器进程中的网络线程会通知UI线程。然后UI线程会创建一个渲染器进程（Renderer Process）来渲染页面，浏览器进程通过IPC管道将数据传递给渲染器进程。正式进入渲染流程。
# 较完整版本：
SafeBrowsing是谷歌内部的一套站点安全系统，通过检测该站点的数据来判断是否安全，比如通过查看该站点是否在谷歌的黑名单之内。
浏览器获取到数据后会通过 SafeBrowing 来检查站点是否是恶意站点。如果是，则会展示一个警告页面，告诉你这个站点有安全问题，浏览器（进程）就会阻止你的访问，当然你也可以强行继续访问。当返回数据准备完毕，并且安全校验通过时，网络线程会通知UI线程，我就准备好了，该你了。然后UI现场会创建一个渲染器进程来渲染页面。接着浏览器进程通过IPC管道将数据传递给渲染器进程。正式进入渲染流程。
步骤二
后面步骤三看看我的这篇
浏览器从磁盘或网络读取HTML的原始字节，并根据文件的指定编码（例如 UTF-8）将它们转换成字符串。在网络中传输的内容其实都是 0 和 1 这些字节数据。当浏览器接收到这些字节数据以后，它会将这些字节数据转换为字符串，也就是我们写的代码。将字符串转换成Token，例如：<html>、<body>等。Token中会标识出当前Token是“开始标签”或是“结束标签”亦或是“文本”等信息。
这时候你一定会有疑问，节点与节点之间的关系如何维护？
事实上，这就是Token要标识“起始标签”和“结束标签”等标识的作用。例如“title”，Token的起始标签和结束标签之间的节点肯定是属于“head”的子节点。
事实上，构建DOM的过程中，不是等所有Token都转换完成后再去生成节点对象，而是一边生成Token一边消耗Token来生成节点对象。换句话说，每个Token被生成后，会立刻消耗这个Token创建出节点对象。注意：带有结束标签标识的Token不会创建节点对象。
步骤三（渲染器进程处理数据）
渲染器进程接受到数据就是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的生成。
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
