这是我参与更文挑战的第3天，活动详情查看：更文挑战
花了近一个月的时间，学习李兵老师的《浏览器工作原理与实践》。在这个过程中，也有拓展一些知识点，再一次感叹，自己需要学习的东西实在是还有很多。在此，也进行一个简单的总结，希望对你们也有一点点帮助~
浏览器原理
一、浏览器进程
目前主流浏览器有五个：IE(即Internet Explorer)、Firefox、Safari、Chrome和Opera浏览器。
浏览器的高层结构
1、用户界面
即我们能够直观看到的浏览器固定的部分，比如浏览器的地址栏、书签、刷新按钮等等。
2、浏览器引擎
即用户界面和呈现引擎之间传送的指令。
3、呈现引擎
负责显示浏览器请求的内容，比如说请求的内容是HTML页面，他就负责解析HTML和CSS内容，并且将解析后的内容显示在屏幕上。
4、网络
这一层主要是负责网络调用，比如说HTTP请求。但是这个网络请求不是关乎个人服务器端的请求，它的接口跟平台没有关系，只是为所有平台提供了底层实现。
5、JavaScript解释器
用于解析和执行JavaScript代码。
6、用户界面后端
用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。
7、数据存储。
这一层就是浏览器在硬盘上保存各种数据，比如Cookie。
线程和进程
1、线程：线程是依附于进程的，它不能单独存在。在进程中使用多线程并行处理能够提高运算效率。
2、进程：一个进程就是一个程序的运行实例。启动一个程序的时候，操作系统回为该程序创建一块内存，用来存放代码、运行中的数据和一个执行任务的主线程，我们把这样的一个运行环境叫做进程。
现在的Chrome浏览器拥有以下进程：（多进程架构）
一个浏览器主进程：主要负责界面显示、用户交互、子进程管理，同时提供存储等功能。
一个GPU进程：主要用来绘制网页UI界面，实现3DCSS效果。
一个网络进程：主要负责页面的网络资源加载。
多个渲染进程：主要负责页面的渲染。核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页，排版引擎 Blink 和 JavaScript 引擎 V8 都是运行在该进程中。
多个插件进程：主要负责插件的运行。
二、页面性能
衡量web页面性能的指标---FP（First Paint）：指从页面加载到首次绘制的时长。
三、计算机网络体系结构
OSI七层协议
TCP/IP四层协议
四、HTTP请求流程
1、构建请求
2、查找缓存
3、准备IP地址和端口
4、等待TCP队列
5、建立TCP连接
6、发送HTTP请求
7、服务器端处理HTTP请求
五、浏览器输入URI到页面显示的过程
六、页面渲染过程
1、构建DOM树
2、样式计算
（1）把CSS转换成浏览器能够理解的结构
（2）转换样式表中的属性制，使其标准化。比如2em、blue等
（3）计算出DOM树中每个节点的具体样式
3、布局阶段
在样式计算之后，进入布局阶段。布局是一个递归的过程。它从根呈现器（对应于 HTML 文档的 元素）开始，然后递归遍历部分或所有的框架层次结构，为每一个需要计算的呈现器计算几何信息。
（1）创建布局树
（2）布局计算
4、分层
（1）图层树构建
在构建图层树的时候，拥有层叠上下文属性的元素会被提升为单独的一层。
这里的拥有层叠上下文属性的元素一般为四类： 明确定位属性的元素：position 、定义透明属性的元素：opacity、使用CSS滤镜的元素：filter和定义层级：z-index
（2）图层绘制
5、光栅化
所谓栅格化，就是指将图块转换为位图。通常用GPU来加速生成。
6、合成
将其页面内容绘制到内存中，最后再将内存显示在屏幕上
七、V8工作原理
栈空间和堆空间
首先，我们需要了解一下JavaScript的数据类型。
这里除了Object是引用类型的值，其他都是原始类型的值。
而栈空间和堆空间就是存放这两种不同的类型的值。
栈空间存放的是原始类型的数据值，堆空间是存放引用类型的值。
垃圾回收
我们分为栈空间和堆空间来看垃圾回收。
1、栈中的垃圾回收
在栈当中，使用记录当前执行状态的指针ESP，指向当前函数的执行上下文。 当一个函数执行结束之后，JavaScript 引擎会通过向下移动 ESP 来销毁该函数保存在栈中的执行上下文。
2、堆中的垃圾回收
堆中的垃圾回收，就需要用到垃圾回收器。 分别有主垃圾回收器和副垃圾回收器。
（1）主垃圾回收器
主垃圾回收器责老生代的垃圾回收，老生代当中存放的是生存时间长的对象。
使用标记 - 清除算法，从一组根元素开始遍历整租元素，能到达的元素就是活动对象，没有到达的元素就是垃圾数据。
另外，在清除之后，还需要用到标记 - 整理算法，因为标记清除后会产生大量不连续的内存碎片。所以需要整理算法。
（2）副垃圾回收器
副垃圾回收器负责新生代的垃圾回收，新生代当中存放的是生存时间短的对象。
使用Scavenge算法，把新生代空间对半划分为两个区域，一般是对象区域，一半是空闲区域。 在回收的时候，将要回收的标记，把剩下的存活的对象复制到另一个区域。
另外，JavaScript引擎采用了对象晋升策略，也就是经过两次垃圾回收依然还存活的对象，会被移动到老生区中。
八、页面循环系统
Promise
手把手教你实现符合PromiseA+规范的promise（测试完美通过）
九、HTTP
1、HTTP/1
HTTP/1当中虽然使用长连接和CDN实现域名分片机制，提高运输效率，但是依然还是存在队头阻塞问题。
队头阻塞就是在 TCP 传输过程中，由于单个数据包的丢失而造成的阻塞。
2、HTTP/2
HTTP/2当中的亮点就是多路复用，添加了二进制分帧层提高效率。另外，可以设置请求优先级、服务器推送和头部压缩这些手段都有助于提高效率。
但是，依然还是存在队头阻塞问题。TCP的队头阻塞，TCP传输过程中也是把一份数据分为多个数据包的。当其中一个数据包没有按照顺序返回，接收端会一直保持连接等待数据包返回，这时候就会阻塞后续请求。我认为，只要传输层是TCP协议，这个问题就一定会存在。
3、HTTP/3
HTTP/3使用了QUIC协议，这是基于UDP实现了类似TCP功能的协议。
十、浏览器安全
同源策略
所谓同源，即是两个URL的协议、域名和端口号都相同。
同源策略表现在三个层面：DOM层面、数据层面和网络层面。
XSS-跨站脚本攻击
XSS即是页面被注入恶意JavaScript脚本。恶意脚本能窃取cookie信息、监听用户行为、修改DOM和在页面内生成浮窗广告。
怎么阻止XSS攻击呢？
1、服务器对输入脚本进行过滤或者转码
2、充分利用CSP
3、使用HttpOnly属性
CSRG攻击
CSRG即是利用用户登陆状态，通过第三方站点做坏事。它能自动发起Get请求、Post请求以及引诱用户点击链接。
怎么如何阻止CSRF攻击呢？
1、充分利用好cookie的SameSite属性
2、验证请求的来源站点
3、利用CSRF Token
