有关浏览器运行的知识进程和线程浏览器进程浏览器进程：主要负责界面显示、用户交互、子进程管理、同时提供存储等功能渲染

参考学习链接

进程和线程

浏览器是多进程的，一个页面挂掉了，并不影响第二个页面。

浏览器进程

浏览器进程至少四个：浏览器主进程、GPU进程、网络进程、渲染进程

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

注：可以在浏览器的任务管理器中查看

计算机网络

OSI七层模型

OSI七层网络模型	TCP/IP四层概念模型	对应网络协议
应用层	应用层	HTTP、TFTP、NFS、WAIS、SMTP
表示层	应用层	Telnet、Rlogin、SNMP、Gopher
会话层	应用层	SMTP、DNS
传输层	传输层	TCP、UDP
网络层	网络层	IP、ICMP、ARP、RARP、AKP、UUCP
数据链路层	数据链路层	FDDI、Ethernet、Arpanet、PDN、SLIP、PPP
物理层	数据链路层	IEEE 802.1A、IEEE 802.2到IEEE 802.11

TCP协议

序列号
- 序号seq 的作用，当TCP数据包过大时，分段传送(1,2,3...10)--按顺序重组
确认号
- 确认号：ack 服务器能够回应?存在于确认消息中，跟序号的关系？ seq=j;ack =j+1;表示服务器期望收到的下一个包的序号。
标志位

TCP协议和UDP协议的区别

特征点	TCP	UDP
是否连接	面向连接	面向非连接
传输可靠性	可靠	会丢包，不可靠
数据量大小	传输数据量大	传输量小
速度	慢	快

HTTP协议

HTTP(Hyper Text Transfer Protocol) 超文本传输协议。

HTTP协议是基于TCP协议，默认端口80。
功能：用来规定客户端和服务器端的数据传输格式。
特点：基于请求和响应模式的、无状态的、无连接的应用层协议

请求头

请求头字段	作用
User-Agent	产生请求的客户端类型--windows，浏览器版本（内核），反爬虫机制
Accept	客户端可识别的内容列表
Accept-Encoding	客户端使用的编码环境和编码方式
Accept-Language	客户端语言环境
Connection	表示是否需要持久连接（keep-alive）
Cache-control	缓存机制：Cache-control
Host	请求的主机名，允许多个域名同处一个IP地址，即虚拟主机
Referer	表示该次请求的来源，一般用于做防盗链
Cookie	这个与服务做交互，存储保持会话的重要信息--login（用户名+密码）
Content-type	传给服务器内容的格式，请求体的内容类型

响应头

响应头字段	作用
Server	http服务器的软件信息
Date	响应报文的时间
Expires	指定缓存过期时间
Set-Cookies	设置cookies，服务器返回的文本
Last-modify	资源最后修改时间
Content-type	响应的类型和字符集；比如content-type：text/html；charset = utf-8
Content-length	内容长度
Connection	一般是keep-alive，保持TCP连接不关闭，但是不会长久保持连接，服务器可设置
Location	指明重定向的设置。新的URL地址

响应状态码

HTTP：无连接应用协议

限制每次连接只处理一个请求。
服务器处理完客户的请求，并收到客户的应答后，即断开连接。

设计初衷: 用户量(十万，百万)请求页面，单个用户间隙性大(突发性，瞬时性)，设计的时候请求的时候连接，请求完毕之后释放连接。

网页越来越复杂，有图片相关的资源，开启Connection:keep-alive，会发起Keep-Alive的连接

Keep-alive设置

开启：Connection:keep-alive,会发起Keep-Alive的连接请求--长连接。HTTP1.1默认打开的。
关闭：在Http头中设置Connection:close，即可关闭。
设置连接时间：在http header中设置Keep-Alive:timeout=5,max=1000
- timeout是超时时间，单位秒，超过这个时间后就断开连接--释放
- max是最多的连接次数，若超过这个次数就强制断开连接

什么是无状态协议

服务器对事物处理没有记忆能力，服务器不知道客户端是什么状态；给服务器发送HTTP请求之后，服务器回应之后，不会有任何记录。
每个请求都是独立的
服务器处理后续请求，需要重传

