面试准备

高频题

其他相关

自我介绍

项目难点

指尖移通

课表查询：

通过xyz轴

问卷调查：

动态解析不同类型题目

疫情打卡：

动态解析打卡字段，无限级渲染

项目重构：

新的设计模式，ui框架，新的规范体系建设

​

js

基本数据类型

常用的数据类型有5+1种；即5种基本的数据类型(String、undefined、null、boolean、number，Symbol),1种复杂的数据类型(object)；

闭包

1.闭包是指有权访问另一个作用域中的变量的函数。
2.函数嵌套函数
3.函数内部可以引用函数外部的参数和变量
4.参数和变量不会被垃圾回收机制回收

bind和apply，call的区别

1.call、apply、bind都是改变this指向的方法
2.call是一个一个传参，apply是以数组形式传递
3.bind和call传参方式一样，返回一个函数，没有立即执行。

prototype原型的理解

1.每个对象都会在其内部初始化⼀个prototype属性，
2.当我们访问⼀个对象的属性时如果这个对象内部不存在这个属性，那么他就会去 prototype ⾥找这个属性，这个prototype ⼜会有⾃⼰的 prototype，于是就这样⼀直找下去，也就是我们平时所说的原型链的概念关系
3.当我们修改原型时，与之相关的对象也会继承这⼀改变
4.当我们需要⼀个属性的时， Javascript 引擎会先看当前对象中是否有这个属性， 如果没有的就会查找他的 Prototype 对象是否有这个属性，如此递推下去，⼀直检索到 Object 直到null。

This的理解

1. 作为函数调用，非严格模式下，this指向window，严格模式下，this指向undefined；
2. 作为某对象的方法调用，this通常指向调用的对象。
3. 使用apply、call、bind 可以绑定this的指向。
4. 在构造函数中，this指向新创建的对象
5. 箭头函数没有单独的this值，this在箭头函数创建时确定，它与声明所在的上下文相同。

ES6用过哪些

解构赋值
模板字符串
箭头函数
set map数据结构
promise

new操作符具体干了什么

1.创建一个空对象
2.链接到原型
3.绑定this值
4.返回新对象

Promise 对象

三种状态 两种结果
pending: 初始状态，不是成功或失败状态。
fulfilled: 意味着操作成功完成。
rejected: 意味着操作失败。

promise的缺点
1、无法取消Promise,一旦新建它就会立即执行，无法中途取消。
2、如果不设置回调函数，promise内部抛出的错误，不会反应到外部。
3、当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。
promis的优点
1.解决回调地狱问题

Promise如何实现串行执行

proxy和Object.defineProperty区别

1.Proxy使用上比Object.defineProperty方便的多。
2.Proxy代理整个对象，Object.defineProperty只代理对象上的某个属性。
3.如果对象内部要全部递归代理，则Proxy可以只在调用时递归，而Object.defineProperty需要在一开始就全部递归，Proxy性能优于Object.defineProperty。
4.对象上定义新属性时，Proxy可以监听到，Object.defineProperty监听不到。
5.数组新增删除修改时，Proxy可以监听到，Object.defineProperty监听不到。
6.Proxy不兼容IE，Object.defineProperty不兼容IE8及以下。

事件模型

W3C 中定义事件的发⽣经历三个阶段：捕获阶段（ capturing ）、⽬标阶段（ targetin ）、冒泡阶段（ bubbling ）
冒泡型事件：当你使⽤事件冒泡时，⼦级元素先触发，⽗级元素后触发捕获型事件：
当你使⽤事件捕获时，⽗级元素先触发，⼦级元素后触发
阻⽌冒泡：在 W3c 中，使⽤ stopPropagation() ⽅法；在IE下设置 cancelBubble = true 
阻⽌捕获：阻⽌事件的默认⾏为，例如 click - <a> 后的跳转。
在 W3c 中，使⽤preventDefault() ⽅法，在 IE 下设置 window.event.returnValue = false

event loop事件循环

1. 开始一个宏任务的执行（首先是script整体代码作为第一个宏任务入栈，开始执行）。
2. 如果遇到异步，等异步任务有了运行结果后再把他们放到事件队列，如果属于微任务的话加入微任务队列。
3. 当前宏任务执行完毕，接下来把它执行过程中产生的微任务依次执行。
4. 微任务全部执行完毕，浏览器开始重新渲染。
5. 去事件队列读取下一个宏任务，不断循环上面过程。

