HTTP1.0 和 HTTP1.1 有什么区别?

224 阅读7分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第29天,点击查看活动详情

写在前面

作为前端,相信大家在日常开发中,对于网络相关的问题可能都不是很“上心”,毕竟前端只需要在需要数据的时候向后端所要接口,至于接口如何实现,如何优化,数据如何传输,前端并不 “care”,而随着 js 的越来越强大,js 大有向各个方向渗透的趋势,有句话说得好,“凡是能用 JS 实现的,最终都会使用 JS 来实现”,那么,当 JS 不断向各个方向扩展的背景下,意味着前端开发人员的机会也将越来越多,同时,对于前端人员综合素质的考验也越来越大,在这样的背景下,作为前端的我们,非常有必要给自己充充电,拓展拓展自己相关的知识面,让我们能够迎接更大的挑战。

可能在平时使用的过程中,我们很少去关注我们所使用的是 HTTP 的那个版本,那么今天,就让我们一起来了解了解 HTTP 版本相关的知识点,补齐这个知识点的盲区吧

HTTP 1.0

HTTP 1.0 作为早期的一个 HTTP 版本,只支持最基础的 GET、POST,是一个经典的无状态连接,在这个信息量巨大的时代, HTTP 1.0 显然已经无法满足人们的需求,因此现在基本没有任何网站再采用 HTTP 1.0 进行数据传输

HTTP 1.1

目前,HTTP 1.1 为大量网站所采用的的 HTTP 协议版本,相比 HTTP 1.0 ,这个版本增加了许多的优化策略,用于弥补 HTTP 1.0 版本的不足,比如缓存策略,长连接、断电续传、Restful API 等

支持多种缓存策略

HTTP 1.1 的缓存策略一共有两种,分为强缓存以及协商缓存。所谓强缓存,也就是强制使用缓存,即规定浏览器在某个有效时间段内直接使用缓存内容,而不向服务器发送请求。而协商缓存则是每次请求时,携带相关的缓存标志信息,向服务器验证,若缓存未到期,返回 304 ,直接使用本地缓存

强缓存

1、Expires

超时时间,服务器可以在响应包中给 Expires 设定一个时间,当在该时间内时,表示处于缓存 有效期内,浏览器直接使用该缓存而不向服务器发送请求

2、Cache-Control

-max-age:设置有效时间,与 Expires 类似,当处于该时间内时,直接读取缓存

-no-cache:不使用本地缓存。强制使用协商缓存

-no-store:直接禁止浏览器缓存数据,每次用户请求该资源,都会向服务器发送一个请求。

-public 、private:由于目前许多网站会架设CDN等中间代理服务网,因此用次字段来控制是否允许除了浏览器以外的节点进行缓存

需要注意的是,如果同时设置了Expires和Cache-Control,那么 Cache-Control 优先级更高。

协商缓存

Last-Modify + If-Modify-Since

当浏览器第一次向服务器发送请求时,服务器返回 Last-Modify ,也就是资源的最后修改时间,当浏览器再次向服务器发送请求时,通过 If-Modify-Since 字段携带第一次服务器返回的 Last-Modify 的值,服务器根据资源的最后修改时间判断是否命中缓存,命中返回 304

Etag + If-None-Match

当浏览器第一次向服务器发送请求时,服务器返回 Etag,即唯一标识,由服务器通过一定的规则生成,例如 md5 等,当浏览器再次向服务器发送请求时,通过字段 If-None-Match 携带第一次服务器返回的Etag,服务器将本地的、生成的 Etag 与浏览器发送的 If-None-Match 进行比对,相同则命中缓存,返回 304

Last-Modify 与 Etag 区别

1、Last-Modified 以秒为最小衡量单位,如果某个文件在1秒内改变了多次,Last-Modified 无法感知多次变化,而 Etag 靠内容生成唯一标识,反映更加精准

2、由于 Etag 需要通过特定算法计算,而 Last-Modified 只需要记录时间,因此在性能表现上, 在性能上,Etag 稍微差一些