优点 : 释放了服务器的压力。缺点：重传--重复的内容，增大了数据量--资源。

HTTP与HTTPS的区别

	HTTP	HTTPS
安全性	明文传输，易受攻击；无法确认双方身份，也无法保证数据的完整性-安全性低	使用ssl加密传输协议，信息是密文，可以认证双发的身份，防止信息被截取篡改--安全性高
TCP端口	80	443
灵活度	简单快速，使用很灵活	技术门槛较高，多数个人或私人网站难以支撑
速度	协议简单，HTTP服务器的程序规模小，因而通信速度很快	加重了服务器的负担，需要更多的资源来支撑，降低了用户的访问速度
经济适用度	没有额外的费用要求	CA机构颁发的证书都是需要年费的，此外对接Https协议也需要额外的技术支撑

HTTP请求流程

第一步：构造请求
- 首先，浏览器构造请求行
第二步：查看有无缓存
- 有缓存则取缓存，没有缓存则发送网络请求
第三步：准备IP地址和端口
- 负责把域名和IP地址做--映射关系，这套域名映射为IP的系统叫做"域名系统"，简称DNS
- 第一步浏览器会请求 DNS 返回域名对应的 IP。当然浏览器还提供了 DNS 数据缓存服务，如果某个域名已经解析过了，那么浏览器会缓存解析的结果，以供下次查询时直接使用，这样也会减少一次网络请求
第四步：等待TCP队列
- Chrome有机制，同一个域名只能建立6个TCP连接
第五步：建立TCP连接
- 排队结束，建立TCP连接，如果有的话可以用之前那个
第六步：发送请求
第七步：返回请求
第八步：断开连接（可能不断开），看是否设置了Connection:keep-alive

输入url地址到浏览器显示页面发生了什么

浏览器进程接收到用户输入的URL请求，浏览器进程便将URL转发给网络进程
网络进程中发起真正的URL请求
网络进程接收到响应头数据，便解析响应头数据，并将数据转发给浏览器进程。
浏览器进程接收到网络进程的响应头数据之后，发送"提交文档"消息到渲染进程；
渲染进程接收到"提交文档"的消息之后，便开始准备接收HTML数据，接收数据的方式是直接和网络进程建立数据管道。
等文档数据传输完成之后，渲染进程会返回“确认提交”的消息给浏览器进程；
浏览器进程接收到渲染进程"确认提交"的消息之后，便开始移除之前旧的文档，然后更新浏览器进程中的页面状态。

注：提交文档，就是浏览器主进程，将网络进程接收到的HTML数据提交给渲染进程。

重排重绘和浏览器渲染过程

附链接

css阻塞和js阻塞

<style>：
- 阻塞页面渲染，但不阻塞DOM渲染
- 如果有一个<div>first</div>在内联样式之前，会先展示 first ，然后加载内联样式，后面dom的渲染被卡住，
- css样式使用HTML解析器
- 通过style标签引入会一边解析，一边渲染（可能出现闪屏）
<link>
- 阻塞页面渲染，但不阻塞DOM渲染
- css样式使用CSS解析器
- 阻塞后面的js语句的执行
- DOM解析完毕之后，要等待CSS解析完成，才开始浏览器渲染（避免闪屏）
<script>
- 阻塞DOM渲染，阻塞页面渲染
- 阻塞后续JS运行

如何提高css加载速度

使用cdn加速
减少http请求，将多个css文件合并
压缩css文件

注：

css的解析和JS的执行都互斥的，css解析的时候js停止执行，js执行的时候css停止解析。
无论css阻塞，或js阻塞，都不会阻塞浏览器加载外部资源(图片，视频，样式，脚本)。因为浏览始终处于一种“先把请求发送出去”的工作模式，只要涉及到网络请求的内容，无论是：图片，样式，脚本，都会先发送请求去获取资源，至于资源到本地之后什么时候用，由浏览器自己去协调。

Cookie、localStorage、sessionStorage

Cookie 可设置的字段

