HTTP实用指南|青训营笔记

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

本堂课的知识要点：

• 初识HTTP
• 协议分析
• 常见场景
• 实际应用
• 了解更多

01初识HTTP

在浏览器地址栏搜索发生了什么？

• 输入搜素

• 浏览器处理

• 生成有效地址

• 发送给服务器

• 服务器处理并发送响应

• 浏览器读取响应并且渲染

02协议分析

http协议发展历程

报文

• method

• safe：get head option。不会修改服务器数据的方法都是安全的方法
• idempotent：get head option put delete。同样的请求被执行一次与连续执行多次效果是一样的，服务器的状态也是一样的。所有safe的方法都是idempotent的

状态码

1xx：请求已结束，继续处理

2xx：请求成功

3xx：重定向，需要进行更进一步操作

4xx: 客户端错误

5xx：服务器错误

restful API————一种api设计风格

常用请求头

常用响应头

• 强缓存：资源本地有了，可以直接用
• 协商缓存：本地有资源但不确定是不是最新

缓存机制

cookie

set-cookie 浏览器设置的返回信息

HTTP2优点

更快更稳定更简单

将信息划分为帧

HTTPS

以HTTP为基础，进行数据加密，使安全性提高。 非为对称加密：使用同一个密钥 与非对称加密：使用两个不同密钥

03场景分析

静态资源， 登录。

状态码200，from···cache从本地缓存获取资源。

静态资源方案：缓存+cdn+文件我hash

登录

表单登录

• 为什么会有option

因为存在跨域

• 跨域是因为浏览器同源策略的存在

跨域：协议，ip，端口，其中一个不一样就是跨域

• 先发起预请求，确认服务器是否允许跨域。

跨域解决方案

• cors
• 代理服务器

同源策略是浏览器的安全策略，不是http的。
通过一个同源服务器，向同源服务器发起请求，再由同源服务器向服务器发起请求。

• Iframe

04实际应用

登录

• 为什么能记住登录状态：session+cookie鉴权， token

跳转网站为什么自动登录

sso：单点登录

实战：浏览器篇

• AJAX之XHR

• AJAX之Fetch

常用请求库：axios，

用户体验--网络优化

• HTTP2
• cdn动态加载
• dns预解析
• 网络预链接
• 域名
• 压缩
• https性能优化

用户体验--稳定性

扩展05--通信方式

websocket：聊天室