3、选择上,如果考虑性能,优先选择 Last-Modified,而如果考虑精准度,这优先选择 Etag

支持 keep-alive

由于 HTTP 采用的是 TCP 作为底层通讯协议,因此,默认情况下,每一次的 HTTP 请求,都需要进行一次 TCP 连接与断开,都需要完成 TCP 的三次握手以及四次挥手,非常浪费性能,而 HTTP 1.1 支持使用 keep-alive,实现一个 TCP 连接,完成多个 HTTP 请求,在同时出现大量请求的时候,keep-alive 有着不错的优化效果

总结

本篇只是对 HTTP 版本的比较做了简单的分析,后续继续补充,通过最近陆陆续续学习和总结了一部分的网络相关的知识点,我的体会是,当逐渐理解了网络相关的知识后,对于开发很有补充作用,学习了网络相关知识之后,让我对于很多传输相关的东西理解更加深刻,对于前后端接口的设计也逐渐过渡到“知其所以然”的境界!!

往期好文推荐

这么简单的需求别再说你不会做了好嘛!(ClipPath)

Websocket 底层是 TCP 还是 UDP?白话版解析 TCP 和 UDP 传输过程

面试官:了解低代码平台吗?(数字孪生低代码平台探索)(五)

面试官:了解低代码平台吗?(数字孪生低代码平台探索)(四)

面试官:了解低代码平台吗?(数字孪生低代码平台探索)(三)

面试官:了解低代码平台吗?(数字孪生低代码平台探索)(二)

面试官:了解低代码平台吗?(数字孪生低代码平台探索)(一)

面试官:说说从输入 URL 到页面显示到底经历了什么,体现一下你的知识广度

面试官:作为前端,服务器相关了解多少?

面试官:HTTPS 采用的是对称加密还是非对称加密?具体说说其加密过程

面试官:说说 Cookie 和 Token 的区别?

面试官:网络安全了解多少,简单说说?(一)

面试官:网络安全了解多少,简单说说?(二)

面试官:网络安全了解多少,简单说说?(三)

面试官:网络安全了解多少,简单说说?(四)

面试官:网络安全了解多少,简单说说?(五)

面试官:网络安全了解多少,简单说说?(六)

面试官:网络安全了解多少,简单说说?(七)

面试官:网络安全了解多少,简单说说?(八)

浅尝 | 从 0 到 1 Vue 组件库封装

面试官:这么简单的正则表达式都不会?

Webpack 打包类库踩坑

面试官:你就只会 npm run build 吗?(Webpack 配置 Vue+Ts)

面试官:连VuePress都没搭过还说开发过组件库?(VuePress 搭建)

面试官: 连 Vue 视图更新都不会写?(Vue视图更新原理【一】)

面试官: 能不能手写 Vue 响应式?(Vue2 响应式原理【完整版】)

面试官:能不能手写 Vue3 响应式(Vue3 原理解析之响应系统的实现)

JS 优雅之道(JS 代码优化小 Tip)

面试官:你真的会用 SVG 吗? (SVG 应用实战)

面试官:说一下这个Loading动画实现思路 (CSS3 实现 Loading 动画)

JS 扫盲题 ( 面试题梳理系列 (一))

面试官:你确定你说的防抖不是节流吗?( 面试题梳理系列 (二))

面试官:除了 HTTP,你还用过什么通信协议?(Websocket 在数字孪生中的应用)

面试官:你真的理解 Event Loop 吗?( JS 事件循环 )

面试官:v-for 中 key 为什么不能用 index,从原理层面聊聊?

面试官:vue-router 的 hash 与 history 哪个模式会刷新页面?

面试官:说说你平时用过的自适应方案(数字孪生可视化自适应方案)

面试官:说一下如何优化过渡动画(数字孪生可视化过渡动画)

写在最后

博主接下来将持续更新好文,欢迎关注博主哟!!
如果文章对您有帮助麻烦亲点赞、收藏 + 关注和博主一起成长哟!!❤️❤️❤️