maxAge：表示 cookie 的有效时长
expires：cookie 过期时间
path：cookie 路径，默认是'/'，如果设置了其它比如 /news，表示当访问 /news 的时候才设置这个 cookie
domain：cookie域名，正常情况下不要设置，当有很多个子域名的时候可以这样设置 .baidu.com (这样表示 baidu.com 下的子域名，比如 a.baidu.com 获取 b.baidu.com )
secure：安全 cookie 默认 false ，设置成 true 表示只有 https 可以访问
httpOnly：是否只是服务器可访问 cookies ，默认是 true

监听 localStorage 变化

window.addEventListener('storage',function(){
    ...
})

三者区别

特征	Cookie	localStorage (HTML5)	sessionStorage (HTML5)
数据的生命期	一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效	除非被清除，否则永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小	4k左右	一般5MB
与服务器端通信	每次都会携带在HTTP头中，如果使用cookie保存过多的数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信
易用性	需要程序员自己封装，源生的Cookie接口不友好	源生接口可以接收，亦可以再次封装来对Object和Array有更好的支持

WebSocket（HTML5）

websocket 目的是在浏览器和服务器之间建立一个不受限的双向通信的通道(就是浏览器可以向服务器发请求，服务器也可以向浏览器发请求)

强缓存和协商缓存

强缓存不会向服务器发请求，协商缓存会

强缓存（1，3）协商缓存（2，6和4，5）

强缓存

在响应头中设置

当Cache-Control和Expires共存时，Cache-Control的优先级更高

Expires (强缓存的到期时间) 该字段是 http1.0 时的规范，它的值是一个绝对时间的GMT格式的时间字符串，比如 e 。这个时间表示这个资源的失效时间，如果发送的请求在此时间之前，即命中缓存。否则就会发送http请求
Cache-Control (强缓存的保质期) 该字段是在 http1.1 时出现的 header 信息，主要是利用该字段的 max-age 值来进行判断，它是一个相对时间，例如 Cache-Control:max-age=3600 ，表示资源的有效时间是3600秒，cache-control 除了该字段外，还有下面几个比较常用的设置值：
- no-cache：需要进行协商缓存，发送请求到服务器确认是否使用缓存
- no-store：禁止使用缓存，每一次都要重新请求数据
- public：可以被所有的用户缓存，包括终端用户和 CDN 等中间代理服务器
- private：只能被终端用户的浏览器缓存，不允许 CDN 等中继缓存服务器对其缓存

协商缓存

Last-Modified / If-Modified-Since：二者都是GMT格式的时间字符串

2. **Etag / If-None-Match**：资源唯一标识符字符串(HTTP1.1) 判断过程与上面类似

为什么有了Last-Modified 还出现了 Etag

利用Etag能够更加准确的控制缓存，因为Etag是服务器自动生成或由开发者生成的对应

HTTP1.1中Etag的出现主要为了解决 Last-Modified 的以下问题

一些文件也许是周期性的更改，但它的内容并不改变（仅仅改变了修改的时间），如果使用Last-Modified因为它以时间为标识，所有就存在重新请求的情况，但使用Etag就不会存在重新请求的情况
某些文件修改非常频繁，比如在秒以下的时间内容进行了修改（比如一秒修改了n次），If-Modified-Since不能检查到
某些服务器不能请求到文件最后修改时间

HTTP0.9、HTTP1.0、HTTP1.0、HTTP2.0

HTTP0.9（1991）

当时的需求很简单,就是用来传输体积很小的HTML文件，所以HTTP/0.9实现有以下三个特点:

只有一个请求行，并没有HTTP请求头及请求体。因为只需要一个请求行，就可以完整表达客户端的需求。
服务器也没有返回响应头信息，这是因为服务器并不需要告诉客户端什么信息，只需要返回数据。
返回的文件内容是以ASII字符流传输的，因为都是HTML格式的，所以使用ASCII字节码来传输最合适

HTTP1.0

HTTP/1.0的方案是通过请求头和响应头进行协商，在发起请求时会通过HTTP请求头告诉服务器它期待服务器返回什么类型的文件，采取什么形式压缩，提供什么语言的文件以及文件的具体编码

HTTP/1.0除了对多文件提供良好的支持，还依据当时的实际需求引入了很多其他特性，这些特性都是通过请求头和响应头来实现的。

