四.[前端总结]之服务端与⽹络篇

1. http/https 协议

1.0 协议缺陷:

 ⽆法复⽤链接，完成即断开，重新慢启动和 TCP 3 次握⼿

head of line blocking : 线头阻塞，导致请求之间互相影响

1.1 改进:

 ⻓连接(默认 keep-alive )，复⽤

host 字段指定对应的虚拟站点新增功能:

断点续传身份认证状态管理

cache 缓 存

Cache-Control Expires

Last-Modified Etag

2.0: 

多路复⽤

⼆进制分帧层: 应⽤层和传输层之间

⾸部压缩服务端推送

https: 较为安全的⽹络传输协议

　　证书(公钥)

　　SSL 加 密

　　端 ⼝ 443

TCP:

三次握⼿

四次挥⼿

滑动窗⼝: 流量控制

拥 塞 处 理

　　 慢开始

　　拥塞避免

　　快速重传

　　快速恢复

缓存策略: 可分为 强缓存 和 协商缓存

强缓存

　　Cache-Control/Expires : 浏览器判断缓存是否过期，未过期时，直接使⽤强缓存，

　　Cache-Control 的 max-age 优先级⾼于 Expires

当缓存已经过期时，使⽤协商缓存

　　唯⼀标识⽅案: Etag ( response 携带) & If-None-Match ( request 携带，上⼀次返回的 Etag ): 服务器判断资源是否被修改

　　最后⼀次修改时间: Last-Modified(response) & If-Modified-Since ( request ， 上⼀次返回的 Last-Modified )

　　　　如果⼀致，则直接返回 304 通知浏览器使⽤缓存

　　　　如不⼀致，则服务端返回新的资源

　　Last-Modified 缺 点 ：

　　　　周期性修改，但内容未变时，会导致缓存失效   

　　　　最⼩粒度只到 s ， s 以内的改动⽆法检测到

　　Etag 的优先级⾼于 Last-Modified

2.常⻅状态码

1xx : 接受，继续处理

200 : 成功，并返回数据

201 : 已创建

202 : 已接受

203 : 成为，但未授权

204 : 成功，⽆内容

205 : 成功，重置内容

206 : 成功，部分内容

301 : 永久移动，重定向

302 : 临时移动，可使⽤原有URI

304 : 资源未修改，可使⽤缓存

305 : 需代理访问

400 : 请求语法错误

401 : 要求身份认证

403 : 拒绝请求

404 : 资源不存在

500 : 服务器错误

3. get / post

get : 缓存、请求⻓度受限、会被历史保存记录

　　⽆副作⽤(不修改资源)，幂等(请求次数与资源⽆关)的场景

post : 安全、⼤数据、更多编码类型

4. Websocket

Websocket 是⼀个 持久化的协议， 基于 http ， 服务端可以 主动 push

兼容：

　　FLASH Socket

　　⻓轮询： 定时发送 ajax

　　long poll ： 发送 --> 有消息时再 response

new WebSocket(url)

ws.onerror = fn

ws.onclose = fn

ws.onopen = fn

ws.onmessage = fn

ws.send()

5.TCP三次握⼿

建⽴连接前，客户端和服务端需要通过握⼿来确认对⽅:

　　客户端发送 syn (同步序列编号) 请求，进⼊ syn_send 状态，等待确认

　　服务端接收并确认 syn 包后发送 syn+ack 包，进⼊ syn_recv 状态

　　客户端接收 syn+ack 包后，发送 ack 包，双⽅进⼊ established 状态

6.TCP四次挥⼿

客户端 -- FIN --> 服务端， FIN—WAIT

服务端 -- ACK --> 客户端， CLOSE-WAIT

服务端 -- ACK,FIN --> 客户端， LAST-ACK

客户端 -- ACK --> 服务端，CLOSED

7.Node 的 Event Loop: 6个阶段

timer 阶段: 执⾏到期的 setTimeout / setInterval 队列回调

I/O 阶段: 执⾏上轮循环残流的 callback

idle , prepare

poll : 等待回调

　　1. 执⾏回调

　　2. 执⾏定时器

　　　　如有到期的 setTimeout / setInterval ， 则返回 timer 阶段

　　　　如有 setImmediate ，则前往 check 阶段

check

　　执 ⾏ setImmediate

close callbacks

8.跨域

JSONP : 利⽤ <script> 标签不受跨域限制的特点，缺点是只能⽀持 get 请求

js

function jsonp(url, jsonpCallback, success) {

　　const script = document.createElement('script') script.src = url

　　script.async = true

　　script.type = 'text/javascript' window[jsonpCallback] =     
    
     function(data) {

        success && success(data)

    }

    document.body.appendChild(script)

}

设 置 CORS: Access-Control-Allow-Origin：*

postMessage

9. 安全

XSS 攻击: 注⼊恶意代码

　　cookie 设 置 httpOnly

　　转义⻚⾯上的输⼊内容和输出内容

CSRF : 跨站请求伪造，防护:

　　get 不修改数据

　　不被第三⽅⽹站访问到⽤户的 cookie

　　设置⽩名单，不被第三⽅⽹站请求

　　请求校验