浏览器与node的事件循环区别

浏览器和 Node 环境下，microtask 任务队列的执行时机不同

​ 浏览器环境下，microtask（微任务） 的任务队列是每个 macrotask （宏任务）执行完之后执行。而在 Node.js 中，microtask 会在事件循环的各个阶段之间执行，也就是一个阶段执行完毕，就会去执行 microtask 队列的任务。

• Node 端，microtask 在事件循环的各个阶段之间执行
• 浏览器端，microtask 在事件循环的 macrotask 执行完之后执行

外部输入数据–>轮询阶段(poll)–>检查阶段(check)–>关闭事件回调阶段(close callback)–>定时器检测阶段(timer)–>I/O 事件回调阶段(I/O callbacks)–>闲置阶段(idle, prepare)–>轮询阶段（按照该顺序反复运行）…

• timers 阶段：这个阶段执行 timer（setTimeout、setInterval）的回调
• I/O callbacks 阶段：处理一些上一轮循环中的少数未执行的 I/O 回调
• idle, prepare 阶段：仅 node 内部使用
• poll 阶段：获取新的 I/O 事件, 适当的条件下 node 将阻塞在这里
• check 阶段：执行 setImmediate() 的回调
• close callbacks 阶段：执行 socket 的 close 事件回调

设计模式

面向对象三大基本特征

封装、继承、多态

垃圾回收机制

引用计数

引用计数有个最大的问题： 循环引用。

引用计数的含义是跟踪记录每个值被引用的次数，当这个引用次数变成0时，则说明没有办法再访问这个值了，因而就可以将其所占的内存空间给收回来

标记清除

javascript中最常用的垃圾回收方式，当变量进入执行环境是，就标记这个变量为“进入环境”。当变量离开环境时，则将其标记为“离开环境”。

css

CSS盒模型

分为标准盒模型和怪异盒模型

怪异盒模型的宽高=内容宽高+padding+border

标准盒模型的宽高=内容宽高

如何在CSS 设置这两个模型

标准盒模型：

box-sizing: content-box

怪异盒模型：

box-sizing: border-box

实现两栏布局的几种方式

/*
1.浮动
2.flex布局
3.绝对定位
4.使用calc()函数
*/

//1.采用浮动
.outer{
    height:100px;
}
.left{
    float:left;
    height:100px;
    width:200px;
    background:yellow;
}
.right{
    margin left:200px;
    height:100px;
    width:auto;//撑满
    background:red;
}

// 2.flex布局
.outer{
    display:flex;
    height:100px;
}
.left{
    height:100px;
    flex shrink:0;
    flex grow:0;
    flex basic:200px
}
.right{
    height:100px;
    flex:auto
}

// 使用绝对定位实现—absolute
.wrap {
    overflow: hidden;
    position: relative;
}
/* 脱离文档流 */
.left {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 200px;
    background: purple;
}

.right {
    margin-left: 200px;
    background: skyblue;
    height: 200px;
}

行内元素的垂直居中方法

（1）设置块元素的 height,line-height为相同的值；

（2）vertical-align:middle

（3）display: table-cell;vertical-align: middle；

css实现水平垂直居中的几种方式

（1）display: flex;  align-items: center;  justify-content: center;

（2）利用相对定位和绝对定位，再加上外边距和平移的配合；

		父元素：position: relative;

		子元素：position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);

inline-block 有什么作用

1、和其他元素都在一行上；

2、元素的高度、宽度、行高以及顶和底边距都可设置。

position参数

absolute	
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	
生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

css中怎么清除浮动？

（1）使用clear:both清除浮动
（2）利用伪元素:after来清除浮动
（3）使用CSS的overflow属性

display 属性

block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inherit	规定应该从父元素继承 display 属性的值。
inline-block	行内块元素。（CSS2.1 新增的值）
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
flex
	flex-direction
	flex-wrap

flex属性

flex-grow	进行扩展的量。
flex-shrink	进行收缩的量。
flex-basis	初始长度
flex-wrap：nowrap（不换行） | wrap（向下换） | wrap-reverse（向上换）;

justify-content 水平（主轴上）对齐方式

align-items 十字交叉轴上对齐方式

flex-direction 项目排列方向

子元素设置 justify-self 属性设置单个盒子在其布局容器适当轴中的对其方式

可以让子元素单独排列

flex:1表示什么

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选

