【前端进阶】07 http协议和前端开发有什么关系
http协议和前端的关系
- 网络请求的过程
- http协议
- http cookie
- http缓存
- 浏览器get请求过程
- 双向通信
- websocket
http请求的场景相对复杂,对应的http协议也是各式各样的。在日常开发中,经常会使用到cookie、浏览器缓存机制、各种形式的网络连接,这些都和http请求有密切的关系
网络请求的过程
http协议
http cookie
http协议是无状态的,这意味着,在同一TCP连接中,先后发起的请求之前没有任何关系,用户在同一个网站中进行连续的操作,服务端无法知道这些操作来自哪里,使用httpcookie可以解决这个问题:
- 当服务端http响应给客户端时,通过在响应里添加一个setCookie信息
- 浏览器收到setCookie信息的响应后会将Cookie进行保存,在后面发送给该服务端每个请求中,都会带上cookie信息
- 服务端根据cookie信息,就能获取客户端的数据信息
由于cookie信息是被浏览器自动识别并被保留发送的,因此在默认情况下,浏览器关闭后就会被自动删除,但我们也可以通过指定过期时间或者有效期来让cookie获取更久的有效期
如果网站上设置了cookie之后,所有符合条件(有效期、域名、路径、适用站点等)的请求都会自动被带上cookie,这就带来了安全隐患,服务端只知道请求来自某个用户的浏览器,却不知道请求本身是否是用户自愿发出的,容易造成安全隐患
为了应对这种情况,我们可以校验http请求中的Referer字段,这个字段用来标明请求来自于哪个地址,由于该字段可能会被篡改,因此只能作为辅助校验手段
http缓存
通过缓存可以有效的减少资源获取的耗时,减少用户的等待时长,从而推升用户体验
通过http协议,设置浏览器对http响应资源进行缓存,使用浏览器缓存后,当我们再发起http请求时,如果浏览器缓存发现请求的资源已经被存储,它会拦截请求并返回该资源的副本,不需要再次请求服务端获取资源,因此减少了http请求的耗时,同时也有效的缓解了服务端压力
http缓存只能存储get请求的响应内容
- 不缓存内容,每次请求都会从服务端获取最新内容
- 缓存内容,在有效期内会从缓存中获取内容,如果用户刷新或者内容过期则去服务端获取最新内容
在浏览器中,是依靠请求和响应中的头信息来控制缓存的,根据缓存的行为可以分为
浏览器get请求过程
双向通信
客户端服务端双向通信,常见的双向通信方式
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/174099e683a04f50b0428d754b4cf4a1.png
websocket
websocket实现了浏览器与服务端的全双工通信,在实现实时通信的同时,能够更好的节省服务端的资源和带宽
websocket建立在TCP协议之上,握手阶段采用http协议
webscoket由于不再需要通过http协议通信,省去请求头等内容设置,因此,数据格式会更加轻量,通信更加高效,性能开销也相应的降低
wenscoket没有同源限制,因此客户端可以与任意服务端进行通信
参考教程: 前端进阶教程