HTTP的场景实践 | 青训营

zerototen
76 阅读8分钟

任选一个浏览器，对于其涉及的请求中的缓存策略展开具体分析————选择的“淘宝”

1 背景知识

什么是HTTP，其基本特点？

  • HTTP（Hyper Text Transfer Protocol）：超文本传输协议，是一种用于分布式、协作式和超媒体信息系统的应用层协议。简单来说就是一种发布和接收HTML页面的方法，被用于在Web浏览器和网站服务器之间传递消息。
  • 应用层协议，默认工作在TCP协议80端口
  • 请求响应
  • 简单可扩展
  • 无状态
    什么是HTTPs，其基本特点是什么？
  • HTTPS(Hypertext Transfer Protocol Secure):超文本传输安全协议，是一种透过计算机网络进行安全通信的传输协议。HTTPS经由HTTP进行通信，但利用SSL/TLS来加密数据包。
  • HTTPS开发的主要目的，是提供对网站服务器的身份认证，保护交换数据的隐私与完整性。
  • HTTPS默认工作在TCP协议443端口

HTTP和HTTPS的区别？ 参考：zhuanlan.zhihu.com/p/151764515

  • 1、安全性不同。https://前缀表明使用SSL(安全套接字)或TSL加密的，电脑与服务器之间收发的信息传输将更加安全。当使用浏览器访问一个HTTP网站的时候，会发现浏览器会对该HTTP网站显示“不安全”的安全警告，提示用户当前所访问的网站可能会存在风险。而当访问的是https网站时，浏览器的地址栏会出现一把“安全锁”的图标。 image.png image.png
  • 2、网站申请流程不同。https协议需要到CA申请证书，一般免费证书很少，需要缴费，Web服务器启用SSL需要获得一个服务器证书并将该证书与要使用SSL的服务器绑定。
  • 3、默认端口不同。http和https使用的是完全不同的连接方式，同时使用的端口也不同，http使用的是80端口，https使用的是443端口。在网络模型中，HTTP工作与应用层，而HTTPS工作在传输层。

简单来说：

  • http: 超文本传输协议，明文传输，信息不安全。用的是80端口
  • https: 安全套接字超文本传输协议，有ssl/tsl证书，信息安全。用的443端口

2 协议分析

Method:

  • Safe(安全的)：不会修改服务器的数据的方法 GET HEAD OPTIONS
  • Idempotent(幂等)：同样的请求被执行一次与连续执行多次的效果是一样的，服务器的状态也是一样的，所有safe的方法都是Idempotent GET HEAD OPTIONS PUT DELETE

状态码：

  • 200 OK - 客户端请求成功
  • 301 资源被永久转移到其他URL
  • 302 临时跳转
  • 401 Unauthorized 请求未经授权
  • 404 请求资源不存在，可能是输入了错误的URL
  • 500 服务器内部发生了不可预期的错误
  • 504 Gateway Timeout 网关或者代理的服务器无法在规定时间内获得想要的响应

image.png

缓存：

  • 强缓存
  • 协商缓存

image.png

3 常见场景分析（静态资源、登录）-- 淘宝

  • 打开microsoft Bing
  • 输入www.jd.com/
  • 打开控制台
    • 右键 -> 检查
    • F12 image.png image.png
  • 切换到network
缓存策略是怎样的？
- 强缓存
- Cache-control:一年
还有什么信息？
- 允许所有域名访问
- 资源类型：css

静态资源

静态资源方案：缓存+CDN+文件名hash
CDN：Content Delivery Network
通过用户就进行和服务器负载的判断，CDN确保内容以一种极为高效的方式为用户的请求提供服务

登录

  • 扫码登录
  • 账户登录
    • 账号密码登录
    • 打开控制台-network-勾选preserve log-过滤quick_login
    • 观察请求
  • 跨域解决方案
    • CORS
    • 代理服务器
      • 同源策略是浏览器的安全策略，不是HTTP的
      • dev serve就是webpack解决跨域方案的其中一个
    • Iframe
      • 诸多不便
  • 分析

image.png image.png image.png image.png

1、向什么地址做了什么动作？

  • 使用GET方法
  • 目标域名：seq.jd.com
  • 目标：/jseq.html

2、携带了哪些信息，返回了哪些信息？

  • 携带信息

    • Post body，数据格式为form
    • 希望获取的数据格式为json
    • 已有的cookie

  • 返回信息

    • 数据格式json
    • 种cookie的信息

技术方式

  • SSO（Single Sign On）：单点登录

4 实战

浏览器

  • Ajax之XHR
    • XHR：XMLHttpRequest
    • readyState
      • 0 UNSENT 代理被创建，但尚未调用open()方法
      • 1 OPENED open()方法已经被调用
      • 2 HEADERS_RECEIVED send()方法已经被调用，并且头部和状态已经可获得
      • 3 LOADING 下载中；responseText属性已经包含部分数据
      • 4 DONE 下载操作已完成
  • Ajax之Fetch
    • XMLHttpRequest的升级版
    • 使用Promise
    • 模块化设计、Response、Request、Header对象
    • 通过数据流处理对象，支持分块读取