• flex: 1; === flex: 1 1 0;

1. flex-grow属性（num）

   flex-grow 定义自身放大比例，默认为0不放大。例如：1/2/1=25%:50%:25%

2. flex-shrink属性（num）

   flex-shrink定义了空间不足时自身缩小比例，默认为1自动缩小，0不缩小。

3. flex-basis属性

flex-basis定义最小空间，默认值为auto，即自身的本来大小。

css选择器

选择器	例子	例子描述
.class	.intro	选择 class="intro" 的所有元素。
element	p	选择所有 元素。
#id	#firstname	选择 id="firstname" 的元素。
:active	a:active	选择活动链接。
::after	p::after	在每个 的内容之后插入内容。
::before	p::before	在每个 的内容之前插入内容。
:first-child	p:first-child	选择属于父元素的第一个子元素的每个 元素。
:last-child	p:last-child	选择属于其父元素最后一个子元素每个 元素。
:nth-child(n)	p:nth-child(2)	选择属于其父元素的第二个子元素的每个 元素。

圣杯布局和双飞翼布局的区别与实现

BFC

块格式化上下文

它是独立的容器，与其他的元素互不影响。

触发条件

1. 设置display为flex,inline-block,table-cell,inline-flex
2. 设置position为absolute,fixed
3. 设置overflow不为visible
4. 设置float不为none

特性

1. 一个BFC中的margin重叠

2. 浮动元素脱离文档流，BFC可以解决元素塌陷问题，可以自适应浮动子元素的高度

3. 浮动元素脱离文档流，元素重叠在一起，通过BFC可以让其分开

z-index在什么时候才能触发

在使用了position的定位属性的时候才可以触发

网络

OSI模型各层介绍

• 物理层：RJ45、CLOCK、IEEE802.3
• 数据链路：PPP、FR、HDLC、VLAN、MAC
• 网络层：IP、ICMP、ARP、RARP、OSPF、IPX、RIP、IGRP
• 传输层：TCP、UDP、SPX
• 会话层：NFS、SQL、NETBIOS、RPC
• 表示层：JPEG、MPEG、ASII、MP4
• 应用层：FTP、DNS、Telnet、SMTP、HTTP、WWW、NFS

应用层: 应用层是开放系统的最高层,是直接为应用进程提供服务的。其作用是在实现多个系统应用进程相互通信的同时,完成一系列业务处理所需的服务。主要的协议有http ftp

表示层：简单来说就是win系统想给QQ发短信给linux的QQ的规范标准，表示层会通过使用一种通格式来实现多种数据格式之间的转换。

会话层：主要在你的系统之间发起会话或者接受会话请求。

运输层：主要的协议有tcp和udp，tcp将数据封装成用户数据报或者说是报文，然后分段传输，udp将数据封装成用户数据报直接传输。运输层向它上面的应用层提供端到端通信服务，它属于面向通信部分的最高层，同时也是用户功能中的最低层。传输层对收到的报文进行差错检测。

网络层：主要的协议有ip，主要是将报文封装成ip数据报。

*数据链路层：**ip数据报封装成帧，传给物理层。***

物理层：主要是将比特或者说是0和1转化为强弱电流，然后到接受方在将强弱电流转化为01.主要定义光纤的接口，网线的接口。

数据链路层解决的三个问题

1、封装成帧

封装成帧就是在一段数据的前后分别添加首部、尾部和帧检验序列 ，然后就构成了一个帧。
注：首部和尾部的一个重要作用就是帧定界。

2、透明传输

3、差错检测

传输过程中可能会产生比特差错：1可能会变成0，0可能会变成1，为了检查传输是否正确，需要在原始数据后加上一个帧检验序列（FCS）。

https的原理

对称加密

加密和解密都是使用同一个密钥，常见的对称加密算法有 DES、3DES 和 AES 等

• 优点：算法公开、计算量小、加密速度快、加密效率高，适合加密比较大的数据。
• 缺点：
  1. 交易双方需要使用相同的密钥，传输过程中无法保证不被截获，所以对称加密的安全性得不到保证。
  2. 每对用户每次使用对称加密算法时，都需要使用其他人不知道的惟一密钥，这会使得发收信双方所拥有的钥匙数量急剧增长，密钥管理成为双方的负担。对称加密算法在分布式网络系统上使用较为困难，主要是因为密钥管理困难，使用成本较高。

