课程地址：【前端大厂面试必刷：前后端必学的网络安全浏览器工作原理：从入门到精通全套【附带所有源码】】 https://www.bilibili.com/video/BV1UL41157hP/?share_source=copy_web&vd_source=b1cb921b73fe3808550eaf2224d1c155
课程笔记：浏览器渲染 · 语雀
目录
1.6 输入url地址到浏览器显示页面发生了什么（进程角度）
1、宏观视角下的浏览器
首先装一个抓包工具wireshark（联想商店可以安装）。
抓包工具：可以直观看到计算机网络的7层模型。
1.1 浏览器简介
1.1.1 浏览器历史
1995年美国-网景公司-网景浏览器，之后网景还试图开发依靠浏览器的网络操作系统。
这引起了微软的关注和警惕。
1995年12月7日（1941年12月7日：日本偷袭珍珠港（没什么关系，只是发生的月份日期是一样的）），微软正式进军浏览器市场。
同年微软发布windows95，并捆绑了IE浏览器，大获成功。97年网景公司倒闭。
到02年，微软拿下了浏览器市场80%的份额。
一直到08年，Chrome横空出世，打破了这种垄断的局面。
19年，Chrome占据全球63%的市场份额。
浏览器自诞生之日起，地位就一直很重要，其重要性也在不断加强。
1.1.2 浏览器现状
随着云计算的普及和HTML5技术的发展，越来越多的应用从C/S架构转向B/S架构。这种改变更加让浏览器的重要性与日俱增。视频、音频、游戏几大核心场景也都在往web的使用场景切换。
这里不是很明白，感觉还是客户端用户比较多吧？
本课程以Chrome浏览器进行研究和分析。
选择Chrome浏览器的原因，是Chrome，微软的edge以及国内的大部分浏览器都是基于Chrominum二次开发的。Chrome浏览器是Google官方发行的版本，是目前全球使用率最高的浏览器。Chrome最具代表性。
为什么要学习浏览器？ 随着云计算的普及和HTML5技术的快速发展，越来越多的应用从c/s架构转化b/s架构。这种改变让浏览器的重要性与日俱增。
c/s架构，clinet --server（王者荣耀，英雄联盟）
b/s架构，browser --server（语雀）
为什么要学习浏览器工作原理？
1、准确评估Web项目的可行性
2、从更高的维度审视页面
3、在快速迭代的技术中把握本质
1.2 进程和线程起步
ctrl+alt+delete，任务管理器。
浏览器是多进程的，一个页面挂掉了，并不影响第二个页面。
1.2.1 进程和线程的概念
进程：在内存中正在运行的应用程序。例如微信正在运行，就是一个进程。
1、在内存中独占一个内存空间
2、进程和进程之间的隔离的。
1、正在运行的，也就是说进程是一个动态概念，必须是正在运行的某个应用程序才能称得上是进程。
2、王者荣耀在手机上运行时就是一个进程，如果此进程崩溃后，他对微信进程是没有影响的。
以下都是一个进程。
线程：进程的最小执行单位，线程由进程所管理。
1、一个进程是由多个线程组成。
2、每个线程之间是相互隔离的（从内存角度上讲）。
线程和进程一样，也是动态概念，有创建有销毁。
进程和线程的区别
① 进程在运行时拥有独立的内存空间，即每个进程所占用的内存都是独立的，比如微信运行时系统会给它一个运行内存。
② 而多个线程是共享内存空间的，但每个线程的执行是相互独立的。
③ 线程必须依赖进程才能执行。单独的线程是无法执行的，没有进程就不存在线程。
1.2.2 浏览器进程
最新Chrome进程架构图。
浏览器设置时是一个多进程模型，这样才能确保浏览的安全性和稳定性。如果一个页面有问题，不影响其他页面的运行。
一个页面启动时到底启动了几个进程。
至少启动了4个进程：
1、浏览器主进程。负责界面显示、用户交互、子进程管理，同时提供存储（本地缓存）等功能。
2、渲染进程。负责渲染html页面。默认情况下，Chrome为每一个Tab标签页创建一个渲染进程。
3、网络进程。负责网络资源下载。之前作为一个模块运行在浏览器主进程中，近几年独立处理，成为单独一个进程。
4、GPU进程。GPU图形处理器，使用初衷是为了实现3D CSS的效果。随后网页、Chrome的ui界面都选择采用GPU来绘制，这使得GPU成为浏览器的普遍需求。因此，Chrome在架构中，将GPU进程作为单独的进程列出来。
5、插件进程（如果Chrome安装插件的话）
浏览器任务管理器的打开方式
1.3 计算机网络的七层模型
（这块还是很混乱，没有逻辑，后面专门学一下，这里先糊涂过一下。）
1.3.1 物理层
1、物理层。互联物理链路，物理介质。
① 使用一定的物理介质（光纤、网线、wifi）进行计算机之间的连接。
② 数据是以0和1（电信号形式）传输的。
1.3.2 数据链路层
2、数据链路层。
① MAC地址（物理地址），在数据链路层。包括本机的MAC和目标机的MAC地址。
② 对物理层的数据进行封装，封装成byte的形式。
1.3.3 网络层
3、网络层。
① IP协议，解决数据传输的问题。主机A将数据传输给主机B，A需要知道B的IP地址。IP地址就在网络层。
② ARP协议：地址解析协议，通过对象的ip地址(域名)，寻找对象的MAC地址ARP的功能。2、网路层--ARP协议工作原理 · 语雀
③ 路由协议。4、网络层--路由协议 · 语雀
1.3.4 传输层
4、传输层。
主机A将数据传递给主机B，涉及以下2个协议。
UDP（用户数据包协议）/TCP（传输控制协议）。
端口。
1 UDP协议
UDP：用户数据包协议。
UDP与TCP不同，UDP不建立连接，它是一个无连接的传输协议。
UDP的特点：只负责发送，不负责接收。例如，DNS（会话层协议）解析使用了UDP协议（下面有案例）。此外还有微信电话，流媒体。
不可靠协议，丢包、出错是被允许的。优势就是速度快。
什么场景使用UDP协议：
1不需要可靠机制，只要求传输速度快；
2 流媒体、多媒体、IP电话；
3 资源消耗特别小。
这里打开wireshark不显示WLAN（或以太网），安装npcap即可解决。wireshark捕获时找不到任何接口，无法开始捕获_win11 wireshark找不到网络接口-CSDN博客
命令行窗口
回到wireshark
双击百度主机地址
用抓包工具可以验证，这里做的是DNS解析，使用的是UDP协议。
2 TCP协议
TCP：传输控制协议，顾名思义，就是对数据的传输进行一定的控制。
TCP协议的特点：
1、重传机制（如果主机A给主机B发送消息，但是主机B一直没有响应，主机A会向B重新发送消息）
2、排序机制——根据数据包的编号对数据进行排序，重组数据包，保证数据包的完整性和准确性
3、三次握手（主机A向主机B发送消息，B回复消息，A确认收到回复消息）
4、四次挥手
什么场景使用TCP协议
HTTP、HTTPS、FTP。
示例
wireshark抓下tcp协议。
在浏览器输入要请求的url地址，然后去抓包工具里输入tcp。然后找到对应的http请求，鼠标右键->追踪流->TCP流。
注意：HTTP请求是建立在TCP连接基础上的。
在wireshark工具里，先有TCP三次握手，成功后HTTP请求才会发送。然后还有TCP的四次挥手（这里先不讨论）。
3 端口
IP协议解决的是数据传输的问题，但是他不能保证数据被发送到目的主机的应用上。有TCP协议和端口的概念，就可以保证数据被准确派发到目的应用上。
在传输层，UDP协议和TCP协议都有对应的端口。
1.3.5 会话层
5、会话层
① 断点续传，没有协议
计算机网络里没有协议的层，都不重要。
1.3.6 表示层
6、表示层
① 翻译，解决不同系统之间数据传输的问题。
1.3.7 应用层
7、应用层
① HTTP协议，主要是规定客户端请求数据的格式，和服务端响应数据的格式。
HTTP协议：超文本传输协议。基于TCP协议。默认端口80。
示例
发送一个简单的http请求
http://47.108.197.28:4000/api/article已失效。
https://ku.qingnian8.com/dataApi/qingKu/getList.php用这个
http由请求和响应两部分组成。
请求部分
响应部分
以上，重点牢记IP协议、UDP协议、TCP协议和HTTP协议，以及发生在哪一层。
1.3.8 四层模型
1 物理层：物理层、数据链路层
2 网络层：网络层
3 传输层：传输层
4 应用层：会话层，表示层，应用层
1.4 TCP协议如何保证页面文件能被完整送达浏览器
可以看下
3、TCP协议:如何保证页面文件能被完整送达浏览器 · 语雀
① IP协议：通过IP地址把数据包发送到目的主机
② UDP协议：通过端口号保证将数据送达给应用
② TCP协议：通过端口号保证将数据完整送达应用程序
1.5 HTTP请求流程
TCP协议是保证数据完整传输的，包含建立连接、传输数据和断开连接3个阶段。
HTTP协议，是基于TCP协议建立的。
HTTP协议是一种允许浏览器向服务器获取资源的协议，是Web的基础。通常由浏览器发起请求，用来获取不同类型的文件，例如HTML、CSS、JavaScript、图片、视频等。此外，HTTP协议也是浏览器使用最广的协议。它规定了客户端请求和服务器响应数据的格式。
HTTP请求，包含请求和响应两部分。
1.5.1 浏览器发送HTTP请求
浏览器发生http请求的流程，共分为以下6步。
1 构造请求行
GET /gchatpic_new/5E793AD68916BE8EFC3A1F0059FAB4F13A92A287E9C6799A7CF962DCE228CAAA69AC2B04CFA3019107C613D618AFC4B49A5BD035F51E3C5B5F0A44F05811380BC3EF00FAEF9E06A276A7D3820A9ED43F7740559703977E79/0?vuin=2908030901&is_origin=140720308486145&term=1&srvver=27411&rf=naio HTTP/1.1
2 查找缓存
浏览器缓存中有相关文件，则直接使用本地文件。如果没有，则发送http请求。
好处：可以缓解服务器压力。
总结：有缓存则取缓存，无缓存则发送http请求。
3 准备IP地址
准备IP地址（网络层）和端口号（传输层）。
HTTP协议和TCP协议的关系：因为浏览器使用HTTP协议作为应用层协议，用来封装请求的文本信息；并使用TCP/IP协议作为传输层协议将它发到网络上。所以在HTTP工作开始之前，浏览器需要TCP与服务器建立连接。即，HTTP的内容是通过TCP的传输数据阶段来实现的。
4 等待TCP队列
IP地址和端口号准备好后，不会马上建立TCP连接。
因为Chrome机制：一个域名最多只能建立6个TCP连接。如果请求少于6个，可以立即建立连接。如果多于6个，需要等待。
5 建立TCP连接
6 发送HTTP请求
建立TCP连接后才能发送HTTP请求。
以上就是浏览器发送http请求的全部流程，共6步。
1.5.2 服务器处理HTTP请求
经过千辛万苦，HTTP请求信息终于被送到服务器。然后服务器会根据浏览器的请求信息来准备相应内容。
主要分为2步。
1 返回请求内容
2 断开连接
通常情况下，一旦服务器向客户端返回了响应数据，服务器就要关闭TCP连接。不过也有例外的情况，计算机网络里再去仔细学吧。
1.6 输入url地址到浏览器显示页面发生了什么（进程角度）
从输入url地址，到浏览器显示页面，这中间发生了什么？这是一道经典面试题，其中涉及网络、操作系统、Web等一系列知识。
这里从进程角度讨论，主要是调用了3个进程：浏览器主进程、网络进程、渲染进程。
注意：① 这里的url请求，其实就是在搜索框里输入“url”内容，不要误解。
② 浏览器主进程只负责显示页面和用户交互，他不能处理网络请求。
③ 提交文档消息：浏览器主进程中将网络进程接收到的html数据提交给渲染进程。
④ 浏览器主进程起到派发任务的角色。
总结：
① 浏览器主进程输入url请求（浏览器主进程负责用户交互）；
② 浏览器主进程将url请求派发给网络进程（浏览器主进程只负责显示页面和用户交互，不能处理网络请求）
③ 网络进程发送url请求，获取响应头数据，解析响应头数据，之后将数据（响应头数据）转发给浏览器主进程
④ 浏览器主进程接收到网络进程的响应数据后，发送“提交文档”消息给渲染进程。
⑤ 渲染进程中接收到浏览器主进程的提交信息后，准备接收html数据。如何接收html数据？直接与网络进程建立数据管道进行接收。
⑥ 文档数据传输完毕，渲染进程会返回“确认提交x消息”到浏览器主进程。
⑦ 浏览器主进程中，收到渲染进程“确认提交x消息”后，开始移除旧的文档，更新浏览器主进程的页面状态。
以上就是从3个进程的角度讨论从输入url地址到浏览器显示页面间发生了什么。
（如果加上计算机网络的7层模型进行描述，步骤会更加复杂。）
1169
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