node篇

  • 标准库：HTTP/HTTPS
    • 默认模块，无需安装其他依赖
    • 功能有限，不是十分友好
  • 常用的请求库：axios
    • 支持浏览器、nodejs环境
    • 丰富的拦截器
// 全局配置
axios.defaults.baseURL = 'https://api.example.com'
// 添加请求拦截器
axios.interceptors.request.use(function (config){
    // 在发送请求之前做些什么
    return config
}, function (error){
    // 对请求错误做些什么
    return Promise.reject(error)
})

// 发送请求
axios({
    method:'get',
    url:'http://test.com',
    responseType:'stream',
}).then(function(response){
    response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
})

网络优化学习

参考：xiaolincoding.com/network/2_h…
数据传输的HTTP协议转成加密数据传输的HTTPS协议，给应用数据套了个[保护伞]，提高安全性的同时也带来了性能消耗。
HTTPS相比HTTP协议多了一个TLS协议握手过程，目的是为了通过非对称加密握手协商或者交换出对称加密密钥，这个过程最长可以花掉2 RTT，接着后续传输的应用数据都得使用对称加密密钥来加密/解密。
多个角度优化HTTPS：

  • 分析性能损耗
    • TLS协议握手过程
    • 握手后的对称加密报文传输
  • 硬件优化
    • 选择支持AES-NI特性的CPU
  • 软件优化
    • 升级Linux内核：一般最新版本不仅提供了最新的特性，也优化了以前软件的问题或性能
    • 升级OpenSSL
  • 会话复用
    • Session ID
    • Session Ticket
    • Pre-shared Key
  • 协议优化（对密钥交换过程进行优化）
    • 密钥交换算法优化：选用ECDHE
      • 使用RSA密钥交换算法的TLS握手过程，不仅慢，而且安全性也不高
      • 尽量选用ECDHE密钥交换算法替换RSA算法，因为该算法支持[False Start]，即抢跑的意思，客户端可以在TLS协议的第三次握手后，第四次我收钱，发送加密的应用数据，以此将TLS握手的消息往返由2 RTT减少到1 RTT，而且安全性也高，具备前向安全性。
    • TLS升级：升级为TLS 1.3
      • TLS1.3大幅度简化了握手的步骤，完成TLS握手只要1 RTT，TLS 1.3把Hello和公钥交换这两个消息合并成了一个消息，于是这样就减少到只需1 RTT就能完成TLS握手
      • 对于密钥交换算法，废除了不支持前向安全性的RSA和DH算法，只支持ECDHE算法
  • 证书优化
    • 证书传输优化：选用ECDSA证书
      • 要让证书更便于传输，那必然是减少证书的大小，可以节约宽带，也能减少客户端的运算量。所以，对于服务器的证书应该选择椭圆曲线（ECDSA）证书，而不是RSA证书，因为在相同安全强度下，ECD密钥长度比RSA短得多。
    • 证书验证优化：CRL/OCSP/OCSP Stapling
      • 客户端在验证证书时，会走证书链逐级验证，验证的过程不仅需要[用CA公钥解密证书]以及[用签名算法验证证书的完整性]，而且为了知道证书是否背CA吊销，客户端有时还会再去访问CA，下载CRL或者OCSP数据，以此确认证书的有效性。

扩展学习

通信方式

webSocket:

  • 浏览器与服务器进行全双工通讯的网络技术
  • 典型场景：实时性要求高，例如聊天室
  • URL使用ws://或wss://等开头 QUIC：Quick UDP Internet Connection
  • 0-RTT建联（首次建联除外）
  • 类似TCP的可靠传输
  • 类似TLS的加密传输，支持完美前向安全
  • 用户空间的拥塞控制，最新的BBR算法
  • 支持h2的基于流的多路复用，但没有TCP的HOL问题
  • 前向纠错FEC
  • 类似MPTCP的Connection migration

image.png

总结

在互联网高速发展的时代，大多数网站首页大小都超过了2M，请求数量多达100个。同时，HTTP还会用在移动互联网的客户端app，不同性质的app对HTTP的使用差异也非常大。对于电商类app，加载首页的请求可多达10多个；对于微信这类IM，HTTP请求可能仅限于语音和图片文件的下载，请求出现频率不算高。
在对HTTP的场景应用学习之后，希望能够比之前更加正确高效地使用http进行项目开发。“鱼和熊掌不可兼得”，但考虑到HTTPS具有安全性特点，还是会选择在安全的前提下，通过其他方式提高网络性能。

avatar
文章
阅读
粉丝