有的请求服务器可能无法处理，或者处理出错，这时候需要告诉浏览器服务器最终处理该请求的情况，这就引入了状态码。状态码通过响应行的方式来通知浏览器的。
为了减轻服务器的压力，在HTTP/1.0中提供了Cache机制，用来缓存已经下载过的数据。
服务器需要统计客户端的基础信息，比如windows和macOS的用户数量分别是多少，所以HTTP/1.0的请求头中还加入了用户代理的字段。

HTTP1.1

改进持久连接：打开(connection:keep-alive)，关闭(connection:close)
不成熟的HTTP管线化
提供虚拟主机支持：HTTP/1.1 的请求中增加了Host字段，用来表示当前的域名地址，这样服务器就可以根据不同的Host值做不同的处理。
客户端Cookie，安全机制

HTTP2.0

核心：多路复用

HTTP/2添加了一个二进制分帧层，结合上图分析HTTP/2的请求和响应过程。

浏览器准备好请求数据，包括请求行，请求头信息，如果是POST方法，那么还要请求体。
这些数据经过二进制分帧层处理后，会被转换为一个个带有请求ID编号的帧，通过协议栈将这些发送给服务器
服务器接收到所有帧之后，会将所有相同ID的帧合并为一条完整的请求信息。
之后服务器处理该请求，将处理的响应行，响应头和响应体分别发送至二进制分帧层。
同样，二进制层会将这些响应数据转换为一个个带有请求ID编号的帧，经过协议栈发送给浏览器。
浏览器接收到响应帧之后，会根据ID编号将帧的数据提交给对应的请求。

从以上流程可以看出，通过引入二进制分帧层，就实现了HTTP的多路复用技术。

其他特性

可以设置请求的优先级：浏览器中有些数据是非常重要的。但是可能存在以下请求，发送请求时，重要的请求可能会晚于那些不怎么重要的请求，如果服务器按照请求顺序来回复数据，那么那个重要的数据可能会推迟很久才能送达浏览器，这对用用户体验非常不好。
服务器推送：除了设置请求的优先级，HTTP/2还可以直接将数据提前推送给浏览器。想象以下场景，用用户请求一个HTML页面之后，服务器知道该HTML页面会引用几个重要的JavaScript文件和CSS文件，那么在接收到HTML请求之后，附带将要使用的CSS文件和JavaScript文件一并发送给浏览器，这样当浏览器解析完HTML文件之后，就能直接拿到需要的CSS文件和JavaScript文件，这样可以加快页面的打开速度。
头部压缩： HTTP/2对请求头和响应头进行了压缩。你可能觉得一个HTTP的头部文件没有多个，压缩不压缩也没关系，但是你可以想一下，在浏览器发送请求的时候，基本上都是发送HTTP请求头，很少发送请求体，通信清晰下也没也有100个左右的资源，如果将这100个请求头的数据压缩为原来的20%，那么传输效率肯定能得到大幅提升。

网络安全

同源策略

如果两个url的协议，子域名，主域名，端口号都相同，我们就称这两个URL同源

跨站脚本攻击（XXS）

XSS攻击就是黑客往页面恶意注入脚本,然后将页面的一些重要数据上传到恶意服务器。常见的三种XSS攻击模式是:

存储型XSS攻击：将攻击脚本存入服务端，用户获取数据时，运行恶意脚本
反射型XSS攻击：将恶意脚本传给服务端，服务端返回客户端运行
基于DOM的XSS攻击：

这三种方式共同的特点都是需要往页面中注入恶意脚本，然后再通过恶意脚本将用户数据上传都黑客的恶意服务上。而三者的不同点在于注入的方式不一样，有通过服务器漏洞注入，还有客户端直接注入的。

如何阻止

服务器对输入的脚本进行过滤和转码
使用 CSP 策略：CSP
httpOnly：设置为 true，浏览器端不能读取 cookie 除了上面我们提及的三种防范策略外，我们还可以通过添加验证码防止脚本冒充用户提交危险操作，而对于一些不受信任的输入，还可以限制其输入长度，这样就可以增大XSS攻击的难度。

跨站请求伪造（CSRF）

盗用用户登录状态