这是我参与「第四届青训营 」笔记创作活动的第11天

三. 场景分析

静态资源

缓存策略：

• 强缓存
• cash-control：一年

其他信息：

• 允许所有域名访问
• 资源类型：CSS

---

静态资源方案：缓存+CDN+文件名hash

• CDN：Content Delivery Network
• 通过用户就近性和服务器负载的判断，CDN确保内容以一种极为高效的方式为用户的请求提供服务

登录

• CORS
• 代理服务器
  • 同源策略是浏览器的安全策略,不是HTTP的
• Iframe
  • 诸多不便

HTTP默认端口号是80，HTTPS默认端口号是443

鉴权

• Session+cookie

• JWT(JSON Web token)

跨域

• CORS (Cross-Origin Resource Sharing)

• 预请求:获知服务端是否允许该跨源请求(复杂请求)

• 相关协议头

  • Access-Control-Allow-Origin
  • Access-Control-Expose-Headers
  • Access-Control-Max-Age
  • Access-Control-Allow-Credentials
  • Access-Control-Allow-Methods
  • Access-Control-Allow-Headers
  • Access-Control-Request-Method
  • Access-Control-Request-Headers
  • Origin

四. 实战

浏览器

AJAX之XHR

• XNR:XMLHttpReuest
• readyState

AJAX之Fetch

• XMLHttpRequet的升级版
• 使用Promise
• 模块化设计，Response，Request，Header对象
• 通过数据流处理对象，支持分块读取

node

标准库：HTTP/HTTPS

• 默认模块，无需安装其他依赖
• 功能有限/不是十分友好

常用的请求库：axios

• 支持浏览器、nodejs环境
• 丰富的拦截器

用户体验

网络优化

稳定性

• 重试是保证稳定的有效手段，但要防止加剧恶劣情况
• 缓存合理使用，作为最后一道防线

五. 扩展

WebSocket

• 浏览器与服务器进行全双工通讯的网络技术
• 典型场景:实时性要求高，例如聊天室
• URL使用WS://或WSS://等开头

QUIC: Quick UDP Internet Connection

• 0-RTT建联(首次建联除外)。
• 类似TCP的可靠传输。
• 类似TLS的加密传输，支持完美前向安全。
• 用户空间的拥塞控制，最新的BBR算法。
• 支持h2的基于流的多路复用，但没有TCP的HOL问题。
• 前向纠错FEC。
• 类似MPTCP的Connection migration。