一、浏览器中输入 url 后发生了什么

哔哩哔哩

1.合成 URL，进行网络请求
2.DNS 域名解析
3.建立 TCP 链接，三次握手
4.发送 HTTP 请求，服务器处理请求，返回响应结果
5.关闭 TCP 链接四次挥手，网络请求结束
6.浏览器进程拿到请求结果，解析响应头，准备渲染进程，提交文档
7 渲染进程渲染解析 HTML

1.合成 URL

浏览器 UI 线程会根据输入的内容进行判断，如果符合 URL 规则，浏览器会根据协议合成合法的 URL，通知网络进程进行连接请求。如果是搜索内容，就会用默认引擎进行搜索

2. DNS 域名解析

当我们在浏览器中键入 URL：www.google.com/ 时，浏览器会先去寻找该域名所对应的 IP 地址。

1.从浏览器的缓存中查找
2.本地 hosts 文件查找
3.找本地 DNS 解析器缓存查找（路由器缓存中）
4.本地 DNS 服务器查找
5.如果这时候还没得话，会通过直接去 DNS 根服务器查询，这一步查询会找出负责 com 这个一级域名的服务器
6.然后去该服务器查询 google.com 这个二级域名
7.接下来查询 www.google.com 这个三级域名的地址
8.返回给 DNS 客户端并缓存起来

以上介绍的是 DNS 递归查询，还有种是迭代查询，区别就是前者是由系统配置的 DNS 服务器做请求，得到结果后将数据返回给客户端；后者由客户端去做请求。

客户端-本地 dns 服务端：这部分属于递归查询。

本地 dns 服务端---外网：这部分属于迭代查询。

递归：客户端只发一次请求，要求对方给出最终结果。
迭代：客户端发出一次请求，对方如果没有授权回答，它就会返回一个能解答这个查询的其它名称服务器列表，
```
    客户端会再向返回的列表中发出请求，直到找到最终负责所查域名的名称服务器，从它得到最终结果。
```
授权回答：向 dns 服务器查询一个域名，刚好这个域名是本服务器负责，返回的结果就是授权回答。

3.TCP 建立链接三次握手

首先判断是不是 https 协议， HTTPS 其实是 HTTP + SSL/TLS 两部分组成，也就是在 HTTP 上又加了一层加密信息模块。服务端和客户端的信息传输都会通过 TLS 进行加密，所以传输的数据都是加密后的数据。 TCP 的三次握手与四次挥手理解及面试题

TCP 链接握手

最开始服务端和客户端都是 CLOSED 状态。双方会创建 TCB。服务器创建完后进入 LISTEN 状态，等待客户端发送数据

三次握手.jpg

第一次握手

客户端向服务端发送连接请求报文段(SYN)，请求发送后，客户端便进入 SYN-SENT 状态，等待服务器的确认；

将 SYN 位置为 1，Sequence Number 为 x；

第二次握手

服务端收到连接请求报文段后，需要对这个 SYN 报文段进行确认.如果同意连接，则会发送一个应答(ACK + SYN),将 SYN 位置为 1，该应答中也会包含自身的数据通讯初始序号，发送完成后便进入 SYN-RECEIVED 状态。

第三次握手

客户端收到连接同意的应答后，收到服务器的 SYN+ACK 报文段。还要向服务端发送一个确认报文(ACK)，这个报文段发送完毕以后，客户端和服务器端都进入 ESTABLISHED 状态

ssl 握手过程

第一阶段建立安全能力包括协议版本会话 Id 密码构件压缩方法和初始随机数
第二阶段服务器发送证书密钥交换数据和证书请求，最后发送请求-相应阶段的结束信号
第三阶段如果有证书请求客户端发送此证书之后客户端发送密钥交换数据也可以发送证书验证消息
第四阶段变更密码构件和结束握手协议
完成了之后，客户端和服务器端就可以开始传送数据。

备注

ESTABLISHED： 已确立的

ACK：此标志表示应答域有效，就是说前面所说的TCP应答号将会包含在TCP数据包中；有两个取值：0和1，为1的时候表示应答域有效，反之为0。TCP协议规定，只有ACK=1时有效，也规定连接建立后所有发送的报文的ACK必须为1。

SYN(SYNchronization)：在连接建立时用来同步序号。当SYN=1而ACK=0时，表明这是一个连接请求报文。对方若同意建立连接，则应在响应报文中使SYN=1和ACK=1. 因此, SYN置1就表示这是一个连接请求或连接接受报文。

问题

为什么 TCP 需要三次而不是两次握手？

