晚上回来没事。突然发现上次看图解HTTP还是一年前,现在能记起来的也就是几个常用的http错误代码..今天花点时间再次回顾一下HTTP协议。
想到哪说到哪吧。
我们知道网络从下到上大致可以分为
物理层=>数据链路层=>网络层=>传输层=>会话层=>表示层=>应用层。
用图表示就是这样。
今天就主要从应用层的HTTP协议说..我记得之前写过一篇博客是讲《当我们输入URL之后,到页面呈现在我们面前,这个过程发生了什么》。感觉弄明白这个 HTTP工作原理 可以很好理解。
当我们在浏览器输入URL URL=>ip地址
解析为IP的操作
这里简单说下在缓存中查找的大致流程
先在浏览器缓存中查找(即本地缓存) 找不到 再去 路由器缓存里面找 路由器缓存还找不到?那就去运营商的缓存里面找。实在不行就去web服务器中查询。直到找到这个IP地址为止。
打包HTTP请求。
具体看图。
zhe'li
这里的80端口是http协议的默认端口,https的是443。
通过TCP协议,向服务器发送请求
然后就是通过TCP协议,想服务器发送请求,俗称的三次握手。
之前我一直好奇为什么每次说到HTTP的传输协议的适合,就会带上一脚什么三次握手。。后面查了查资料。也算是大致理清了期间的关系。
简单来说 HTTP协议和TCP传输协议两则没有区别,因为一开始就说了OSI7层协议的时候就说了HTTP协议是应用层的东西,TCP协议是传输层的东西(当然还有UDP协议这个一会扯)。两者没有关系。
HTTP本身作用就是和服务器交换数据,但是怎么操作他不管。而TCP协议的任务就是确保数据的准确性,传输层是利用网络层提供的功能来给传输层之上的层提供更加可靠的服务,所以tcp之所以使用三次握手来建立连接,就是为了增加可靠性。只是恰好HTTP是基于TCP协议的。所以每次提到HTTP协议的都会说上一句三次握手。
传统的HTTP在一次来回后就会服务器断开TCP连接,如果想下次交互无需三次握手,直接保持连接配对。只需要在请求头部添加"Connection: Keep-Alive"即可。
传统http在一次来回后就服务器会断开TCP连接,开了这个选项,服务器就会保持住连接,下次交互前就无需再3次握手了
三次握手简单流程就是这样吧
我想发一些数据可以吗?
可以的,啥时候发
现在就发,你接着把
那其他传输协议呢?比如UDP?
A:我这有东西给你了 接着
B: 我这有东西给你 接着
web服务器接收请求,交给相关进程处理
服务器响应请求,回传Response
浏览器接受响应,然后渲染页面,呈现在我们勉强。
解析HTML生成DOM树
解析合并CSS形成CSSDOM树,以及解析javascript代码
CSS和DOM组合形成渲染树.
进行布局,在浏览器页面绘制渲染树节点的熟悉(位置,宽高)
绘制元素,这主要是颜色和层级之类的
合并图层,把页面呈现在用户面前。
这里说一句 之前说的移动端尽量少用定位然后top left 来改变图片的位置。而是使用transform这种css3的变化。主要一个原因就是前者位置的变动 引起了浏览器的重绘和重排,二后者只会造成浏览器的重绘。这样也相当于性能优化了。
突然发现把HTTP请求的大致过程说的差不多了。蹭着时间还早 还是继续总结点东西。
HTTP的状态码
这个应该很好理解。
1开头的:表示请求已经接受到了。
2开头的:表示请求正常
3开头的:涉及到重定向的 301:永久重定向 302:临时重定向 304:缓存里面找的
4开头的:客户端的报错问题 403:收到请求了,但是给拒绝 404:没找到 401:没权限
5开头的:服务器端的报错问题
浏览器的缓存如何控制
Last-Modified
我们知道当浏览器第一次请求一个URL的时候,请求成功,服务器的返回状态是200,内容是你请求的资源,同时会有一个Last-Modified的属性标记次文件在服务器端最后被修改的时间,格式例如:If-Modified-Since:Tue, 05 Sep 2017 16:03:45 GMT如果第二次请求同一个URL的时候,请求头部会有一个if-Modified-Since服务器收到后会和最后一次修改的时间对比,来判断客户端的页面是不是最新的。如果资源没有发生改变则返回304状态码。当服务器端代码发生改变或者重启服务器时,则重新发出资源,返回和第一次请求时类似。从而保证不向客户端重复发出资源,也保证当服务器有变化时,客户端能够得到最新的资源。
Etag
Etag作用和last-Modified类似,简而言之就是服务器响应时,给请求URL的一个标记,
如果下次再请求同一个URL的时候,请求表头会生成一个,服务器接收到后,会对比两次的Etag值,如果相同则返回304状态码。不同则返回新的内容。
expries
在服务器发回响应时候,会发送一个Expires,告之浏览器在过期时间之前访问时,浏览器都可以直接从浏览器缓存中访问数据,而无需再次请求
Cache-control
Cache-control为HTTP 1.1版本新增加的一个,同Expires类似,只是Expires=时间,Cache-Control: max-age=秒。
基本流程图就是这样。。
领取专属 10元无门槛券
私享最新 技术干货