【b站vue教程】1 宏观视角下的浏览器——前端大厂面试必刷：前后端必学的网络安全浏览器工作原理：从入门到精通全套【附带所有源码】

课程地址：【前端大厂面试必刷：前后端必学的网络安全浏览器工作原理：从入门到精通全套【附带所有源码】】 https://www.bilibili.com/video/BV1UL41157hP/?share_source=copy_web&vd_source=b1cb921b73fe3808550eaf2224d1c155

课程笔记：浏览器渲染 · 语雀

目录

1、宏观视角下的浏览器

1.1 浏览器简介

1.2 进程和线程起步

1.2.1 进程和线程的概念

1.2.2 浏览器进程

1.3 计算机网络的七层模型

1.3.1 物理层

1.3.2 数据链路层

1.3.3 网络层

1.3.4 传输层

1 UDP协议

2 TCP协议

3 端口

1.3.5 会话层

1.3.6 表示层

1.3.7 应用层

1.3.8 四层模型

1.4 TCP协议如何保证页面文件能被完整送达浏览器

1.5 HTTP请求流程

1.5.1 浏览器发送HTTP请求

1 构造请求行

2 查找缓存

3 准备IP地址

4 等待TCP队列

5 建立TCP连接

6 发送HTTP请求

1.5.2 服务器处理HTTP请求

1 返回请求内容

2 断开连接

1.6 输入url地址到浏览器显示页面发生了什么（进程角度）

1.6.1 浏览器主进程

1.6.2 网络进程

1.6.3 渲染进程

---

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安装插件的话）

浏览器任务管理器的打开方式