首先列出七层协议(恶补了大学所逃的计算机网络)
计算机七层协议:物理层 数据链路层 网络层 传输层 会话层 表示层 应用层
HTTP是应用层协议 ,他无需操心网络通信的细节,把联网细节都交给了因特网传输协议TCP/IP
HTTP 协议位于 TCP 的上层。HTTP 使用 TCP 来传输其报文数 据。与之类似,TCP 则位于 IP 的上层
1.DNS: 域名服务器
是进行域名和相应IP地址相互转换的服务器,DNS保存了一张域名和与之相对应的IP地址表,以解析消息的域名,一般和后端联调的时候,后端会让我们访问一个ip地址加上一个端口号的东东,之后发布时候要申请并换成域名,因为一个ip地址89.12.21.221:9090一堆数字,不便于记忆,我们需要到服务器申请一个类似www.baidu.com的域名方便记忆,相当于在服务器上面花钱放上自己投射的域名
当用户输入一个www.baidu.com的时候
浏览器会去本地缓存寻找dns解析的记录,如果缓存没有,则会去一个本地的hosts文件查看是否有改dns记录,有则返回(在该项目的终端输入vim /etc/hosts)
2.http请求发起和响应
通过下面一个问题来解释
用户输入url,到浏览器呈现用户,经过的流程
1.用户输入URL,浏览器获取到URL
2.浏览器(应用层)进行DNS解析(如果输入的是IP地址,此步骤省略)
3.根据解析出的ip地址+端口号,浏览器(应用层)发出http请求,请求中携带请求头header,请求体body
header包括:
- 请求的方法(get、post、put..)
- 协议(http、https、ftp、sftp…)
- 目标url(具体的请求路径已经文件名)
- 一些必要信息(缓存、cookie之类)
如果您在cookie中设置了HttpOnly属性,那么通过js脚本将无法读取到cookie信息,这样能有效的防止XSS攻击
HttpOnly的设置样例
javaEE
response.setHeader("Set-Cookie", "cookiename=value;
Path=/;Domain=domainvalue;Max-Age=seconds;HTTPOnly");
4.请求到达传输层,tcp协议为传输报文提供可靠的字节流传输服务,它通过三次握手等手段来保证传输过程中的安全可靠。通过对大块数据的分割成一个个报文段的方式提供给大量数据的便携传输。
5.到网络层,网络层通过ARP寻址得到接收方的mac地址,IP协议把在传输层被分割成一个个数据包传送接收方
- 到达数据链路层 请求阶段完成
7.接收方在数据链路层收到数据之后,层层传递到应用层,接收方程序就获得到请求报文- 接受方收到发送方的http请求后,进行请求文件资源的寻找并响应报文
9.发送方收到响应报文后,如果报文中的状态码表示请求成功,则接受返回的资源(如HTML文件),进行页面
3.TCP/IP协议
HTTP是一个应用层协议,它无须操心网络通信的具体细节,把联网细节都交给了通用可靠的因特网传输协议:TCP /IP
负责传输的TCP协议:
提供可靠的字节流服务,字节流服务指为了方便传输,将大块数据分割成报文段为单位的数据包进行管理。可靠的传输服务是指能够把数据准确可靠的传给对方,tcp为了传输大数据才把数据进行分割,而且TCP协议能够确认数据是否送达到达对方
为了确保数据准确送达,TCP采用三次握手策略,用TCP协议把数据包送出之后不会置之不理,他会向对方确认,握手过程中使用SYN和ACK标志
TCP做的事情:
- 无差错的数据传输
- 按序传输(数据总是会按照发送的顺序到达);
- 未分段的数据流(可以在任意时刻以任意尺寸将数据发送出去)。
负责传输的IP协议:
按协议分,IP网络协议位于网络层,所有网络系统都会用到IP协议,IP协议主要的作用就是将各种数据包传送给对方,确保传送到对方那里就是要满足各种条件,最重要的两个条件就是IP地址和MAC地址
- IP地址指明了节点被分配到的地址
- mac地址指的是网卡所属的固定地址
IP地址可以和MAC地址进行配对,IP地址可以改变,MAC地址基本上不会更改
4.页面的渲染
当一个请求发起和响应都完成了之后,浏览器就会收到响应内容,但是浏览器收到的是一串串代码和url链接,怎么把这些代码转化成用户能看见的就是浏览器所做的工作了
1. 浏览器接收到 HTML 文件并转换为 DOM 树,这一过程会遇到css代码以及js代码,浏览器也会下载并解析这些文件
2.将 CSS 文件转换为 CSSOM 树
这一过程会递归整个树,是很消耗资源的
div > a > span { color: red; }
这样的代码会一直查找到每个节点 所以避免写过于具体的css选择器,减少复杂的递归过程 值得注意的是,CSSOM运算是一个非常复杂的过程,性能消耗会比较大
-
尽量使用class和id,保证层级扁平
减少过度层叠,而且越是通用的CSS样式,执行速度越快,越是具体(选择器)的CSS样式,则执行速度越慢。 -
使用内联样式
外链的JS和CSS文件以前CSS的@import,在页面渲染的过程中,都会重新去服务器端请求。这其实,和我们常说的减少http请求量(合并http请求)类似,但是我么从渲染路径的角度来理解这样一种性能的消耗。
3. 得到DOM树以及CSSOM之后将两者整合为渲染树
当生成渲染树之后 浏览器就会根据渲染树进行布局(回流)
layout:根据得到的render tree来计算所有节点在屏幕的位置。
paint:遍历render树,并调用硬件图形API来绘制每个节点。
我们要减少重绘和回流
- 使用 transform 替代 top
CSS的最终表现分为以下四步:Recalculate Style -> Layout -> Paint Setup and Paint -> Composite Layers
按照中文的意思大致是 查找并计算样式 -> 排布 -> 绘制 -> 组合层这上面的几个步骤有点类似于上文说到的重排必定导致重绘,而查询属性会强制发生重排。所以上文提到的重排重绘内容可以结合这里进行理解。由于transform是位于Composite Layers层,而width、left、margin等则是位于Layout层,在Layout层发生的改变必定导致Paint Setup and Paint -> Composite Layers,所以相对而言使transform实现的动画效果肯定比top这些更加流畅。
- 使用 visibility 替换 display: none ,因为前者只会引起重绘,后者会引发回流(改变了布局`
- 不要使用 table 布局,可能很小的一个小改动会造成整个 table 的重新布局
- CSS 选择符从右往左匹配查找,避免节点层级过多
这一部分就是渲染原理中讲解到的内容 在下载文件时,也可以说下通过 HTTP/2 协议可以解决队头阻塞的问题 比如 遇到文件下载的会去下载文件,这里如果使用 HTTP/2 协议的话会极大的提高多图的下载效率。
get和post终极区别
GET和POST最大的区别主要是GET请求是幂等性的,POST请求不是。这个是它们本质区别,上面的只是在使用上的区别。
副作用
:副作用指当你发送完一个请求以后,网站上的资源状态没有发生修改,即认为这个请求是无副作用的。比如注册用户这个请求是有副作用的,获取用户详情可以认为是无副作用的。幂等
:指发送 M 和 N 次请求(两者不相同且都大于 1),服务器上资源的状态一致,比如注册 10 个和 11 个帐号是不幂等的,对文章进行更改 10 次和 11 次是幂等的。因为前者是多了一个账号(资源),后者只是更新同一个资源。
HTTP的GET/POST/DELETE/PUT方法幂等的情况:
GET
是幂等的,无副作用
比如我想要获得订单ID为2的订单:http://localhost/order/2
,使用GET
多次获取,这个ID为2的订单(资源)是不会发生变化的!
DELETE/PUT
是幂等的,有副作用
比如我想要删除或者更新ID为2的订单:http://localhost/order/2
,使用PUT/DELETE
多次请求,这个ID为2的订单(资源)只会发生一次变化(是有副作用的)!但继续多次刷新请求,订单ID为2的最终状态都是一致的
POST
是非幂等的,有副作用的
比如我想要创建一个名称叫3y的订单:http://localhost/order
,使用POST
多次请求,此时可能就会创建多个名称为3y的订单,这个订单(资源)是会多次变化的,每次请求的资源状态都会变化!
HTTP2和HTTP1的区别
HTTP2新特性
- 多路复用 复用一个tcp链接传输所有请求数据
- 压缩header:使用了 HPACK 压缩格式对传输的 header 进行编码,减少了 header 的大小
- HTTP2 中所有加强性能的核心点在于此。在之前的 HTTP 版本中,我们是通过文本的方式传输数据。在 HTTP2 中引入了新的编码机制,所有传输的数据都会被分割,并采用二进制格式编码。
- 服务端PUSH:服务端可以在客户端某个请求后,主动推送其他资源。
HTTP1.0和HTTP1.1区别
- HTTP1.0 规定浏览器与服务器只保持短暂的连接,浏览器的每次请求都需要与服务器建立一个TCP连接,服务器完成请求处理后立即断开TCP连接,服务器不跟踪每个客户也不记录过去的请求。
- HTTP1.1持续连接,也需要增加新的请求头来帮助实现,例如,Connection请求头的值为Keep-Alive时,客户端通知服务器返回本次请求结果后保持连接;Connection请求头的值为close时,客户端通知服务器返回本次请求结果后关闭连接。HTTP 1.1还提供了与身份认证、状态管理和Cache缓存等机制相关的请求头和响应头。