HTTP实用指南 | 青训营笔记

chunchun2020
93 阅读5分钟

HTTP实用指南 | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的第8天 与大家分享HTTP实用指南，关于HTTP协议的相关知识，不足之处欢迎大家批评指正！

01 初始HTTP

什么是HTTP？

image.png

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

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

3.请求响应

4.简单可扩展

5.无状态

02 协议分析

协议发展

image.png

  • HTTP1.1

基于TCP协议，希望有更好的表现，做链接复用，缓存等等

公认标准化协议版本

使用最久

  • HTTP2.0

2015年左右推出

对用户体验更高

设计让传输更稳定、高速的性能

协议报文

HTTP1.1

image.png

  • Method

image.png

请求：

1.Safe（安全的）：不会修改服务器数据的方法

GET,HEAD,OPTIONS

2.Idempotent（幂等）：同样的请求被执行一次与连续执行多次的效果是一样的，服务器的状态也是一样的，所有的safe方法都是Idempotent的

GET,HEAD,OPTIONS,PUT,DELETE

  • 状态码

image.png

200 OK：客户端请求成功

301-资源（网页等）被永久转移到其它URL

302-临时跳转

401 Unauthorized-请求未经授权

404-请求资源不存在，可能输入错误URL

500-服务器内部发生了不可预期的错误

504-Gateway Timeout-网关或者代理的服务器无法在规定的时间内获得想要的响应

  • RESTful API

定义

一种设计风格；REST - Representational State Transfer

(1)每一个URI代表一种资源

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

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

image.png

  • 常用请求头

image.png

  • 常用响应头

image.png

  • 缓存

1.强缓存

定义：如果资源本地有，可以直接用

cache-control：协议头

image.png

2.协商缓存

缓存能不能用，是不是最新的，要和服务器通信，协商

image.png

  • 缓存的工作

image.png

  • cookie

Cookie:携带用户身份相关的信息

set-cookie字段的含义

Set-Cookie-response image.png

HTTP2

  • 概述

更快、更稳定、更简单

  • 概念

1.帧(frame)

HTTP/2通信的最小单位，每个帧都包含帧头，至少也会表示出当前帧所属的数据流。

二进制

image.png

2.消息

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

3.数据流

已建立的连接内的双向字节流，可以承载一条或多条消息。

帧可以交错发送，接收方重组织

image.png

4.复用性

HTTP连接都是永久的，而且仅需要每个来源一个连接，不需要多次重复地建立连接

5.其他特性

主动性

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

服务器推送

主动推送信息给接收端，需要部署一些功能 image.png

HTTPS

1.概述

HTTPS：Hypertext Transfer Protocol Secure

经过TSL/SSL加密

2.加密方法

加密：两端——浏览器端和服务器端

对称解密：加密和解密都使用同一个密钥

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

image.png

03 场景分析

操作步骤

1.打开Chrome

2.输入https://www.toutiao.com

3.打开控制台（右键->检查 F12）

4.切换到network

静态资源

image.png

切换到CSS

刷新前 image.png

刷新后

image.png

观察：

image.png

Status Code是from disk cache的，说明并没有发出请求，是从本地缓存拿出的响应

  • 静态资源缓存策略

强缓存

Cache-control:一年

允许所有域名访问

资源类型：css

  • 静态资源部署方案

方案：缓存+CDN+文件名hash

当文件名变的时候，文件名会发生变化，使得用户能访问新的资源

CDN:Content Delivery Network

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

image.png

登录

  • 业务场景：表单登录、扫码登录

  • 技术方式：SSO

  • 登录页面

image.png

过滤方案

image.png

  • 为什么会出现options请求？ ————跨域cross-origin

  • 什么叫跨域请求？

image.png

scheme,host name,port有任何一处不同，都叫做跨域请求

same-origin：同域请求

cross-origin：跨域请求

例子：

image.png

注：最后一行没有标注端口号，但https的默认端口号为443，故也是同域请求

  • 跨域请求解决方案 1.CORS

image.png

image.png

2.代理服务器

跨域问题：浏览器的安全策略和同源策略，通过代理服务器绕开这些拒绝可解决问题

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

image.png

  • 分析登录操作

image.png

image.png

image.png

1.向地址栏做了什么动作？

使用POST方法

目标域名：https://sso.toutiao.com

目标path/quick_login/v2/

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

  • 携带信息 Post body,数据格式为form

希望获取的数据格式为json

已有的cookie

  • 返回信息

数据格式json

种cookie的信息

  • 下一次为什么能记住登录态？

单点登录：SSO(Single Sign On)

image.png

04 实战

浏览器篇

1.AJAX之XHR

image.png

image.png

2.AJAX之Fetch

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

image.png

node篇

1.标准库:HTTP/HTTPS

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

image.png

2.常用的请求库：axios

  • 支持浏览器，nodejs环境

  • 丰富的浏览器

image.png

用户体验

1.网络优化

image.png image.png 2.预解析、预连接

image.png

3.稳定性

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

05 扩展

通信方式

WebSocket

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

image.png

avatar
文章
阅读
粉丝