2019中高級前端秘籍之服務(wù)端與網(wǎng)絡(luò)篇

2019中高級前端秘籍之CSS篇
 2019中高級前端秘籍之JavaScript篇
 2019中高級前端秘籍之瀏覽器篇
 2019中高級前端秘籍之服務(wù)端與網(wǎng)絡(luò)篇
 2019中高級前端秘籍之算法篇

1. http/https 協(xié)議

1.0 協(xié)議缺陷:
- 無法復(fù)用鏈接先朦，完成即斷開，重新慢啟動和 TCP 3次握手
- head of line blocking: 線頭阻塞喳魏，導(dǎo)致請求之間互相影響
1.1 改進(jìn):
- 長連接(默認(rèn) keep-alive)，復(fù)用
- host 字段指定對應(yīng)的虛擬站點
- 新增功能:
  - 斷點續(xù)傳
  - 身份認(rèn)證
  - 狀態(tài)管理
  - cache 緩存
    - Cache-Control
    - Expires
    - Last-Modified
    - Etag
2.0:
- 多路復(fù)用
- 二進(jìn)制分幀層: 應(yīng)用層和傳輸層之間
- 首部壓縮
- 服務(wù)端推送
https: 較為安全的網(wǎng)絡(luò)傳輸協(xié)議
- 證書(公鑰)
- SSL 加密
- 端口 443
TCP:
- 三次握手
- 四次揮手
- 滑動窗口: 流量控制
- 擁塞處理
  - 慢開始
  - 擁塞避免
  - 快速重傳
  - 快速恢復(fù)
緩存策略: 可分為 強(qiáng)緩存 和 協(xié)商緩存
- Cache-Control/Expires: 瀏覽器判斷緩存是否過期迷郑，未過期時创倔，直接使用強(qiáng)緩存，Cache-Control的 max-age 優(yōu)先級高于 Expires
- 當(dāng)緩存已經(jīng)過期時霸妹，使用協(xié)商緩存
  - 唯一標(biāo)識方案: Etag(response 攜帶) & If-None-Match(request攜帶知押，上一次返回的 Etag): 服務(wù)器判斷資源是否被修改鹃骂，
  - 最后一次修改時間: Last-Modified(response) & If-Modified-Since (request罢绽，上一次返回的Last-Modified)
    - 如果一致，則直接返回 304 通知瀏覽器使用緩存
    - 如不一致良价，則服務(wù)端返回新的資源
- Last-Modified 缺點：
  - 周期性修改，但內(nèi)容未變時杯矩，會導(dǎo)致緩存失效
  - 最小粒度只到 s袖外， s 以內(nèi)的改動無法檢測到
- Etag 的優(yōu)先級高于 Last-Modified

2. 常見狀態(tài)碼

1xx: 接受魂务，繼續(xù)處理
200: 成功，并返回數(shù)據(jù)
201: 已創(chuàng)建
202: 已接受
203: 成為粘姜，但未授權(quán)
204: 成功，無內(nèi)容
205: 成功豺裆，重置內(nèi)容
206: 成功号显，部分內(nèi)容
301: 永久移動臭猜，重定向
302: 臨時移動押蚤，可使用原有URI
304: 資源未修改揽碘，可使用緩存
305: 需代理訪問
400: 請求語法錯誤
401: 要求身份認(rèn)證
403: 拒絕請求
404: 資源不存在
500: 服務(wù)器錯誤

3. get / post

get: 緩存、請求長度受限劫灶、會被歷史保存記錄
- 無副作用(不修改資源)掖桦，冪等(請求次數(shù)與資源無關(guān))的場景
post: 安全滞详、大數(shù)據(jù)紊馏、更多編碼類型

兩者詳細(xì)對比如下圖:

4. Websocket

Websocket 是一個 持久化的協(xié)議赫编，基于 http ，服務(wù)端可以 主動 push

兼容：
- FLASH Socket
- 長輪詢：定時發(fā)送 ajax
- long poll：發(fā)送 --> 有消息時再 response
new WebSocket(url)
ws.onerror = fn
ws.onclose = fn
ws.onopen = fn
ws.onmessage = fn
ws.send()

5. TCP三次握手

建立連接前嘹吨，客戶端和服務(wù)端需要通過握手來確認(rèn)對方:

客戶端發(fā)送 syn(同步序列編號) 請求境氢，進(jìn)入 syn_send 狀態(tài)萍聊，等待確認(rèn)
服務(wù)端接收并確認(rèn) syn 包后發(fā)送 syn+ack 包，進(jìn)入 syn_recv 狀態(tài)
客戶端接收 syn+ack 包后寿桨，發(fā)送 ack 包，雙方進(jìn)入 established 狀態(tài)

6. TCP四次揮手

客戶端 -- FIN --> 服務(wù)端挡鞍， FIN—WAIT
服務(wù)端 -- ACK --> 客戶端媒佣， CLOSE-WAIT
服務(wù)端 -- ACK,FIN --> 客戶端， LAST-ACK
客戶端 -- ACK --> 服務(wù)端默伍，CLOSED

7. Node 的 Event Loop: 6個階段

timer 階段: 執(zhí)行到期的setTimeout / setInterval隊列回調(diào)
I/O 階段: 執(zhí)行上輪循環(huán)殘流的callback
idle, prepare
poll: 等待回調(diào)
- 1. 執(zhí)行回調(diào)
- 1. 執(zhí)行定時器
  - 如有到期的setTimeout / setInterval，則返回 timer 階段
  - 如有setImmediate炼蹦，則前往 check 階段
check
- 執(zhí)行setImmediate
close callbacks

跨域

JSONP: 利用<script>標(biāo)簽不受跨域限制的特點狸剃，缺點是只能支持 get 請求

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)
}

設(shè)置 CORS: Access-Control-Allow-Origin：*
postMessage

安全

XSS攻擊: 注入惡意代碼
- cookie 設(shè)置 httpOnly
- 轉(zhuǎn)義頁面上的輸入內(nèi)容和輸出內(nèi)容
CSRF: 跨站請求偽造，防護(hù):
- get 不修改數(shù)據(jù)
- 不被第三方網(wǎng)站訪問到用戶的 cookie
- 設(shè)置白名單虑省，不被第三方網(wǎng)站請求
- 請求校驗

作者：郭東東
鏈接：https://juejin.im/post/5c64d15d6fb9a049d37f9c20
來源：掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)探颈，非商業(yè)轉(zhuǎn)載請注明出處。