这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天

以下为今日课上笔记内容

一. 初识HTTP。

在地址栏输入一些字符串会跳转出来一个页面，在这个过程中发生了什么?

大致分析：

1.什么是HTTP？

1）Hyper Text Transfer Protocol超文本传输协议

2）应用层协议，基于TCP协议

3）请求 响应

4）简单可扩展

5）无状态

二.协议分析

发展

1）报文

• Method的含义

Safe(安全的):不会修改服务器的数据的方法

GET HEAD OPTIONS

ldempotent(幂等):同样的请求被执行一次与连续执行多次的效果是一样的，服务器的状态也是一样的

所有safe的方法都是Idempotent 的

GET HEAD OPTIONS PUT DELETE

• 状态码

• RESTful API

RESTful APl:一种API设计风格;REST-RepresentationalState Transfer

1）每一个URI代表一种资源

2)客户端和服务器之间，传递这种资源的某种表现层

3)客户端通过HTTP method，对服务器端资源进行操作，实现"表现层状态转化"

• 缓存

大致流程

• cookie Set-Cookie -response

2）HTTP/2概述: 更快、更稳定、更简单

①帧(frame):HTTP/2通信的最小单位每个帧都包含帧头，至少也会标识出当前帧所属的数据流

②二进制

③消息:与逻辑请求或响应消息对应的完整的一系列帧

④数据流:已建立的连接内的双向字节流可以承载一条或多条消息

⑤交错发送，接收方重组织

⑥HTTP/2 连接都是永久的，而且仅需要每个来源一个连接

⑦流控制:阻止发送方向接收方发送大量数据的机制

⑧服务器推送

3）HTTPS概述

①HTTPS: Hypertext TransferProtocol Secure

②经过TSL/SSL加密

③对称加密: 加密和解密都是使用同一个密钥

④非对称加密，加密和解密需要使用两个不同的密钥:公钥 (public key)和私钥(private key)

三.场景分析

1.打开chrome

2.输入 www.toutiao.com

3.打开控制台

• 右键->检查
• F12

4.切换到network

• 静态资源
• 登陆

1）静态资源

并没有 而是从本地缓存拿响应

缓存策略是怎样的?

• 强缓存
• Cache-control:一年

还有什么信息吗?

• 允许所有域名访问
• 资源类型: css

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

• CDN: Content Delivery Network

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

2）登录

• 业务场景

表单登录

扫码登录

• 技术方式

SSO

账号密码登陆

打开控制台-network -勾选 preserve log - 过滤quick_login

观察请求

第一个请求

跨域

跨域请求怎么处理

跨域

• CORS （Cross-Origin Resource Sharing）
• 预请求:获知服务端是否允许该跨源请求(复杂请求）
• 相关协议头

Access-Control-Allow-Origin

Access-Control-Expose-Headers

Access-Control-Max-Age

Access-Control-Allow-Credentials

Access-Control-Allow-MethodsAccess-Control-Allow-Headers

Access-Control-Request-Method。Access-Control-Request-Headers

Origin

跨域解决方案

• CORS

• 代理服务器

同源策略是浏览器的安全策略，不是HTTP的

• Iframe

诸多不便

1.向什么地址做了什么动作?

• 使用POST方法
• 目标域名 https: //sso.toutiao.com
• 目标path /quick_login/v2/

2.携带了哪些信息，返回了哪些信息

• 携带信息

Post body，数据格式为form希望获取的数据格式为json

已有的cookie

• 返回信息

数据格式json

种cookie的信息

3.下一次进入页面为什么能记住登陆态呢?

点击右上角-发文章 跳转后的网站为什么自动登录?

SSO:单点登录 (Single Sign On）

四.实战

1.浏览器篇

1）AJAX之XHR

2）AJAX之Fetch

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

2.node篇

标准库: HTTP/HTTPS

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

常用的请求库:axios

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

网络优化

稳定性

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

五.了解更多

1.扩展-通信方式

WebSocket

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

QUIC: Quick UDP Internet Connection

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