h t t p 是 什么?大家好,今天我们用十分钟的时间,彻底搞懂互联网里最基础最常见的一个网络协议。 h t t p 协议。 如果你能坚持听完,你将真正理解浏览器和服务器是怎么对话的,为什么有 get post, 为什么有 cookie 状态码 u r o, 甚至你以后抓包、调试、写代码、做安全分析都会轻松很多。好,我们开始 h t t p, 它的全称是抄文本传输协议,我们拆开来看,抄文本 就是包含了链接能跳来跳去的文本,也就是我们看到的网页。传输是负责把数据从一端搬到另一端。协议是双方事先约定好的通信规则。所以 h t t p 的 核心工作就是在浏览器客户端和服务器之间, 按照事先约定好的通信规则,可靠的传输网页、图片、视频等一切你能看到的内容。浏览器、客户端和服务器的对话是如何进行的呢? 它遵循一个极其经典的模型,请求与响应。整个过程分两部分,一、你在浏览器输入网址,敲下回车,浏览器就会按照 http 的 格式封装一个请求发向服务器。这个请求里会写明我要用什么方法,比如 get 方法,拿哪个页面, 以及我浏览器的一些信息。二、服务器收到请求后开始工作,查找资源,然后封装一个响应回传给浏览器。 这个响应里会包含请求成功还是失败,返回的内容是什么,以及内容的类型等。这就是一次完整的 http 事务,你滚动页面,点击链接,背后就是无数次这样的请求响应循环。我们先说 http 请求, 这个请求是纯文本的,由四部分构成。第一部分叫请求行,比如 g e t index dot html, h t t p one point one, 它告诉服务器我想访问这个 index 点。 html 文件,我使用的方法是 get, 我 用的 h t t p 版本是一点一。 第二部分叫请求头,比如 host, user agent, accept cookie 等等。这些头部就像信封上的说明,告诉服务器你是什么浏览器,你能接受什么格式,你需要携带哪些 cookie。 第三部分是一个空行,表示头部结束。第四部分是请求体,也就是 body, 多数情况下, get 请求没有 body, 而 post p u t 等方法会携带数据,比如表单信息、 json 图片,甚至文件。好请求发出去之后就是服务器的响应。 htp 的 响应格式和请求非常像,也分为四段。第一部分叫状态行,比如 http, 一 点一,两百 ok, 这里的状态码非常重要,二零零表示成功,三零一和三零二表示重定向,四零三表示无权访问, 四零四表示资源不存在,五零零则表示服务器内部出了问题。第二部分叫响应头,比如 content type, content length, set cookie。 这些内容告诉浏览器返回的数据是什么格式,长度是多少,有没有新的 cookie 要存下来。 第三部分是一个空行。第四部分就是响应体,也就是你真正想要的内容,比如 html 文本、 css、 js 图片、视频,或者返回给前端的 json 数据。以上请求和响应报文格式就是 h t t p 最基础、最核心的结构。接下来我们讲几个重要概念,让你对 h t t p 有 更完整的理解。第一个关键点, h t t p 是 无状态协议,什么意思?就是每个请求都是独立的,服务器不会记得你是谁。 浏览器必须依靠 cookie 或者 token, 让服务器在每次请求里重新知道你是同一个用户。比如登录之后查看订单,服务器就是靠 cookie 或 token 来识别你,仍然是登录状态。 第二个关键点, http 有 多种方法,最常见的是 get 和 post。 get 通常用来获取数据,参数一般写在 url 后面。而 post 用来提交数据。比如登录注册、上传文件,它需要在 body 中携带数据。 除此之外还有 p u t delete head 等方法,不过在前端普通业务中用的不多。第三个关键点, content type htp 可以 传输各种格式的数据,因此必须用 content type 声明内容格式。常见的有 text 斜杠, html 表示 html 文本, application json 表示 json 数据。 multipart form data 表示文件上传。你上传图片、视频的时候,就是通过 multipart 格式把文件切成多个部分传输。第四个关键点,长连接与短连接。早期的 http 一 点零默认是短连接,请求完成后就断开。 h t t p 一 点一引入了 keep live, 使得连接可以附用,大大提升性能。到了 h t t p 二,不仅可以附用连接,还能并发传输多个流,更快更高效。第五个关键点, h t t p 与 h t t p s。 的 区别 h t t p s 是 在 h t t p 外面套了一层 t p 加密, h t p 铭文传输容易被窃听和篡改, 而 h t t p s。 加密传输不仅保证数据无法被偷看,还能确保服务器身份真实可靠。现在几乎所有网站都强制迁移到 h t t p s 就是 因为安全性提升巨大。最后我们讲一下 h t t p 的 发展路线。 h t t p 一 点零是最早的基础版, h t t p 一 点一解决了性能和连接复用的问题。 h t p 二带来了多路复用,头部压缩服务器推送,使网页加载更快。 h t t p 三则基于 q u i c 协议,摆脱了 tcp 的 限制,让连接更快,尤其适合弱网环境。它们的目标很简单,让浏览体验更快、更安全。 现在你已经掌握了 h t t p 的 核心内容,它的格式是什么?它怎么请求?怎么响应?它有哪些方法?它怎么上传文件?它的安全性怎么保证?它的每个版本不断?如何引进? 如果你是开发者、安全工程师、运维人员,还是做产品的,只要你和互联网打交道, http 都是你最基础、最必须掌握的知识。好了,今天的分享就到这里,如果有疑问或者有想了解的知识,可在评论区留言,我们下期见!
粉丝5.6万获赞10.9万