因为这是为了防止失效的连接请求报文段被服务端接收，从而产生错误。就是第三次握手还需要向服务端发送一个确认的报文

如果客户端发送了一个链接请求 A,因为网络问题造成了超时， 这个时候 TCP 会启动超时重传机制再次发送要给请求 B。如果请求 A 在两端都关闭后才到达服务端，那么服务端认为客户端需要再次建立 TCP 链接，从而应答了请求并进入了 ESTABLISHED状态。此时客户端是 CLOSED 状态，会导致服务端一直等待，造成资源浪费

PS: 在建立链接的过程中，任意一端掉线 TCP 都会重发 SYN 包，一般会重试五次，在建立连接中可能会遇到 SYN FLOOD 攻击。遇到这种情况你可以选择调低重试次数或者干脆在不能处理的情况下拒绝请求。

当建立连接并请求完成后，TCP 连接并不会马上断开。得益于 HTTP 1.1 协议中的 keep-alive 属性，连接可以短暂的保留一段时间，具体如何断开得看服务端的设置或者客户端主动 close 掉。

4.发送 HTTP 请求，服务器处理请求，返回响应结果

发送 HTTP 请求

TCP 连接建立后，浏览器就可以利用 HTTP／HTTPS 协议向服务器发送请求了。完整的 http 请求包括请求起始行，请求头部，请求主题

请求行

Method Request-URL HTTP-Version CRLF

服务器处理请求，返回响应结果

服务器接受到请求，就解析请求头，
如果头部有缓存相关信息，如 if-none-match 与 if-modified-since 则验证缓存是否有效，
若有效则返回状态码 304，若无效则重新返回资源，状态码 200

HTTP 响应报文也是由三部分组成: 状态码, 响应报头和响应报文。

5.关闭 TCP 链接四次挥手

TCP四次挥手.jpg

第一次挥手：客户端 A 向服务端 B 发送释放链接请求，发送一个 FIN 报文段；此时客户端进去 FIN_WAIT_1 状态
第二次挥手：服务端 B 收到链接释放请求后，会发送 ACK 包，并进入到 CLOSE_WAIT 状态。 表示同意释放请求。此时服务端 B 不会接收 a 发的数据了，但是因为 TCP 链接是双向的，B 还可以给 A 发送数据
第三次挥手：服务端 B 向 A 发送 FIN 报文段，请求关闭链接，B 进去 LAST_ACK 状态
第四次挥手： A 收到释放请求后，向 B 发送确认应答，此时 A 进入 TIME-WAIT 状态。 该状态会持续 2MSL（最大段生存期，指报文段在网络中生存的时间，超时会被抛弃）时间，若该时间段内没有 B 的重发请求的话，就进入 CLOSED 状态。当 B 收到确认应答后，也便进入 CLOSED 状态。

为什么 A 要进入 TIME-WAIT 状态，等待 2MSL 时间后才进入 CLOSED 状态？

为了保证 B 能收到 A 的确认应答。若 A 发完确认应答后直接进入 CLOSED 状态，如果确认应答因为网络问题一直没有到达，那么会造成 B 不能正常关闭。

6.解析响应头，提交文档

如果响应头的 content-type: text/html。那么就会准备一个渲染进程，准备渲染。如果是一个 application/octet-stream,字节流类型的数据，会被提交给浏览器的下载管理器。
浏览器根据规则准备渲染进程，一般一个 tab 标签有一个渲染进程，但是同站点不同的 tab 标签使用的是同一个渲染进程。
提交文档，也就是返回的响应数据

1.浏览器会发送一个 '提交文档'的信息给渲染进程，渲染进程接受到这个信息后，会和网络进程建立传输数据的管道。

2.当数据传输完成后，渲染进程会给浏览器进程返回一个 确认提交 的信息。

3.浏览器进程接受到这个信息后，会更新浏览器界面的状态，包括了安全状态、地址栏的 URL、前进后退的历史状态，并且更新 Web 页面

4.这也就解释了为什么在浏览器的地址栏里面输入了一个地址后，之前的页面没有立马消失，而是要加载一会儿才会更新页面。

7.浏览器渲染

浏览器解析渲染页面.jpg

浏览器是一个边解析边渲染的过程

按照渲染的时间顺序，流水线可分为以下几个阶段：构建 DOM 树、样式树计算、页面布局、分层、栅格化和显示

