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、讲一下事件循环

事件循环的原因是因为js引擎是单线程执行代码，所以所有执行的代码需要在队列中排队执行

所以事件循环至少需要一个队列，事件循环就是js引擎会在页面存在期间不停的去检查队列的头部，如果有任务需要执行则执行一项任务，如果没有则更新渲染页面，以此反复执行。

事件循环在整个页面生存期间都会一直检查任务队列中是否有任务需要执行，知道用户关闭页面为止

2、知道宏任务和微任务吗？浏览器是怎么区分它们的？

宏任务例子：包括创建主文档对象，解析HTML、执行主线js代码，更改当前url以及各种事件，如页面输入事件、鼠标事件等

从浏览器的角度看，宏任务代表一个个离散的独立的工作单元。运行完任务后，浏览器可以继续其他调度，如重新渲染页面的UI工作或者执行垃圾回收

微任务例子：promise的回调函数、dom发生变化等

微任务是更小的任务，微任务是更新应用程序的状态，但必须在浏览器任务继续执行其他任务之前执行，浏览器任务包括重新渲染页面的UI

3、知道requestAnimationFrame吗？

window对象的一个api

window.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的设计思想有什么不同

这道题因为不知道该怎么答，所以让面试官提示了一下从哪个方面入手，后面就讲了一下使用过程中的区别

一次有质量的面试题