非对称加密

非对称加密需要公钥和私钥，公钥发送给客户端，私钥存在本地，私钥就像是钥匙，公钥就像是锁芯，相互对应。

客户端生成随机key，通过公钥加密key，传递给服务端。

服务端通过私钥解密获得key，双方随后使用密钥key进行对称加密传输。

TCP和UDP的区别

• TCP 是面向连接的，UDP 是面向无连接的
• UDP程序结构较简单
• TCP 是面向字节流的，UDP 是基于数据报的
• TCP 保证数据正确性，UDP 可能丢包
• TCP 保证数据顺序，UDP 不保证

http1.0、http1.1、http2.0

HTTP1.0和HTTP1.1的区别

1. 长连接

   HTTP1.1支持长连接和请求的流水线处理，在一个TCP连接上可以传送多个HTTP请求和响应，减少了建立和关闭连接的消耗和延迟，在HTTP1.1中默认开启长连接keep-alive，一定程度上弥补了HTTP1.0每次请求都要创建连接的缺点。HTTP1.0需要使用keep-alive参数来告知服务器端要建立一个长连接。

2. 节约带宽

HTTP1.0中存在一些浪费带宽的现象，并且不支持断点续传功能，HTTP1.1支持只发送header信息。

3. HOST域

在HTTP1.0中认为每台服务器都绑定一个唯一的IP地址，因此，请求消息中的URL并没有传递主机名，虚拟主机技术的发展，在一台物理服务器上可以存在多个虚拟主机，并且它们共享一个IP地址，HTTP1.1的请求消息和响应消息都支持host域，且请求消息中如果没有host域会报告一个错误

4. 缓存处理

在HTTP1.0中主要使用header里的If-Modified-Since,Expires来做为缓存判断的标准，HTTP1.1则引入了更多的缓存控制策略例如Entity tag，If-Unmodified-Since, If-Match, If-None-Match等更多可供选择的缓存头来控制缓存策略。

5. 新增状态码

在HTTP1.1中新增了24个错误状态响应码，如409（Conflict）表示请求的资源与资源的当前状态发生冲突；410（Gone）表示服务器上的某个资源被永久性的删除。

HTTP1.1和HTTP2.0的区别

1. 多路复用
2. 头部数据压缩
3. 二进制传输
4. 服务器推送

简单请求与复杂请求

简单请求方式get post head，请求头有相应的请求头范围内都算简单请求，

复杂请求会提前发起一次预请求，这个预请求实际上就是在为之后的实际请求发送一个权限请求，在预回应返回的内容当中，服务端应当对这两项进行回复，以让浏览器确定请求是否能够成功完成。

TCP三次握手

为什么需要TCP三次握手

为了保证服务端能收接受到客户端的信息并能做出正确的应答而进行前两次(第一次和第二次)握手，
为了保证客户端能够接收到服务端的信息并能做出正确的应答而进行后两次(第二次和第三次)握手。

四次挥手

为什么连接的时候是三次握手，关闭的时候却是四次握手？

• 建立连接的时候， 服务器在LISTEN状态下，收到建立连接请求的SYN报文后，把ACK和SYN放在一个报文里发送给客户端。
• 关闭连接时，服务器收到对方的FIN报文时，仅仅表示对方不再发送数据了但是还能接收数据，而自己也未必全部数据都发送给对方了,所以服务器可以立即关闭，也可以发送一些数据给对方后，再发送FIN报文给对方来表示同意现在关闭连接。因此，服务器ACK和FIN一般都会分开发送，从而导致多了一次。

HTTP报文的结构

1.是请求方法，HTTP/1.1 定义的请求方法有8种：GET、POST、PUT、DELETE、PATCH、HEAD、OPTIONS、TRACE,最常的两种GET和POST。
2.为请求对应的URL地址，它和报文头的Host属性组成完整的请求URL
3.是协议名称及版本号。
4.是HTTP的报文头，报文头包含若干个属性，格式为“属性名:属性值”，服务端据此获取客户端的信息。
5.是报文体，它将一个页面表单中的组件值通过param1=value1&param2=value2的键值对形式编码成一个格式化串，它承载多个请求参数的数据。不但报文体可以传递请求参数，请求URL也可以通过类似于“/chapter15/user.html? param1=value1&param2=value2”的方式传递请求参数。

跨域

1.jsonp

> JSONP 的原理很简单，就是利⽤