1.渲染进程将 HTML 内容转化换为能够读懂的 DOM 树结构
2.渲染引擎将 CSS 样式表转换为浏览器可以理解的 styleSheets，浏览器也有默认样式表。计算出 DOM 节点的样式。
3.(Layout) 创建布局树，并计算元素的布局信息。也就是遍历 DOM 树 CSS 树生成渲染树.构建一棵只包含可见元素布局树
4.对布局树进行分层，并生成分层树 LayerTree。
5.Paint 为每个图层生成绘制列表，并将其提交到合成线程。上面几步都是在主线程上的，重绘和回流都是

绘制列表只是用来记录绘制顺序和绘制指令的列表，而实际上绘制操作是由渲染引擎中的合成线程来完成。
6.合成线程将图层分图块，因为这些图层太大了，这些图块的大小通常是 256x256 或者 512x512，，并栅格化这些图块转换成位图。
7.合成线程发送绘制图块 DrawQuad 命令给浏览器进程。浏览器进程根据指令生成页面，并显示到显示器上。
7.合成器线程收集了 DrawQuads 图块信息(在内存中的位置，和页面的位置信息),根据这个信息生成合成器帧，然后通过 IPC 进程传送给浏览器进程，传送到 GPU 进程渲染到屏幕上。

构建 DOM 树

字节 -> 字符 -> 令牌 -> 节点 -> 对象模型

dom解析过程.jpg 浏览器从网络或硬盘中获得 HTML 字节数据后会经过一个流程将字节解析为 DOM 树,

先将 HTML 的原始字节数据转换为文件指定编码的字符,
然后浏览器会根据 HTML 规范来将字符串转换成各种令牌标签，
然后将令牌转换为定义其属性和规则的 Node 节点对象。
最重要的工作是建立起每个结点的父子兄弟关系，最终解析成一个树状的对象模型，就是 dom 树。

样式计算

渲染引擎将 CSS 样式表转化为浏览器可以理解的 styleSheets，计算出 DOM 节点的样式。

需要将所有值转换为渲染引擎容易理解的、标准化的计算值，这个过程就是属性值标准化。处理完成后再处理样式的继承和层叠，有些文章将这个过程称为 CSSOM 的构建过程。

页面布局（Layout Tree）

布局过程，即排除 script、meta 等功能化、非视觉节点，排除 display: none 的节点，计算元素的位置信息，确定元素的位置，构建一棵只包含可见元素布局树

图层，栅格化

主线程遍历 layout tree 生成 layer tree。然后把它传递给合成 compositor 线程。合成线程将图层分图块，发送给栅格化线程进行栅格化。并将它们存储在 GPU 内存中

（栅格化的线程还是在渲染进程当中的）
当栅格化完成后，合成线程会生成一个 DrawQuad 的命令

图层树

渲染引擎还需要为特定的节点生成专用的图层，并生成一棵对应的图层树（LayerTree）。如果一个节点没有对应的层，那么这个节点就从属于父节点的图层。

对每个图层的节点计算样式结果

为每个节点绘制填充到图层的位图中（Paint)

显示

最后，合成线程发送绘制图块命令给浏览器进程。浏览器进程根据指令生成页面，并显示到显示器上，渲染过程完成。

二、计算机网络的模型 TCP

4 层模型(TCP/IP)

应用层（FTP,HTTP），传输层(TCP/UDP)，网络层(IP)，网络接口层(链路层)

链路层

用来处理连接网络的硬件部分。包括操作系统，硬件的设备驱动，网络适配器，光纤等物理可见部分。

http 请求发送的大概过程

当客户端通过 http 发起一个请求时，各层的相关协议依次对该请求进行包装，并携带对应的头部，最终在链路层生成以太网数据包，数据包通过物理介质「光纤等」传输给对方主机，对方接到数据包后，再一层层的采用对应的协议进行拆包，最后把应用层数据交给应用程序去处理。

TCP 和 UDP 的区别

TCP

特点

面向连接，全双工：双向传输
基于字节流传输，不限制数据大小，打包成报文段，保证有序接受，重复报文自动丢弃
可靠性传输服务：保证可达，丢包重发。
流量缓冲：解决双方处理能力的不匹配（滑动窗口）。主要作用于接受方，保证对方来得及接受数据。
拥塞控制：防止网络出现恶性拥塞。防止过多的数据拥塞网络，避免出现网络负载过大的情况

三次握手中的报文

SYN 同步序列号建立连接的报文。发送 seq: x；响应 x+1； seq 的值就是保证接受包的顺序；
ACK 响应的报文。
FIN 关闭连接的报文

字节流传输

TCP 根据对方窗口值和当前网络拥堵程度来决定一个报文段应该包含多少个字节。默认（526）字节

ARQ 协议 也就是超时、重传机制协议。

停止等待 ARQ
连续等待 ARQ

区别

