网络安全浏览器工作原理

1、 宏观浏览器

浏览器简介
1995年美国的网景公司因"网景浏览器"的发布而快速崛起,之后网景还试图开发一个依靠浏览器的网络操作系统。这引起了微软的关注和警惕，1995年12月7日(12月7日是日本偷袭珍珠港的日子)，微软正式进军浏览器市场，同年微软发布windows95，并捆绑了IE，大获成功。IE出来，网景就离死不远了，网景被垄断了操作系统的微软用非技术、非正常竞争的手段打败，97年就倒闭了。到2002年，微软拿下了浏览器市场80%的份额。
直到2008年，chrome横空出世，才打破这种垄断的局面。Chrome浏览器完全颠覆了之前浏览器的架构设计，市场份额占比激增。2019年,chrome占据全球63%的市场份额。
随着云计算的普及和HTML5技术的快速发展，越来越多的应用从C/S架构转化B/S架构。这种改变让浏览器的重要性与日俱增。视频、音频、游戏几大核心场景也都在往Web的使用场景切换。

c/s client --server （王者、吃鸡）
b/s browser --serve（百度、搜狐）

进程和线程

ctrl+alt+delete 任务管理器查看

进程：就是在内存中正在运行的应用程序（eg：手游）
在内存中独占一个内存空间
进程和进程之间是隔离的
【是操作系统最小的执行单位】

线程：就是进程的最小执行单位（eg：微信和多人聊天）
一个进程是由多个线程组成
每一个线程之间也是相互之间隔离的
【CPU最小的执行单位】

浏览器用了多少进程
打开浏览器——更多工具——任务管理器查看

● 浏览器进程：主要负责界面显示、用户交互、子进程管理、同时提供存储等功能。
● 渲染进程：核心任务是将HTML、CSS和JavaScript转换为用户可以与之交互的网页，排版引擎Blink和JavaScript引擎V8都运行在该进程中，默认情况下，Chrome为每一个Tab标签页创建一个渲染进程。出于安全考虑，渲染进程都是运行在沙箱模式下的。
● GPU进程：GPU图形处理器（英语：graphics processing unit，缩写：GPU）,负责3D css效果，网页，Chrome ui的绘制。
● 网络进程：主要负责页面的网络资源加载，之前是作为一个模块运行在浏览器进程里面的，直至最近才独立处理，成为单独一个进程。
● 插件进程：主要负责插件的运行，因为插件易崩溃，所以通过插件进程来隔离，以保证插件进程崩溃不会对浏览器和页面造成影响。

计算机网络的七层模型

UDP特点：只管发，不管收DNS，微信电话，流媒体
TCP特点：1、重传机制。2、排序机制–根据数据包的编号对数据进行排序，重组数据包。保证数据包的完整性和准确性。

四层说法：
物理层 （物理+数据链路）
网络层
传输层
应用层 （会话+表示+应用）

HTTP的请求流程

浏览器发送HTTP请求的流程：
1、构造请求行 GET /api/article HTTP/1.1 (请求方式+url地址+http版本)
2、查找缓存 其实浏览器缓存是一种本地保存的资源副本，以供下次请求时直接使用的技术 【有则缓存没有则发送网络请求】
3、准备IP地址和端口号 【用来封装请求的文本信息】并使用TCP/IP作传输层协议将它发到网络上，所以在HTTP工作开始之前，浏览器需要TCP与服务器建立连接。也就是说HTTP的内容是通过TCP的传输数据阶段来实现的
4、等待TCP队列 【一个域名最多建立6个TCP链接】
5、建立TCP链接 IP地址和端口已经准备好了，是不是可以马上建立TCP连接。不行，因为Chrome有个机制，同一个域名同时最多只能建立6个TCP连接。少于6个直接下一步建立TCP连接，或排队等待结束后建立TCP连接
6、发送HTTP请求

服务器处理HTTP请求：
1、返回请求内容
2、断开连接

【当然浏览器还提供了 DNS 数据缓存服务】
数据包是通过IP地址传输给接收方的。由于IP地址是数字标识的，难以记忆，使用一个域名例如www.baidu.com就容易记忆了，所以基于这个需求又出现了一个服务，负责把域名和IP地址做–映射关系。这套域名映射为IP的系统叫做"域名系统"，简称DNS。
这也是为什么第二次打开浏览器会更快 DNS缓存和页面资源缓存这两块数据是会被浏览器缓存的
从进程的角度讨论
从输入url地址到浏览器显示页面 过程中发生了什么：

2、浏览器渲染流程

TCP协议

三次握手

1. 一次：【发送消息】本地地址发送到服务器地址 SYN=1
2. 二次：【响应消息】服务器地址发送到本地地址 SYN=1，ACK=1
3. 三次：【确认消息】ACK=1

渲染流程

DOM解析→CSS解析→样式计算→布局树→ 图层树→绘制→合并图层
1、使用html解析器转换成浏览器能理解的【DOM树】 ParseHTML
2、将css解析成浏览器能够识别的【CSS 树】
3、CSS树+DOM树创建布局树 并计算元素的布局信息 【布局树】
4、对布局树进行分层，并生成【图层树】（有特殊属性的会生成单独的图层）
5、对每个图层生成绘制列表，并将其提交给合成线程
6、对每个图层进行单独的绘制
7、合并图层
eg：

eg：

解析：

特殊属性图层：
1、css 3D
2、position: fixed
3、video
4、canvas
5、css3动画

补充：
屏幕上页面的可见区域叫视图（viewport）
css要放在顶部，它不会阻塞html的解析
JS会阻塞HTML的解析，所以最好放在底部
HTML会先扫描link和script标签，去并行加载
Encoded Data 65536 Bytes：接受65536比特 ————1kb=1024bytes 所以等同于接受64kb

3、重绘重排

重绘

• 重绘是一个元素的外观的改变会触发浏览器行为。例如outline,背景色等属性的改变。浏览器会根据元素的新属性重新绘制，使元素的呈现新的外观，重绘不会带来布局，所以不一定伴随重排

<