🌟http 和HTTPS
相关链接：
http概念
超文本传输协议，是最广泛的一种网络协议，是客户端和服务端请求和应答的标准(TCP)，用于从服务器传输超文本到本地浏览器，使浏览器更加高效，减少网络传输量；
HTTPS概念
是以安全为目的的HTTP通道，简单讲是HTTP的安全版，即http+SSL层，HTTPS 的安全基础是 SSL，因此加密的详细内容就需要 SSL。
http和HTTPS区别
- http 传输的数据都是未加密的，是明文的。
- http 的连接很简单，是无状态的。
- HTTPS 协议需要 ca 证书，费用较高。
- HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、 身份认证的网络协议，比 http 协议安全。
- 使用不同的链接方式，端口也不同，一般而言，http 协议的端口为 80，HTTPS 的端口为 443。
一个完整的http事务（输入一个 URL,到这个页面显示，中间发生什么? ）
一次完整的HTTP事务是怎样一个过程？_yipiankongbai的专栏-CSDN博客
- 域名解析
- 发起TCP的3次握手
- 建立TCP连接后发起http请求
- 服务器响应http请求，浏览器得到html代码
- 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等）
- 浏览器对页面进行渲染呈现给用户
http2.0的优点
-
允许多路复用;
- 多路复用允许同时通过单一的http2.0 连接发起多重的请求-响应消息。有了二进制分帧机制后，http2.0 不再依赖多个TCP连接去实现多流并行了。每个数据流都拆分成很多互不依赖的帧，而这些帧可以交错（乱序发送），还可以分优先级，最后再在另一端把它们重新组合起来。
- 帧（frame） 代表最小的数据单位，每个帧会标识出该帧属于哪个流；
- 流（stream） 是多个帧组成的数据流
- 通过这个技术，可以避免 HTTP 旧版本中的队头阻塞问题，极大的提高传输性能。
-
二进制分帧;（http2.0下，高效传输数据原因所在）
-
首部压缩;
- 在http2.0中，HPACK 压缩格式对传输的 header 进行编码，减少了 header 的大小。并在两端维护了索引表，用于记录出现过的 header ，后面在传输过程中就可以传输已经记录过的 header 的键名，对端收到数据后就可以通过键名找到对应的值
-
服务器端push;
- 服务端可以在客户端某个请求后，主动push其他资源。
🌟TCP
tcp三次握手
- 第一次握手：客户端第一次发送一条连接请求数据，SYN = 1，ACK = 0就是代表建立连接请求，发送的具体数据第一个字节编号记为x，赋值seq
- 第二次握手：服务端收到请求后，返回客户端的SYN = 1,加上自己的确认号ACK=1,发送的具体数据第一个字节编号记为y，赋值seq，希望客户端下一次返回编号x + 1个字节为止的数据，记为ack = x + 1。
客户端得出客户端发送接收能力正常，服务端发送接收能力也都正常，但是此时服务器并不能确认客户端的接收能力是否正常
- 第三次握手：客户端收到服务端返回的请求确认后，再次发送数据，原封不动返回ACK = 1,这里就不需要再发送 SYN=1了，为什么呢？因为此时并不是跟服务端进行连接请求，而是连接确认，所以只需要返回ACK = 1代表确认，同样的，发送的具体数据第一个字节编号记为seq = x + 1，希望服务端下次传输的数据第一个字节编号记为ack = y + 1
为什么TCP建立连接时候，要进行3次握手，2次不行吗？
主要目的: 防止服务端一直等待，浪费资源；
TCP 和 UDP 的区别
- TCP 是面向连接的，udp 是无连接的（即发送数据前不需要先建立链接）。
- TCP 是面向连接的可靠性传输，而 UDP 是不可靠的。
- TCP 是面向字节流，UDP 面向报文
- TCP只能是1对1的，UDP支持1对1,1对多。
- TCP 的首部较大为 20 字节，而 UDP 只有 8 字节。
post 和 get 区别
相同点
- GET 和 POST 的底层也是 TCP/IP，GET/POST 都是 TCP 链接。
不同点
-
GET - 从指定的资源请求数据。 POST - 向指定的资源提交要被处理的数据。
-
GET 产生一个 TCP 数据包;POST 产生两个 TCP 数据包。
-
对于 GET 方式的请求，浏览器会把 http header 和 data 一并发送出去，服务器响应 200(返 回数据); 而对于 POST，浏览器先发送 header，服务器响应 100 continue，浏览器再发送 data，服务 器响应 200 ok(返回数据)。
-
get 和 post 在缓存方面的区别：
- get 请求类似于查找的过程，用户获取数据，可以不用每次都与数据库连接，所以可以使用 缓存。因此 get 请求适合于请求缓存。
- post 做的一般是修改和删除的工作，所以必须与数据库交互，所以不能使用缓存。
get请求传参长度的误区
- HTTP 协议未规定 GET 和 POST 的长度限制
- GET的最大长度显示是因为浏览器和 web 服务器限制了 URI 的长度；不同的浏览器和服务器不同，一般限制在 2~8K 之间，更加常见的是 1k 以内。
WebSocket 的实现和应用
概念
WebSocket 是 HTML5 中的协议，支持持久连续;
基于TCP的一个应用协议，与HTTP协议的关联之处在于websocket的握手数据被HTTP服务器当作HTTP包来处理，主要通过Update request HTTP包建立起连接，之后的通信全部使用websocket自己的协议。
客户端发送websocket的握手请求，请求报文头部如下
GET /uin=xxxxxxxx&appchi=xxxxxxxxx&token=XXXXXXXXXXXX HTTP/1.1
Host: server.example.cn:443
Connection: Upgrade
Pragma: no-cache
Cache-Control: no-cache
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36
Upgrade: websocket
Sec-WebSocket-Version: 13
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9
Cookie: user_id=XXXXX
Sec-WebSocket-Key: 1/2hTi/+eNURiekpNI4k5Q==
Sec-WebSocket-Extensions: permessage-deflate; client_max_window_bits
Sec-WebSocket-Protocol: binary, base64
注意：
- 第一行为请求的方法，类型必须为GET，协议版本号必须大于1.1
- Upgrade字段必须包含，值为websocket
- Connection字段必须包含，值为Upgrade
- Sec-WebSocket-Key字段必须包含 ，记录着握手过程中必不可少的键值。
- Sec-WebSocket-Protocol字段必须包含 ，记录着使用的子协议
- Origin（请求头）：Origin用来指明请求的来源，Origin头部主要用于保护Websocket服务器免受非授权的跨域脚本调用Websocket API的请求。也就是不想没被授权的跨域访问与服务器建立连接，服务器可以通过这个字段来判断来源的域并有选择的拒绝。
说一下浏览器缓存，缓存策略
在 Header 内的字段用于控制缓存机制 老方法 Expires，记录的绝对值 新方法 Cache-Control 多了一堆选项，记录的时间是相对值 获取缓存检测缓存是否过期，如果没过期取缓存，优先从内存，其次硬盘，如果过期，则与服务器协商缓存是否仍然可用，如果不可用则获取，可用取缓存
缓存分为两种:强缓存和协商缓存，根据响应的 header 内容来决定
强缓存相关字段有 expires，cache-control。如果 cache-control 与 expires 同时存在的 话，cache-control 的优先级高于 expires。 协商缓存相关字段有 Last-Modified/If-Modified-Since，Etag/If-None-Match
强缓存，协商缓存
| 缓存类型 | 状态码 | 是否发送到服务器 |
|---|---|---|
| 强缓存 | 200（from cache） | 否，直接从缓存取 |
| 协商缓存 | 304（not modified） | 是，通过服务器来告知缓存是否可用 |
浏览器架构
浏览器在生成页面的时候，会生成那两颗树?
构造两棵树，DOM 树和 CSSOM 规则树 当浏览器接收到服务器相应来的 HTML 文档后，会遍历文档节点，生成 DOM 树， CSSOM 规则树由浏览器解析 CSS 文件生成，
http状态码
304状态码
Not Modified 未修改。如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容(自上次 访问以来或者根据请求的条件)并没有改变，则服务器应当返回这个 304 状态码。
400 和 401、403 状态码
-
400 请求无效
- 提交数据的字段名称和类型与后台的实体不一致；
- 前端未将对象JSON.stringify转化成字符串；
-
401 用户未授权，token过期
-
403 服务器收到请求，但拒绝执行
fetch 发送 post 请求的时候，总是发送 2 次，第一次状态码是 204，第二次才成功?
用 fetch 的 post 请求的时候，导致 fetch 第一次发送了一个 Options 请求，询问服务器是否支持修改的请求头，如果服务器支持，则在第二次中发送真正的请求。
Cookie sessionStorage localStorage
Cookie、sessionStorage、localStorage
共同点 ： 都保存在浏览器端，且是同源的；
特点
-
Cookie： cookie数据 在浏览器和服务器间来回传递；而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie 数据还有路径(path)的概念，可以限制 cookie 只属于某个路径下；存储容量小，只有大约 4K 左右；
**Cookie的作用**：保存用户登录状态；跟踪用户行为；定制页面； -
sessionStorage：
- 存储在
sessionStorage里面的数据在页面会话结束时被清除； - 打开多个相同的URL的Tabs页面，会创建各自的
sessionStorage； - 页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话；关闭对应浏览器窗口（Window）/ tab，会清除对应的
sessionStorage； - 在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文；
- 存储在
// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');
// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');
// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');
// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();
- localStorage： 同源窗口都会共享，并且不会失效，不管窗口或者浏览器关闭与否都会始终生效；与session的区别是存储在
localStorage的数据可以长期保留；
Cookie 如何防范 XSS 攻击
XSS: 即为(Cross Site Scripting)(跨站脚本攻击)是指攻击者在返回的 HTML 中嵌入 javascript 脚本，为了减轻这些攻 击，需要在 HTTP 头部配上，set-cookie:httponly这个属性可以防止 XSS,它会禁止 javascript 脚本来访问 cookie。
扩展： secure - 这个属性告诉浏览器仅在请求为 https 的时候发送 cookie。
web worker
web worker是什么？
web worker 是运行在后台的 js，独立于其他脚本，不会影响页面你的性能。
并且通过 postMessage 将结果回传到主线程。这样在进行复杂操作的时候，就不会阻塞主线程了。
如何创建web worker？
- 检测浏览器对于 web worker 的支持性
- 创建 web worker 文件(js，回传函数等)
- 创建 web worker 对象
前端性能优化
- 减少 HTTP 请求:合并资源，减少 HTTP 请求数，minify / gzip 压缩，webP，lazyLoad。
- 加快请求速度:预解析 DNS，减少域名数，并行加载，CDN 分发。
- 缓存:HTTP 协议缓存请求，离线缓存 manifest，离线数据缓存 localStorage。
- 渲染:JS/CSS 优化，加载顺序，服务端渲染，pipeline
前端路由的两种方式
hash模式
监听浏览器地址hash值变化，执行相应的js切换网页；
history模式
利用history API实现url地址改变，网页内容改变；
区别
hash会在浏览器地址后面增加#号，而history可以自定义地址。
cdn 原理
CDN 的全称是 Content Delivery Network，即内容分发网络。CDN 的基本原理是广泛采用各种缓存服务器，将这些缓存服务器分布到用户访问相对集中的地区或网络中，在用户访 问网站时，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓 存服务器直接响