今天呢,先来看一下性能优化里面的题。第一道题,词汇标签放在 hide 和放在锅底底部里面有什么区别?其这个问题最核心的区别就在于页面的加载和渲染顺序,你看其解析, html 是 自上而下的,当在 hide 里面遇到词汇标签时,会暂停解析和渲染页面,先去下载并执行脚本,这会导致用户长时间看到白屏,影响体验。而将词汇标签放在锅底底部, 确保浏览器先把整个页面的 dom 结构解析并确认完成,让用户更快地看到页面内容,然后再执行脚本。除了放在底部,更好的方式是用 h t 幺五的 default 和 assign 属性。 default 能让脚本并且下载并在动解析完成后, dom 解析完成后 dom 缓存的 lld 事件前按顺序执行, 基本等同于放底部的效果,单调优雅。而 stick 则是并行下载,下载完立即执行,不保证顺序,适合用于像网站统计这样无奈的第三方脚本。实际开发中,我们通常会把需要操作 dom 具有顺序要求的脚本用 deft 放在 hard 里,或者直接放在玻璃底部。

大家好,我是 vsco, 最近很多同学问我这个筛选功能,他这个下拉框是怎么去获取数据的啊?就是说这些数据他是从这个景点信息里面来的嘛?那他怎么来的呢?就是这些景点名称,对吧?他怎么来的呢?好,那今天的话我们就来一起看一下这个是怎么去写代码的,就代码是怎么弄的。 好,那我首先还是要找到这个前端页面,对吧?这个前端页面是这个美食信息,对不对?美食信息,那我们找到这个美食信息的页面,你看一下 美食信息页面是不是在这?在这?好,然后他有一个 list, 有 一个 add update, 对 吧?那首先的话,我们还是定位到这个 list, 因为它是这个列表页。好,然后呢,我们找到这个景点名称,它这个筛选项放的一个位置,找这个景点名称,筛选项放到一个位置。啊,这个不是啊,这个应该是它的一个字段吧, 这个应该是他的一个字段,往上看一下哈,你看这个才是的,因为,因为,为什么?你看请选择景点名称,对吧?哎,请选择景点名称,所以说他这个位置呢?搜索框的位置应该是在这。好,这里面呢?是这一段代码的话,是我们在这里去输入这个数据啊,就选择数据,他是做了一个这个选择器。 好,然后这里面有一个这个 e 二杠 option, e 二杠 option 里面你会发现它有一个这个 v 杠 four, 这个 v 杠 four 的 话,相当于就是我们 java 语言的一个 four 循环。好,它这个 four 循环主要是干嘛呢?就是把这个景点名称,它这个选项列表给它进行一个循环的展示,哎,也就是我们这些数据,对吧?也就是我们这些数据, 然后你看哈他这里呢,这个景点名称数据呢?那重点的话,我们就是要看一下这个数据他是怎么来的,对吧?重点看一下这个数据是怎么来的,那这个数据呢?你会发现他是在这里去定义的啊,定义之后,那他到底在哪去获取的呢?哎,我们全区搜一下,这个 全区搜一下你会发现这里有一个接口去调用,哎,他是不是在图纸画的时候,图纸画的时候去通过这里去查我们后端的时候查我们后端接口。好,这后端接口的话大家自己去看一下就好了,那我就不去细讲后端查询流程了, 后端如果查询流程你有问题的话,可以看一下我之前讲过的那种增删改查是怎么实现的。好,然后这里我们就看这个前端,这里你看他从后端查出来数据之后,是不是把这个,把这个查出来的值,哎?赋,赋值给我们这个 data 里面的值,对吧?啊?赋值给我们这个 data 里面的值。 好的,所以说这个主要的流程是一个什么样的呢?就是我们在前端初步化的时候,我们就通过调用后端的接口去把这个数据获取到,然后前端给他显示出来,就这么去说就好了。好,那我这里的话我们可以抓包看一下吧?抓包看一下就是 稍微来说形象一点,我们先切到一个别的页面删掉,然后这里的话我们再切回这个页面,切回这个页面,你可以看到这里面呢有一个这个返回值,返回这里面你可以看到这些,是不是就是这些景点名称,对吧?哎,所以说就是这么一个逻辑。好,那么本期视频呢?就讲到这里,如果喜欢的话请多多一键三联知识,咱们下期视频再见。


面试的时候很多同学说不清楚盖的请求和 pos 的请求的区别,那这个问题是一个比较基础的问题,但是真的要把它说的清楚,说的完整还是有一定难度的啊。盖的请求呢,主要是用于从服务器端获取数据, pos 的请求主要是将数据发送到服务器端,那主要区别呢,就是盖的请求可以刷新啊,刷新也没关系, pos 的请求如果刷新的话就会被重新提交啊。 第二呢就是盖的请求可以在书签里去收藏啊, pose 请求不能收藏。第三呢就是盖的请求可以被缓存, pos 的不能。第四啊,就是盖的请求的数据长度是有限制的,因为他是放在 uio 里边的,那 uil 通常是限制在二零四八的字符, pose 的进球就没有长度限制啊。第五呢就是,呃,与 pose 的相比呢,就是 get 的安全性比较差,因为他是在 url 里边能看到啊。在面试 过程中经常遇到的错误呢,就是第一说 pose 的请求啊,数据是加密的啊,这个是错误的。第二呢就是认为 url 引扣的是对数据进行加密啊,这个其实他只是进行了编码,并没有加密啊。 第三个错误呢,就是说 pose 的请求的数据是在 hader 里边的,其实不是在 hid 里,在 boode 里边。第四个错误呢,就是说钙的请求只能够获取数据,不能提交数据,那其实他通常是用来获取数据,但他也可以提交数据。