概括一下区别： TCP 是一个面向连接的、可靠的、基于字节流的传输层协议。

而 UDP 是一个面向无连接的传输层协议。(就这么简单，其它 TCP 的特性也就没有了)。

，TCP 被用于金融领域，如 FIX 协议是一种基于 TCP 的协议，而 UDP 是大量使用在游戏和娱乐直播，语音通话领域，查询域名。

1.TCP 是面向对接的协议；UDP 是无连接协议，
2.可靠性 TCP 更加可靠，在传输过程中丢失后，将会重发。UDP 不提供保证，接收到什么就传输什么，不会备份数据，不关心对方能否接收到。
1. 有序性TCP 保证了消息的有序性，即使到达客户端顺序不同，TCP 也会排序。UDP 不提供有序性保证。
4.UDP 高效性首部开销小，仅 8 字节，TCP 首部最小 20 字节，最大 60 字节

TCP 为啥是可靠的

数据排序
确认和重传机制，丢包，会重传
滑动窗口使用流量控制：窗口和计时器的使用。TCP 窗口中会指明双方能够发送接收的最大数据量
拥塞控制

TCP 挥手为啥会有 TIME_WAIT 状态 2MSL 才会返回到 CLOSE 状态

2MSL 两个报文最长存在时间

如果第四次挥手，客户端发送最后一个 ACK 包后就释放连接，如果它丢失，服务端就会一直处在等待状态
如果客户端没有收到最后一次的 ACK 包，会重发 FIN 包，客户端会再次发送 ACK 包，然后继续等待关闭，所以需要 2MSL。

哪些协议使用了 TCP 和 UDP

FTP、HTTP、HTTPS 等使用了 TCP,
DNS、DHCP、TFTP 等使用了 UDP

如何预防点击劫持，x-frame-option 是什么？

点击劫持

它是通过覆盖不可见的框架误导受害者点击。

x-frame-option

响应头是用来给浏览器指示允许一个页面可否在 , 或者中展现的标记。网站可以使用此功能，来确保自己网站的内容没有被嵌套到别人的网站中去，也从而避免了点击劫持 (clickjacking) 的攻击。

DENY 该页面不允许在 iframe 页面中展示
SAMEORIGIN 允许同域的 frame
ALLOW-FROM http://whsir.com/ 指定来源的页面

CDN（Content Delivery Network，内容分发网络）的原理

客户端请求资源时，向本地 LDNS 发起域名解析请求。如果有，则直接返回请求，如果没有授权 DNS 查询
当授权解析后，返回域名 CNAME 对应的 IP 地址

三、HTTP 协议

HTTP 的特点

无状态
明文传输即协议里的报文(主要指的是头部)不使用二进制数据，而是文本形式
队头阻塞当 http 开启长连接时，共用一个 TCP 连接，同一时刻只能处理一个请求，那么当前请求耗时过长的情况下，其它的请求只能处于阻塞状态，也就是著名的队头阻塞问题。

说说 http 中的缓存（为什么很多站点第二次打开速度会很快）

浏览器缓存

也称 Http 缓存，分为强缓存和协商缓存。优先级较高的是强缓存，在命中强缓存失败的情况下，才会走协商缓存。

1.强缓存 200(from cache)

强缓存是利用 http 头中的 Expires 和 Cache-Control 两个字段来控制的。强缓存中，当请求再次发出时，浏览器会根据其中的 expires 和 cache-control 判断目标资源是否“命中”强缓存，若命中则直接从缓存中获取资源，不会再与服务端发生通信。

1.第一步：判断当前缓存是否过期,没有过期不会与服务端发生通信直接启用缓存中的文件

2.第二步：如果缓存过期了，会发送一个请求看文件有没有修改，如果没有修改的话会返回304继续使用缓存文件

expires

实现强缓存，过去我们一直用 expires。当服务器返回响应时，在 Response Headers 中将过期时间写入 expires 字段。expires: Wed, 12 Sep 2019 06:12:18 GMT
当再次向服务器请求该资源的时候，浏览器会拿本地时间和 expires 时间进行对比，如果本地时间小于 expires 时间的话。那么就会直接去缓存中取这个资源。
因为是拿本地时间做对比，所以 expires 具有它的局限性

Cache-Control

因为 expires 的局限性，HTTP1.1 新增了 Cache-Control 字段来完成 expires 的任务。
cache-control: max-age=31536000 max-age 不是个时间戳而是一个时间长度
Cache-Control 相对于 expires 更加准确，它的优先级也更高。当 Cache-Control 与 expires 同时出现时，我们以 Cache-Control 为准。

