「just-fe」前端基础指南，收集整理了前端开发需要掌握的基础知识，方便夯实基础，查漏补缺。

计算机网络

0. UDP

面向报文的协议，只是报文的搬运工，不对报文做任何拆分和拼接的操作。
发送端：应用层将数据传递给运输层的 UDP 协议，UDP 只会给数据增加一个 UDP 标识头，然后就传递给网络层。
接收端：网络层将数据传递给运输层，UDP 只去除 IP 报文头就传给应用层，不做任何处理
传输方式：一对一、一对多、多对多、多对一。支持单播、多播、广播。
特点：
- 不可靠：不需要建立和断开连接；收到什么就传递什么，不备份，不关心对方能否接收到。
- 无阻塞，一直以恒定的速度发送数据，可能导致丢包，但实时性能好。
- 高效：头部开销小，只要八个字节。

1. TCP

TCP 是一种面向连接(连接导向)的、可靠的、基于IP的传输层协议，全双工
HTTP 是无连接的，所以作为下层的 TCP 协议也是无连接的，虽然看似 TCP 将两端连接了起来，但是其实只是两端共同维护了一个状态
RTT：表示发送端发送数据到接收到对端数据所需的往返时间。

1.1 三次握手

三次握手的作用和意义：防止已失效的连接请求报文段突然又传送到了服务端，因而产生错误。 1.2 确保服务端，2.3 确保客户端

1.2 四次挥手

TCP协议是一种面向连接的、可靠的、基于字节流的运输层通信协议。全双工。意味着必须四次挥手。

1.3 ARQ 超时重传

只要 A 向 B 发送一段报文，都要停止发送并启动一个定时器，等待对端回应，在定时器时间内接收到对端应答就取消定时器并发送下一段报文。

1.4 TCP 和 http 的关系

TPC协议是传输层协议，主要解决数据如何在网络中传输，而HTTP是应用层协议，主要解决如何包装数据。

1.5 与服务器建立的连接是否会在一个 http 请求后断开？什么情况下断开？

http 1.0 会在一个 http 请求后断开。由于每次重新建立和断开会花费大量的开销，因此在 http 1.1 中默认支持 Connection: keep-alive，会在请求后保持一段时间的连接，除非手动设置 Connection：close

1.6 一个 TCP 连接可以对应几个 HTTP 请求？

根据上面的理解，一个 TCP 可以处理多个 HTTP 请求。

1.7 一个 TCP 链接可以同时发送 http 请求吗？(http 1.1)

单个 tcp 连接在同一时刻只能处理一个 http 请求。管线化可以支持多个 GET 同时发送，但是现代浏览器默认不开启。

1.8 为什么有的时候刷新页面不需要重新建立 SSL 连接？

TCP 连接有的时候会被浏览器和服务端维持一段时间。TCP 不需要重新建立，SSL 自然也会用之前的。

1.9 TCP 可以建立多个连接吗？

同一个 host 下，chrome 允许最多建立 6 个连接。

2.http

2.1 请求

请求行：请求方法字段、URL字段、HTTP协议版本字段。它们用空格分隔。
请求头：User-Agent、Accept、Host 等
空行
请求体

2.2 报文

响应行：协议版本、状态码、状态码的原因短语组成，例如HTTP/1.1 200 OK。
响应头：各种头。
空行
响应体

2.3 http 的常用头

1.通用首部（请求和响应都可以有）

Cache-Control 控制缓存
Transfer-Encoding 报文主体的传输编码格式
Connection 连接管理、逐条首部
Date 创建报文的日期

2.请求头部字段

Accept 客户端或者代理能够处理的媒体类型
If-Match 比较实体标记（ETage）
If-None-Match 比较实体标记（ETage）与 If-Match相反
If-Modified-Since 比较资源更新时间（Last-Modified）
If-Unmodified-Since比较资源更新时间（Last-Modified），与 If-Modified-Since相反
Authorization web的认证信息
Host 请求资源所在服务器
User-Agent 客户端程序信息
Referer 请求原始放的url

3.响应头部字段

ETag 能够表示资源唯一资源的字符串
Location 令客户端重定向的URI
Server 服务器的信息
Allow 资源可支持http请求的方法
Last-Modified 资源最后的修改资源
Expires 实体主体的过期资源
Content-Type 实体媒体类型

2.4 keep-alive（持久连接）

在早期的 http1.0/1.1 中，每次http请求都要创建一个连接。为了减少资源消耗、缩短响应时间，在后来的标准中，增加了重连机制。在http请求头中加入Connection: keep-alive来告诉对方这个请求响应完成后不要关闭，下一次咱们还用这个请求继续交流。

优点：

较少的CPU和内存的使用
允许请求和应答的HTTP管线化
降低拥塞控制（TCP连接减少了）
减少了后续请求的延迟（无需再进行握手）
报告错误无需关闭TCP连接

2.5 http 管线化( GET 请求)

HTTP管线化可以克服同域并行请求限制带来的阻塞，它是建立在持久连接之上，是把所有请求一并发给服务器，但是服务器需要按照顺序一个一个响应，而不是等到一个响应回来才能发下一个请求，这样就节省了很多请求到服务器的时间。不过，HTTP管线化仍旧有阻塞的问题，若上一响应迟迟不回，后面的响应都会被阻塞到。

2.6 常用 http 状态码

2xx 成功

200 成功
204 no content

3xx 重定向

301 永久重定向
304 not modified 资源未更改

4xx 客户端报错

400 bad request，请求报文存在错误
401 unauthorized 未认证
403 forbidden 被服务端拒绝访问
404 not found 在服务器未找到资源

5xx 服务器错误

500 服务端执行错误

