文章目录

前言
一、初识HTTP
- 拓展—输入地址到页面渲染发生了哪些事情
二、协议分析
- 1.发展
- 2.报文
- - 2.1 请求报文：
  - - 请求行：
    - 请求头
    - 主体
  - 2.2 响应报文：
  - - 状态行
    - 响应头
    - 响应正文
  - 2.3缓存
- 3.发展
- - 3.1 Http2
  - 3.2 Https
三、拓展

前言

仅以此文章记录学习历程

一、初识HTTP

HTTP (HyperText Transfer Protocol)

超文本运输协议：是实现网络通信的一种规范
是应用层协议，基于TCP协议
分为请求和响应两个部分
简单可拓展（支持自定义，如：header等）
是无状态协议

拓展—输入地址到页面渲染发生了哪些事情

详细了解地址：web前端面试系列（这是我觉得讲的比较详细的一篇文档了）

二、协议分析

1.发展

2.报文

客户端发送的叫请求报文
服务器发送的叫响应报文

如上图：主要分为三部分：

2.1 请求报文：

请求行：

主要分为三个部分：请求方法；请求路径；http的版本

请求方法：（前4为常用方法）

请求头

即HTTP header fields。指在HTTP的请求和响应消息中的消息头部分

作用：它们定义了一个超文本传输协议事务中的操作参数

请求头	作用
Host	指明了请求将要发送到的服务器主机名和端口号
User-Agent	用户代理；可以用来区分软件类型，操作系统，手机还是浏览器，软件开发商等
Accept	接收类型，表示浏览器支持的MIME类型(对标服务端返回的Content-Type)
Connection	决定当前的事务完成后，是否会关闭网络连接
Upgrade-Insecure-Requests	表示客户对加密和认证响应的偏好
Content-Type	客户端发送出去实体内容的类型
Content-Length	客户端发送出去实体内容的长度
Cache-Control	指定请求和响应遵循的缓存机制，如no-cache
lf-Modified-Since	对应服务端的Last-Modified，用来匹配看文件是否变动，只能精确到1s之内
lf-None-Match	对应服务端的ETag，用来匹配文件内容是否改变 (非常精确)
Expires	缓存控制，在这个时间内不会请求，直接使用缓存，服务端时间
Max-age	代表资源在本地缓存多少秒，有效时间内不会请求，而是使用缓存
Cookie	有cookie并且`同域`访问时会自动带上
Referer	该页面的来源URL(适用于所有类型的请求，会精确到详细页面地址，csrf拦截常用到这个字段)

HTTP头部字段可以自己根据需要定义

主体

常用于post和put等请求传递参数

2.2 响应报文：

状态行

主要分为三个部分：http版本；状态码；状态信息
常见状态码：

响应头

响应头	作用
Server	指明了服务器应用程序软件的名称和版本
Content-Type	服务端返回的实体内容的类型
Content-Length	服务端返回的实体内容的长度
Date	报文创建的日期和时间
Keep-Alive	连接的状态（可以用来设置超时时长和最大请求数）
Connection	决定当前的事务完成后，是否会关闭网络连接
Age	对象在缓存代理中存贮的时长
Last-Modified	请求资源的最后修改时间
Expires	应该在什么时候认为文档已经过期,从而不再缓存它
Max-age	客户端的本地资源应该缓存多少秒，开启了Cache-Control后有效
ETag	资源的特定版本的标识符，Etags类似于指纹
Set-Cookie	设置和页面关联的cookie，服务器通过这个头部把cookie传给客户端
Access-Control-Allow-Origin	服务器端允许的请求Origin头部 (警如为*)

响应正文

通常用来返回响应体

2.3缓存

3.发展

3.1 Http2

相比之前版本更快、更稳定、更简单

HTTP/2连接都是永久的，而且仅需要每个来源一个连接
流控制:阻止发送方向接收方发送大量数据的机制
服务器推送

新增特性：

多路复用：在一个连接里，客户端和浏览器都可以同时发送多个请求或回应，而且不用按照顺序一一对应，这样就避免了”队头堵塞”
二进制分帧：采用二进制格式传输数据，而非 HTTP 1.x的文本格式，解析起来更高效
首部压缩：在客户端和服务器端使用“首部表”来跟踪和存储之前发送的键值对，对于相同的数据，不再通过每次请求和响应发送
服务器推送：这种方式非常合适加载静态资源，免得客户端再次创建连接发送请求到服务器端获取

3.2 Https

HTTPS : Hypertext TransferProtocol Secure
经过TSL/SSL加密

加密类别：

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

三、拓展

字节跳动青训营--前端day5相关推荐

字节跳动青训营--前端day7
文章目录前言一.Node.js 的应用场景 (why) 1. 前端工程化 2. web服务端应用 3. Electron跨端桌面应用二.Node.js 运行时结(what) 1. V8 ,lib ...
第五届字节跳动青训营前端进阶学习笔记（八）React框架入门
文章目录前言 React 的设计思路 1.传统JavaScript更新UI的痛点 2.我们对UI代码的需求 3.组件 (1)组件定义 (2)组件设计 (3)组件结构 4.React的生命周期 Rea ...
字节跳动青训营--前端day8
文章目录前言一.CSR,SSR,SSG 1. CSR 2. SSR 3. SSG 4. SSR,SSG的优势利于SEO 更短的首屏时间二.什么是Next.js 三.Next.js客户端开发 1 ...
字节跳动青训营--前端day10
文章目录前言一.web开发安全 - 攻击 1. Cross-Site Scripting(XSS) 1.1 存储型(Stored Xss) 1.2 反射型(Reflect Xss) 1.3 DOM ...
字节跳动青训营--前端day1
文章目录前言一. 前端 1 前端的技术栈 2. 前端的边界 3. 前端的关注点二. HTML 1. HTML常用标签及语义化 2. HTML 语法 3. 谁在使用我们写的HTML 前言仅以此文 ...
字节跳动青训营--前端day3
文章目录前言一.写好JavaScript的一些原则二.各司其职三.组件封装四.过程抽象前言仅以此文章记录学习一.写好JavaScript的一些原则各司其职:让HTML.CSS和Jav ...
字节跳动青训营--前端day2
文章目录前言一.css 1. css的组成 2. css三种使用方式 3.css的工作方式二. css选择器Selector 1. 选择元素的方式 2. 伪类(pseudo-classes) 2 ...
第五届字节跳动青训营寒假 —— 前端专场
第五届字节跳动青训营寒假 -- 前端专场文章目录第五届字节跳动青训营寒假 -- 前端专场青训营 - 前端练习题每日一练编程题前端编程题 [342. 4的幂](https://leetcod ...
前后端免费学，字节跳动青训营-暑假专场报名启动
亲爱的小伙伴,你准备好了吗? 第六届字节跳动青训营,来咯! 无论你是初学者还是有一定经验都可以在青训营找到属于自己的位置全方位课程讲解 & 项目实践指导让你轻松掌握「前端 or 后端」技 ...

字节跳动青训营--前端day5