Cache-Control 的值 no-cache 和 max-age等于 0 的区别。

no-store 彻底禁用缓存，每次都要从浏览器中获取。
no-cache可以在本地缓存，可以在代理服务器缓存，但是这个缓存要服务器验证才可以使用，也可以返回 304。
max-age > 0 的时候直接从浏览器的缓存中读取
max-age <=0 的时候向服务端发送 http 请求前，在重新获取资源之前，先检验 ETag/Last-Modified，确认该资源有无被修改，有的话返回 200，没有的话还是返回 304

2.协商缓存

协商缓存依赖于客户端和服务端的通信。客户端向服务端去询问缓存的信息，如果服务端提示未修改的话，资源会被重定向到浏览器缓存，状态码为304。协商缓存判断有 Last-Modified 和 Etag

Last-Modified

会在首次请求后的 Response Headers 中返回: Last-Modified: Fri, 27 Oct 2017 06:35:57 GMT
随后的请求时，会带上一个叫 If-Modified-Since 的时间戳字段，它的值正是上一次 response 返回给它的 last-modified 值：
服务端会比较这个该时间戳和服务器上最后修改时间是否一致，从而判断是否发生变化。

弊端

1.编辑了文件但是文件内容没有变，还是会触发一次请求。服务端并不清楚我们是否真正改变了文件，它仍然通过最后编辑时间进行判断。因此这个资源在再次被请求时，会被当做新资源，进而引发一次完整的响应——不该重新请求的时候，也会重新请求。
2.If-Modified-Since 只能检查到以秒为最小单位的时间差，如果修改时间为 100ms,是感知不到这个改动，所以不会重新发起请求

Etag

Etag 是由服务器为每个资源生成的唯一的标识字符串，这个标识字符串可以是基于文件内容编码的，只要文件内容不同，它们对应的 Etag 就是不同的，反之亦然。因此 Etag 能够精准地感知文件的变化。**读取上次缓存的 ETag 值，将其作为 If-None-Match 的值，并与请求数据一同发送给服务端。**服务器对比 If-None-Match 的值

弊端

Etag 的生成过程需要服务器额外付出开销，会影响服务端的性能

Etag 在感知文件变化上比 Last-Modified 更加准确，优先级也更高。当 Etag 和 Last-Modified 同时存在时，以 Etag 为准。

缓存方案

HTML: 协商缓存；
css、js、图片：强缓存，文件名带上 hash。

刷新对缓存的影响

当 ctrl+f5 强制刷新网页时，直接从服务器加载，跳过强缓存和协商缓存。
当 f5 刷新网页时，跳过强缓存，但是会检查协商缓存。
浏览器地址栏中写入 URL，回车浏览器发现缓存中有这个文件了，不用继续请求了，直接去缓存拿。（最快）

说说 HTTP1 和 HTTP1.1 和 HTTP2 的区别和 HTTP3 的区别

1. HTTP1.x

缺陷：线程阻塞，在同一时间，同一域名的请求有一定数量限制，超过限制数目的请求会被阻塞

2. Http1.0

缺陷：浏览器与服务器只保持短暂的连接，浏览器的每次请求都需要与服务器建立一个 TCP 连接（TCP 连接的新建成本很高，因为需要客户端和服务器三次握手），

服务器完成请求处理后立即断开 TCP 连接，服务器不跟踪每个客户也不记录过去的请求；解决方案：添加头信息——非标准的 Connection 字段 Connection: keep-alive

3. HTTP1.1

持久连接 TCP 连接默认不关闭，可以被多个请求复用，不用声明 Connection: keep-alive(对于同一个域名，大多数浏览器允许同时建立 6 个持久连接)
新增请求方式 PUT,DELETE,OPTIONS
问题浏览器中限制了同一个域名下的请求数量，队头阻塞（Head of line blocking）会导致在达到最大请求数量时，剩余的资源需要等待其他资源加载完成后才能发出请求

4. HTTP2

头部压缩多路复用服务器推送

采用二进制格式而非文本格式；
完全多路复用 多路复用，解决了 HTTP 队头阻塞。也就是解决了同一个域名下最多 6 个请求的上限。
Header 压缩 HTTP 协议是无状态的协议，每次请求都会带上重复的请求头比如 cookie。HTTP2 对这一点做了优化，引入了头信息压缩机制，头信息使用 gzip 或 compress 压缩后再发送；另一方面，客户端和服务器同时维护一张头信息表，所有字段都会存入这个表，产生一个索引号，之后就不发送同样字段了，只需发送索引号。
服务器推送：服务器已经不再是完全被动地接收请求，响应请求，它也能新建 stream 来给客户端发送消息，（谷歌弃用了）