2.7 浏览器从输入 URL 到渲染页面，发生了什么？

DNS 解析：浏览器缓存-> 本地 hosts -> 本地 DNS 缓存(路由器) -> 本地 DNS 服务器 -> 根域名服务器 -> 顶级域名服务器 -> 权威域名服务器
建立 TCP 连接，三次握手（如果是 https，会进行TLS握手）
发送 HTTP 请求，服务器处理请求，返回响应结果，浏览器会根据返回的状态码做出相应的处理。
关闭 TCP 连接，四次挥手
解析文件，如果是 gzip 会先解压。
浏览器渲染：将 html 内容转化为 DOM 树，如果有 css 构建 CSSOM 树，如果有 JS 会根据 async 和 defer 来下载和执行文件。
初始 HTML 完全加载后会触发 DOMContentLoaded 事件
DOM 树和 CSSOM 树开始生成 Render 树，确定页面元素布局，样式，
在 Render 树生成的过程中，浏览器调用 GPU 绘制页面，展示在屏幕上。

2.8 cookies, localStorage, sessionStorage, indexDB

cookies: 4k, 每个 domain 限制 20 个，请求头自动带 cookie 会浪费流量
localStorage: 5M, 永久存储，key-value 的形式
sessionStorage: 5M，当前会话存储，关闭页面清理
indexedDB: h5 纳入的标准，noSQL 数据库，快速读取。

2.9 samesite cookie

Google 提出的标准，为 Set-Cookie 的响应头增加 Samesite 属性。同站的 Cookie 只能作为第一方使用。有两个值，Strict 严格模式，任何情况下都不可能作为第三方的 Cookie;Lax 宽松模式，只有 Get 请求可以作为第三方的 Cookie

3. https 原理

对称加密：通信双方都使用一个秘钥进行加解密；(优点：性能好；缺点：首次发送秘钥容易被拦截)

非对称加密：私钥+公钥=秘钥对。私钥加密，公钥解密。通信之前双方把自己的公钥都先发给对方，对方再拿公钥加密数据响应给对方，到了对方那里再拿私钥解密。(优点：安全性高；缺点：慢，影响性能)

终极方案：两种加密方式结合，将对称加密的秘钥使用非对称加密的公钥进行加密，然后发送出去，接收方使用私钥解密得到对称加密的秘钥，然后双方使用对称加密来进行通信。

带来问题：中间人劫持。

解决方案：证书（CA）,证明身份，防止被中间人攻击。

如何验证证书：数字签名。用 CA 证书自带的 HASH 算法对证书的内容进行 HASH 得到一个摘要，再用 CA 的私钥加密，生成数字签名。如果别人把证书发过来的时候，我用同样的方法解密，对比不一样，就知道被篡改了。

4. http2 与 http

4.1 二进制分帧

帧：帧是 http2 最小的通信单位，请求与响应的消息由一个或多着帧组成。
流：存在于连接中的一个虚拟通道。流可以承载双向消息，每个流都有一个唯一的整数ID

HTTP/2 采用二进制格式传输数据，而非 HTTP 1.x 的文本格式，二进制协议解析起来更高效。

4.2 头部压缩

HTTP/1.x会在请求和响应中中重复地携带不常改变的、冗长的头部数据，给网络带来额外的负担。

http2 在客户端和服务端共同维护一个首部表来跟踪之前发送的键值对，在连接存续期内一直存在，由两端共同维护。新的首部字段会被添加活更新。

4.3 服务端推送

http2 可以直接由服务端把数据推送到客户端，无需客户端发起请求。客户端也有权利拒绝推送过来的数据。

4.4 多路复用

http2 同域名下的所有通信通过一个连接来完成。
同一个连接上可以承载任意数据量的双向通信。
数据以消息的方式发送，消息由一个或多个帧组成，帧以乱序发送，可以根据帧的首部流标识进行重新组装。

5. GET 和 POST 的区别

GET 用于获取信息，是无副作用的，是幂等的，且可缓存
POST 用于修改服务器上的数据，有副作用，非幂等，不可缓存

POST 两个数据包的问题，只是框架的行为，并不是 HTTP 的标准。

6. CDN 内容分发网络

访问通过 CDN 和不通过 CDN 有什么区别

CDN 缓存了服务器上的资源，用户就近获取，不通过 CDN 就会把压力和流量都发送到服务器上

2.回源

如果从边缘 CDN 上没有获取到资源，回到中心 CDN 找，最后回到源服务器查找资源。

3.api是否可以缓存

可以缓存 GET 请求，但是不适合缓存，因为经常更新

4.判断资源过期？跟新？

根据 HTTP 头部信息判断。主动推送和被动更新(回源)。

7. 前端安全 XSS，CSRF

7.1 XSS

XSS：跨站脚本攻击，一种代码注入的攻击。(可以获取 cookie，session 等)

存储型：将恶意代码提交到目标网站数据库，其他用户打开页面会读取相关数据。
反射型：构造特殊的 URL，其中包含恶意代码，用户打开链接时，服务端从 URL 中取出恶意代码拼接在 html 上返回，被浏览器执行后，会恶意窃取用户的数据发送到攻击者网站。
DOM型：构造特殊的 URL，其中包含恶意代码，用户打开链接时前端 js 从 url 中取出恶意代码并执行。

如何预防：

对 HTML 进行充分转义；改成纯前端渲染，代码和数据分离。
使用同源策略，禁止外域代码，禁止外域提交。
验证码。
cookie 设置为 http-only：js 代码无法读取 cookie

7.2 CSRF

CSRF：跨站请求伪造。诱导用户访问第三方页面，再向被攻击网站发送跨站请求。