场景分析-静态资源
静态资源方案：
缓存+CDN+文件名hash
CDN
(内容分发网络)： 指的是一组分布在各个地区的服务器。这些服务器存储着数据的副本，因此服务器可以根据哪些服务器与用户距离最近，来满足数据的请求。CDNs 提供快速服务，较少受高流量影响。
CDNs 被广泛用于传输 stylesheets 和 JavaScript 等静态资源，像 Bootstrap，Jquery 等。对这些库文件使用 CDN 技术，有以下几点好处：
- 通过 CDN 向用户分发传输相关库的静态资源文件，可以降低我们自身服务器的请求压力。
- 大多数 CDN 在全球都有服务器，所以 CDNs 上的服务器在地理位置上可能比你自己的服务器更接近你的用户。地理距离会按比例影响延迟。
- CDNs 已经配置了恰当的缓存设置。使用 CDN 节省了在你的服务器中对静态资源文件的配置。
场景分析-登录
账号密码登录：
打开工作台-network-勾选preserve log-过滤quick_login-有不同的method
-
向什么地址做了什么动作?
使用POST方法
目标域名https : //sso.toutiao.com·目标path /quick_login/v2/
-
携带了哪些信息，返回了哪些信息
携带信息
**** Post body，数据格式为form·希望获取的数据格式为json·已有的cookie
返回信息
数据格式json 种cookie的信息
-
把登录信息到其他页面上进行
SSO：单点登录（Single Sign On）
场景分析-跨域
跨域的判定
port被省略可以
跨域
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
跨域解决方案
- CORS
- 代理服务器
- 同源策略是浏览器的安全策略,不是HTTP的
- lframe
实战
浏览器篇
AJAX之XHR
XHR:XMLHttpRequest
readyState
- 0：UNSENT 代理被创建,但尚未调用open()方法。
- 1：OPENED open()方法已经被调用。
- 2：HEADERSRECEIVED send()方法已经被调用， 并且头部和状态已经可获得。
- 3：LOADING 下载中;responseText属性已经包含部分数据。
- 4：DONE 下载操作已完成。
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。