5.HTTP3 （QUIC）

基于 UDP 协议，增加了多路复用，TLS1.3 加密、流量控制、有序交付、重传等功能。

多路复用：传输的单个数据流可以保证有序交付且不会影响其他的数据流。

HTTPS+HTTP2.0+TCP 版本的 UDP。解决 TCP 对头阻塞的问题。

TCP 的队头阻塞是在数据包层面，单位是数据包，前一个报文没有收到便不会将后面收到的报文上传给 HTTP。如果有丢包的现象就会造成阻塞。

说说 HTTP 和 HTTPS 的区别，以及 HTTPS 的连接过程

// juejin.cn/post/695576…

1.什么是 HTTPS?

HTTPS 就是在 HTTP 上建立一个加密层，并对传输数据进行加密，是 HTTP 协议的安全版。 HTTP + SSL/TSL
TLS（传输层安全）是更为安全的升级版 SSL。位于传输层之上，应用层之下

2.为什么要用 HTTPS

HTTP 在和服务端通信的时候，直接采用明文传输，容易被监听和篡改
HTTP 和服务通信时无法验证身份，容易产生钓鱼事件

3.HTTPS 的加密原理是什么

对称加密

两端都有相同的密匙，都知道如何对文件进行加密解密

非对称加密

公钥和私钥之分，使用公钥对文件数据进行加密，私钥进行解密。私钥只有分发公钥的一方才知道

4. HTTPS 的连接过程

浏览器向服务器发起请求；
目标服务器收到请求后，将 数字证书 返回给浏览器（服务端公钥 B+和数字签名）。
浏览器收到证书后，验证证书是否有效。如果有效则继续下一步。（这一步是为了验证身份防止被劫持）
浏览器从证书里面取出服务端的 公钥B+，然后在本地生成一个密钥 x,接着利用对这个密钥进行加密传输给服务器。
服务器收到数据后，利用 私钥B- 对数据进行解密，取得密钥 x;
然后双方通信通过，密钥 x 加密后进行。

状态码

2XX 表示成功

200 OK，表示从客户端发来的请求在服务器端被正确处理
204 No content，表示请求成功，但响应报文不含实体的主体部分
205 Reset Content，表示请求成功，但响应报文不含实体的主体部分，但是与 204 响应不同在于要求请求方重置内容
206 Partial Content，进行范围请求

3XX 重定向

301 moved permanently，永久性重定向，表示资源已被分配了新的 URL
302 found，临时性重定向，表示资源临时被分配了新的 URL
303 see other，表示资源存在着另一个 URL，应使用 GET 方法获取资源
304 not modified，表示服务器允许访问资源，但因发生请求未满足条件的情况
307 temporary redirect，临时重定向，和 302 含义类似，但是期望客户端保持请求方法不变向新的地址发出请求

4xx 客户端错误

400 bad request，请求报文存在语法错误
401 unauthorized，表示发送的请求需要有通过 HTTP 认证的认证信息
403 forbidden，表示对请求资源的访问被服务器拒绝
404 not found，表示在服务器上没有找到请求的资源

5xx 服务端的错误

500 internal sever error，表示服务器端在执行请求时发生了错误
502 Bad Gateway: 网关或者代理服务器执行请求时，收到无效响应
501 Not Implemented，表示服务器不支持当前请求所需要的某个功能
503 service unavailable，表明服务器暂时处于超负载或正在停机维护，无法处理请求
504 : 服务器请求超时

说说 http 中的状态码

200 请求成功，3 开头的重定向比如 301 永久重定向和 302 临时重定向等还有 304 缓存

说说 HTTP 中的请求方法

GET: 通常用来获取资源
POST: 提交数据
PUT: 修改数据
HEAD: 获取资源的元信息
DELETE: 删除资源
OPTIONS: 用来跨域请求
TRACE: 响应请求

GET 和 POST 的区别

语义上不同，get 通常用来获取数据，post 通常用来提交数据
GET 在浏览器回退时是无害的，而 POST 会再次提交请求。
缓存： GET 请求会被浏览器主动缓存，POST 默认不会
编码： GET 只能进行 URL 编码，只能接收 ASCII 字符，而 POST 没有限制
历史： GET 参数保留在浏览器历史中。POST 不会

304 和 302 和 301 有什么区别

301 永久性重定向，比如公司的域名换了，主要用来做域名跳转
302 主要用来做临时的跳转比如跳转登录 location 字段
304 是请求的资源未被修改可以在缓存中拿到。

