吕梁市城乡建设局网站网站首页流程图
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请求过程
双向通信
客户端服务端双向通信，常见的双向通信方式
websocket
websocket实现了浏览器与服务端的全双工通信，在实现实时通信的同时，能够更好的节省服务端的资源和带宽
websocket建立在TCP协议之上，握手阶段采用http协议
webscoket由于不再需要通过http协议通信，省去请求头等内容设置，因此，数据格式会更加轻量，通信更加高效，性能开销也相应的降低
wenscoket没有同源限制，因此客户端可以与任意服务端进行通信
参考教程： 前端进阶教程