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

初识HTTP

Hyper Text Transfer Protocol
应用层协议，基于TCP协议
发展：HTTP0.9 -> 1.0 -> 1.1(标准化协议) -> 2

补充
URL（Uniform Resource Loactor 统一资源定位符），由8个部分组成：

协议 protocol
- http 超文本传输协议，HyperText Transfer Protocol
- https 加密的超文本传输协议
- ftp 文件传输协议，用来访问服务器上的文件，File Transfer Protocol
- ……
主机名 hostname服务器地址，如www.toutiao.com
端口 http->80, https->443, ftp->21 默认端口可省略
路径 path
资源 resource 目标文件
查询字符串/参数 query string，资源后面使用?开头的名称/值，多组之间用&分隔
锚点 anchor，资源后面使用#开头的文本
身份认证 authentication，如ftp://账户:密码@ftp....

HTTP报文

👉请求方法

Safe：不会修改服务器的数据的方法（get, head, options）
Idempotent 幂等：同样的请求被执行一次与连续多次的效果一样，服务器响应的状态也一样，所有safe的方法都是幂等的，另外还包括put, delete方法

👉状态码

👉Restful API

REST (Representational State Transfer 表现层状态转换)
一种软件架构风格，只提供设计原则和约束条件（不是标准）
满足这些原则的程序或接口，则可以用Restful形容

👉浏览器缓存(Brower Caching)

http面试必会的：强制缓存和协商缓存 - 掘金 (juejin.cn)

浏览器对请求过的文件进行缓存，以便下次访问时重复使用，节省带宽，提高访问速度，降低服务器压力
http缓存机制主要在http响应头中设定
类别可分为强缓存和协商缓存
- 强缓存：浏览器直接从本地读取缓存资源，不需要访问服务器，返回200。
  - 200 form memory cache：从内存中读取，关闭浏览器后，资源被释放
  - 200 from disk cache：从硬盘中读取，资源不受页面的开关影响
  - 优先访问内存，其次访问硬盘，最后访问网络
- 协商缓存：向服务器发送请求，由服务器查看缓存的资源是否被修改，并决定是否通知浏览器从缓存中读取资源

👉Cookie和Session

你真的了解 Cookie 和 Session 吗 - 掘金 (juejin.cn)

HTTP发展

👉 HTTP/2概述

更快，更稳定，更简单

概念

帧（frame）：HTTP/2通信的最小单位，采用二进制方式编码，可以交错发送

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

数据流：已建立连接内的双向字节流，可以承载多条信息

复用性：HTTP/2的连接是可以被永久利用的
流控制：可以阻止接收过大资源的机制
服务器推送：服务器预测可能收到的请求，并提前执行

👉HTTPS概述

Hypertext Transfer Protocol Secure
TSL/SSL加密
- TSL （Transport Layer Security）传输层安全协议
- SSL (Secure Socket Layer) 安全套接层（TSL的前身）
对称与非对称加密
- 对称加密：加密和解密用的同一个密钥
- 非对称加密：加密和解密需要不同的密钥：公钥（public key）和私钥（private key）

常见场景

以今日头条网页为例进行场景分析

静态资源

Q：状态码为200一定向服务器发送了请求吗？
A：不一定，可以来自强缓存

 Response Headers
 // 允许所有域名访问
 access-control-allow-origin: *
 // 响应方法
 access-control-request-methods: OPTIONS
 access-control-request-methods: HEAD
 access-control-request-methods: GET
 age: 3739724
 ali-swift-global-savetime: 1670382269
 // 缓存策略1年（max-age单位为秒）
 cache-control: max-age=31536000
 content-encoding: br
 content-length: 77707
 content-md5: p0LTIRFTA3c+xIJSDr1DAQ==
 // 内容类型为CSS
 content-type: text/css; charset=utf-8

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

CDN (Content Delivery Network，内容分发网络)

CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

图解|什么是内容分发网络(cdn) - 掘金 (juejin.cn)

文件名hash：解决同名文件相互覆盖的问题，并提高文件传输效率
【文件上传那些事儿】- 03 两种计算 hash 的方式 - 掘金 (juejin.cn)

应用与扩展

http请求、改善用户体验、其它协议

http请求

👉 AJAX - XHR（XMLHttpRequest）

 let xhr = null;
 const ajaxGet = () => {
     // 1.创建对象
     xhr = new XMLHttpRequest();
     // 2.初始化请求
     xhr.open('Get', 'http://127.0.0.1:3000/server');
     // xhr.open('Post', 'http://127.0.0.1:3000/server');
     // 在初始化之后、发送请求之前，可以设置请求头信息
     // 预定义请求头
     // xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
     // 自定义请求头
     xhr.setRequestHeader('name','test');
     // 设置响应体类型
     xhr.responseType="json";
     // 设置超时时间
     xhr.timeout=1000;
     // 设置超时回调
     xhr.ontimeout=()=>{alert('请求超时');}
     // 3.发送请求
     xhr.send();
     // 4.处理服务器端返回的结果
     xhr.onreadystatechange = function () {
         if (this.readyState === 4 && this.status === 200) {
             let response = this.response;
             console.log(typeof response);
             // 接收到json字符串，将其转换为json对象
             // let obj =  JSON.parse(response)
             // result.innerText = obj.name;
             // 通过设置接受数据的类型，自动获取json对象
             result.innerText = response.name;
         }
     }
 };

👉AJAX - Fetch

XHR升级版
使用Promise
模块化设计
通过数据流处理对象，支持分块读取

👉node

 var http = require('http')
 http.createServer(function (request, response) {
     // 发送Head头部
     // HTTP状态值：200：ok
     response.writeHead(200, {'Content-Type':'text/html'});
     // 响应数据
     response.end('Hello World');
 }).listen(8899);  // 监听端口

👉axios

 axios.get('http://localhost:3000/users')
     .then(response => {
     this.msg = response.data.rows
 })
     .catch(err => {
     console.log(err);
 })

用户体验

👉网络优化

👉稳定性

其它协议

👉WebSocket

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

👉QUIC

考虑传输层TCP/UDP
基于UDP封装的协议（Quick UDP Internet Connection）

HTTP使用｜青训营笔记

初识HTTP

HTTP报文

HTTP发展

常见场景

静态资源

登录

应用与扩展

http请求

用户体验

其它协议

HTTP使用 ｜ 青训营笔记

初识HTTP

HTTP报文

HTTP发展

常见场景

静态资源

登录

应用与扩展

http请求

用户体验

其它协议

HTTP使用｜青训营笔记