说说 http 的请求头

http 的首部有响应首部和请求首部

通用的字段

Cache-Control: 控制缓存的行为
Connection: 浏览器想要优先使用的连接类型，比如 keep-alive、close
Date: 创建报文的时间
Transfer-Encoding: 传输编码方式

请求头

Accept: 能正确接收的媒体类型
Accept-Charset: 能正确接收的字符集
Accept-Encoding: 能正确接收的编码格式列表
Accept-Language: 能正确接收的语言列表
Host: 服务器的域名
User-Agent: 客户端信息
Referer: 表示浏览器所访问的前一个页面
If-Modified-Since: 本地资源未修改返回 304（比较时间)
If-None-Match: 本地资源未修改返回 304（比较标记）
Cookie: 当前网站的 cookie

响应头

Server: 服务器名字
Location: 客户端重定向到某个 URL
ETag: 资源标识
Age: 资源在代理缓存中存在的时间
content-type: 告诉客户端实际返回的内容的内容类型。
Content-Encoding: 内容的编码格式
Content-Language: 内容使用的语言
Content-Length: request body 长度
Content-Type: 内容的媒体类型
Expires：内容的过期时间
Last_modified：内容的最后修改时间

顺着请求头说一说 content-type

application/x-www-form-urlencoded
multipart/form-data 表单上传可以用来上传文件
application/json
text/xml
text/html
text/javascript
text/css
image/jpge 等

四、浏览器原理

1.Chrome 打开一个页面需要启动哪些进程

浏览器主进程：主要负责界面显示、用户交互、子进程管理，同时提供存储等功能
网络进程：主要负责页面的网络资源加载，
GPU 进程：只是随后网页、Chrome 的 UI 界面都选择采用 GPU 来绘制，这使得 GPU 成为浏览器普遍的需求
渲染进程：核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页，排版引擎 Blink 和 JavaScript 引擎 V8 都是运行在该进程中
插件进程：主要是负责插件的运行，因插件易崩溃，所以需要通过插件进程来隔离，以保证插件进程崩溃不会对浏览器和页面造成影响。

后续再新开标签页浏览器进程，网络进程和 GPU 进程是共享的不会重新启动，如果 2 个页面属于同一站点的话，并且从 a 页面中打开的 b 页面，那么他们也会共用一个渲染进程，否则新开一个渲染进程。

2.浏览器缓存，什么时候内存会存到磁盘中，什么时候保存在内存中

from Memory Cache 或者 from disk cache

具体机制不太知道；应该是当资源不太大，而且内存空间比较充足的时候写在内存中

1、先查找内存，如果内存中存在，从内存中加载； 2、如果内存中未查找到，选择硬盘获取，如果硬盘中有，从硬盘中加载； 3、如果硬盘中未查找到，那就进行网络请求； 4、加载到的资源缓存到硬盘和内存；

3.浏览器解析文档过程中阻塞情况

4. 为什么操作 DOM 慢，

因为 DOM 是属于渲染引擎中的东西，而 JS 又是 JS 引擎中的东西。当我们通过 JS 操作 DOM 的时候，其实这个操作涉及到了两个线程之间的通信，那么势必会带来一些性能上的损耗。操作 DOM 次数一多，也就等同于一直在进行线程之间的通信，并且操作 DOM 可能还会带来重绘回流的情况，所以也就导致了性能上的问题。

6. 浏览器加载时候的阻塞行为。

css 不会阻塞 Dom 的解析，但 css 加载会阻塞 DOM 树渲染，css 加载会阻塞后面 js 语句的执行、

这就是因为浏览器在渲染的时候，会分别生成 DOM 树 和 css树,所以解析不会阻塞。但是DOM 和css树合并在一起形成渲染树后才开始渲染，
所以会阻塞渲染。

js 会影响 dom 和 css 的解析
外链的 js 加上 defer，表示 js 文件会并行下载，但是会放到 html 解析后顺序执行,需要在 DOMContentLoaded 事件之前执行。
外链的 js 加上 async， JS 文件下载和解析不会阻塞渲染，使用 async 标志的脚本文件一旦加载完成，会立即执行；。

7.js 为什么会影响 dom 解析

html 解析器遇到 js 会暂停工作， js 引擎介入工作。
所以渲染引擎在遇到 JavaScript 脚本时，不管该脚本是否操纵了 CSSOM，都会执行 CSS 文件下载，

8.重绘(Repaint) 和回流(Reflow)

