一次有质量的面试题
http部分
1、TCP和UDP区别(都属于传输层)
TCP：面向连接和字节流，有确认机制，重发机制，流量控制，拥塞控制，建立连接需要3次握手，断开连接需要四次挥手。
UDP：无连接，无确认机制、重传机制，开销低，速率高，可用于多播和组播
2、TCP和UDP全称
TCP(Transmission Control Protocol)，传输控制协议，传输数据前需要先建立连接，是一种可靠的、基于字节流的传输层通信协议；
UDP(User Datagram Protocol)，用户数据报协议，传输数据的时候不需要建立连接，是一种面向事务的简单不可靠的信息传送协议。
3、TCP属于哪一层（http是应用层）
传输层
4、网络分层可以几层(五层)
5、知道https吗
6、TCP的三次握手和四次分手？这么做是为了什么？
三次握手
-
请求新的TCP连接时，客户端要向服务端发送一个小的TCP分组。这个分组中设置了一个特殊的SYN标记，说明这是一个连接请求
-
如果服务器接受了连接，就会对一些连接参数进行计算，并向客户端会送一个TCP分组，这个分组中的SYN和ACK标记都被置位，说明连接请求已被接受
-
最后客户端向服务器会送一条确认信息，通知它连接已成功建立，客户端可以发送数据了
三次握手是为了数据传输的可靠性
四次分手
css部分
1、position有哪些属性
- static
- relative
- absolute
- fixed
- sticky （粘性布局，可以实现吸顶效果）(如何使用)
2、flex布局主轴排列方式使用什么
justify-content: flex-start | flex-end | center | space-between | space-around
3、知道align-items和align-content的区别是什么吗？
align-items 定义项目在交叉轴上如何对齐 (可实现垂直居中效果)
align-items: flex-start | flex-end | center | baseline | stretch`
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
align-content 定义了多根轴线的对齐方式 如果项目只有一根轴线，该属性不起作用
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。
4、flex:1是什么意思
flex:1 是flex-grow、flex-shrink、flex-basis属性的简写
默认值是 0、1、auto
flex-grow:0；// 定义项目的放大比例，默认为0，如果存在剩余空间，也不放大
flex-shrink:1；// 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
flex-basis:<length> | auto // 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如200px），则项目将占据固定空间
js部分
1、讲一下事件循环
2、知道宏任务和微任务吗？浏览器是怎么区分它们的？
3、知道requestAnimationFrame吗
4、考点是变量提升
console.log(a)
function a(){
console.log('a')
}
var a = 1
console.log(a)
function b(){
console.log(a)
let a = 2 // 后面拓展将let修改成var
}
b()
5、使用递归实现fill(3,4),打印出[4,4,4]
框架部分
1、vue和react的设计思想有什么不同
这道题因为不知道该怎么答，所以让面试官提示了一下从哪个方面入手，后面就讲了一下使用过程中的区别
2、vue2和vue3的区别是什么？proxy兼容性，vue3针对ie浏览器怎么做的兼容
3、为什么使用key