重绘是当节点需要更改外观而不会影响布局的，比如改变 color 就叫称为重绘
回流是布局或者几何属性需要改变就称为回流。
回流必定会发生重绘，重绘不一定会引发回流。合成
(transform)避开重排和重绘阶段，直接在非主线程上执行合成动画操作。这样的效率是最高的

9.怎么插入几万个 DOM

对于这道题目来说，首先我们肯定不能一次性把几万个 DOM 全部插入，这样肯定会造成卡顿，所以解决问题的重点应该是如何分批次部分渲染 DOM。大部分人应该可以想到通过 requestAnimationFrame 的方式去循环的插入 DOM，其实还有种方式去解决这个问题：虚拟滚动（virtualized scroller）。
这种技术的原理就是只渲染可视区域内的内容，非可见区域的那就完全不渲染了，当用户在滚动的时候就实时去替换渲染的内容

会导致回流的的操作

怎么查看浏览器的回流More tools -> Rending -> Paint flashing

浏览器窗口发生变化
元素尺寸或者位置发生变化
元素内容发生变化，例如文字多出一行或者少出一行
字体大小变化
删除或者添加元素
激活 CSS 伪类，例如 hover，鼠标滑过
滚动
常见的几何属性有 width、height、padding、margin、left、top、border 等等。
最容易被忽略的操作：获取一些需要通过即时计算得到的属性,当你要用到像这样的属性：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight 时，浏览器为了获取这些值，也会进行回流。
当我们调用了 getComputedStyle 方法，或者 IE 里的 currentStyle 时，也会触发回流。原理是一样的，都为求一个“即时性”和“准确性”。

如何避免回流

避免使用 table 布局。table 中任何一个元素变动都会影响到全局，而且他的改变，会导致在它之前的元素重绘。
js 修改样式的时候不要逐条修改，最后是通过 class 类名的方式一起修改
如果实现动画，优先确保父级元素定位。多使用 transform-translate.
有的浏览器还会将 transform 元素提升到单独的图层，跳过重绘回流的计算，使用 GPU 加速帮助提高动画更新的效率。所以可以设置一个 translateZ(0)

9.跨域

原因

浏览器处于安全考虑，有同源策略."并不一定是浏览器限制了发起跨站请求，也可能是跨站请求可以正常发起,但是返回结果被浏览器拦截了
如果协议，ip，端口有一个不同就是跨域

解决方案

1.JSONP 的原理，就是利用 script 标签没有跨域限制的漏洞，通过 script 标签请求接口并提供一个回调函数来接收数据

JSONP 只支持 GET 请求； XMLHttpRequest 相对于 JSONP 有着更好的错误处理机制

<script type="text/javascript">
  function dosomething(data) {
    //处理获得的数据
  }
</script>
<script src="http://example.com/data.php?callback=dosomething"></script>

2.CORS

后台设置：Access-Control-Allow-Origin: *

简单请求： GET HEAD POST

Content-Type:text/plain multipart/form-data application/x-www-form-urlencoded

复杂请求

在正式通信之前，增加一次 HTTP 查询请求，称为"预检"请求,该请求是 option 方法的，通过该请求来知道服务端是否允许跨域请求。

3.postMessage IE8+，

4. node 代理

5.nginx 反向代理

10.如何保证页面文件能够完整的总打浏览器

1.数据包发送到主机

2.主机将数据包转交给应用

3.数据包完整的送达应用

安全问题

XSS 跨站脚本攻击

在浏览器中执行恶意脚本，存储型、反射型、文档型（一个信念两个利用）

转义用户输入的内容
利用浏览器的安全内容 CSP
利用 Cookie 的 HttpOnly 属性

CSRF 跨站请求伪造

黑客引诱用户点击外链，提交本地 cookie 信息，伪造用户发送请求。

cookie 中的 samesite 设置为 Strict 完全禁止第三方请求携带 cookie
验证来源站点(可以伪造不推荐)
设置 token

浏览器的本地存储

cookie,localStorage,sessionStorage,indexedDB

Cookie

存储大小比较小，最大为 4k
在同一个域名下每次请求都会携带上 cookie
cookie 是明文的能被劫持，所以要设置 httpOnly

webStoreage

存储量比较大，最大大概是 5M
操作方法简单 setItem，getItem.
不参与服务器端的通信
两个的区别是 localStorage 是持久性存储，而 sessionStorage 是会话级存储，当前会话页面关闭后就消失。

indexedDB

运行在浏览器端的非关系型数据库，理论上没有存储的上限
异步操作。数据库读写属于 I/O 操作
同源限制

四、git

1.切换分支

// 查看分支
git branch -a
// 切换分支
git checkout -b dev origin/dev
//
git merge dev

网络基础知识整理