以下为常备面试题集锦，面好多家公司大都问的如此（后续更新补）；还有一些算法和手写代码后面整理；
js陈述类型
1、Es6的class和构造函数的区别：
class xx {
}
（1）不存在变量提升
（2）方法默认是不可枚举的，class所有方法没有原型对象prototype也没有构造器不能用new来调用；
2、普通函数和箭头函数的区别？
（1）this指向不同 普通函数this指向为方法调用的对象，可以通过call、apply、bind改变this指向，箭头函数不会创建自己的this，只会从自己的作用域的上一层继承this，
call、apply、bind只能调用传递参数，不可修改this指向；
（2）箭头函数不可以当做构造函数，不能用new 命令
（3）箭头函数不可以使用yield 命令，不能作为Generator 函数；
（4）箭头函数不可以使用arguments对象，可用rest参数【也叫剩余参数】代替
3、 localStorage、sessionStorage和 cookie 的区别：
（1）存储大小：cookie一般不超过4k，sessionStorage、localStorage 5M或者更大
（2）数据有效期：cookie若没设置时间关闭浏览器cookie失效，若设置了时间cookie就会存放在硬盘里过期才失效，
sessionStorage 关闭页面或者浏览器就被清除，localStorage 永久有效除非手动清除；
（3）作用域：cookie、localStorage 同源窗口共享 ，sessionStorage在同一浏览器窗口是共享的；
（4）通信：cookie传递于服务器和浏览器之间，localStorage、sessionStorage仅在浏览器保存
4、this指向
（1）全局函数 全局环境中this指向window
（2）方法调用：this指向调用该方法的对象
（3）构造函数调用：this指向新创建的实例对象
（4）call和apply调用：允许改变this指向，通常指向函数中指定的参数对象；
（5）箭头函数的调用：由于没有this对象，所以指向外层的this
（6）在函数中，在严格模式下，this 是未定义的(undefined)
（7）在事件中，this 表示接收事件的元素；
5、new 的过程做了什么
（1）创建一个空对象，将它的引用赋给 this，继承函数的原型。
（2）通过 this 将属性和方法添加至这个对象
（3）最后返回 this 指向的新对象，也就是实例（如果没有手动返回其他的对象）
手动实现一个new方法
// 构造器函数
let Parent = function (name, age) {
this.name = name;
this.age = age;
};
Parent.prototype.sayName = function () {
console.log(this.name);
};
//自己定义的new方法
let newMethod = function (Parent, ...rest) {
// 1.以构造器的prototype属性为原型，创建新对象；
let child = Object.create(Parent.prototype);
// 2.将this和调用参数传给构造器执行
let result = Parent.apply(child, rest);
// 3.如果构造器没有手动返回对象，则返回第一步的对象
return typeof result === 'object' ? result : child;
};
//创建实例，将构造函数Parent与形参作为参数传入
const child = newMethod(Parent, 'echo', 26);
child.sayName() //'echo';
//最后检验，与使用new的效果相同
child instanceof Parent//true
child.hasOwnProperty('name')//true
child.hasOwnProperty('age')//true
child.hasOwnProperty('sayName')//false
html、css陈述类型
1、html5新特性
语义化标签：header、main、footer等
新表单标签：calendar、date、time、url等
音频、视频： audio 和 video
本地存储： localStorage、sessionStorage
canvas
拖拽
地理定位
querySelect() 返回匹配指定的第一个元素 和 querySelectAll() 返回匹配指定的所有元素
WebSocket：单个 TCP 连接上进行全双工通讯的协议
2、css3新特性
倒圆角
文本、元素阴影
渐变背景
新增选择器：nth-of-type(n)、nth-child(n)、
父元素前后插入元素
ele::before{}、ele:after:{}
盒子模型：box-sizing: border-box | content-box
W3C盒子模型(标准盒模型)：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）【不包含padding和border】
IE盒子模型(怪异盒模型)：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）【包含了padding和border】
变形【transform、translate】
过度【transition】
媒体查询【@media】
字体引入【@font-face】
Animation：@keyframes 规则
3、margin重叠的现象解决： （IFC和BFC）
外层元素overflow:hidden;
外层元素: padding代替
内层元素绝对定位
内层元素加 float:left 或者 display:inline-block;
内层元素透明边框
4、移动端的适配以及单位方案
vw和vh：视窗单位，1vw = 1%的视口宽度 1vh = 1%的视口高度；
百分比宽度
rem自适应
css3的媒体查询
5、2个div都是50%宽度，inline-block,没有排到同一排?
外层元素字体大小font-size=0，子元素div中设置具体的字体大小；原因：2个子元素div中间空白节点继承父元素的font-size（浏览器默认的font-size）
6、css动画和js动画有什么区别
（1）代码复杂度方面，简单动画，css 代码实现会简单一些，js 复杂一些。复杂动画的话，css 代码就会变得冗长，js实现起来更优。
（2）动画运行时，对动画的控制程度上，js 比较灵活，能控制动画暂停，取消，终止等，css动画不能添加事件，只能设置固定节点进行什么样的过渡动画。
（3）兼容方面，css 有浏览器兼容问题，js 大多情况下是没有的。
（4）性能方面，css动画相对于优一些，css 动画通过GUI解析，js 动画需要经过j s 引擎代码解析，然后再进行 GUI 解析渲染。
性能优化陈述类型
1、前端性能优化有哪些方面：
（1）网络层面：减少HTTP请求，合并css、js文件，雪碧图（css sprite）的使用、使用base64表示简单的图片（空白图）
减小资源体积：gzip压缩、js、css、图片压缩， 缓存应用：DNS缓存，CDN部署与缓存、http缓存
（2）渲染和操作DOM方面：css文件放在头部、js文件放在尾部或者异步，尽量避免内联样式，尽量避免在document上直接频繁操作dom，尽量使用css动画
使用calssName代替大量的内联样式的修改、使用事件代理；减少标签选择器的使用；
（3）数据交互层面：图片预加载、懒加载；异步请求的优化：使用json数据格式进行交互，部分常用数据缓存；大量数据运算时候使用webWorker；
前端安全和浏览器相关类型
1、前端安全防范措施 【主要了解xss和csrf】
（1）xss攻击【跨站脚本攻击】
转义字符
使用js-xss,使用白名单指定的配置清理不收信任的HTML
开启CSP（建立白名单）通过设置HTTP Header 中的 Content-Security-Policy 和 <meta http-equiv="Content-Security-Policy">
（2）CSRF ('跨站伪造请求）
对cookie设置SameSite属性，表示cookie不随着跨域请求发送
通过验证Referer 来判断该请求是否为第三方网站发起的
请求时附带验证信息，比如验证码或者token；
（3）SQL注入
检出变量数据类型和格式
使用预编译绑定的变量的sql语句
转义特殊字符
（4）点击劫持
CSP,XSS和CSRF的防御，也可以防御点击劫持对后端服务器的攻击
设置http响应头，x-Frame-Options 防止ifame内嵌；
使用Frame Busting代码阻止页面被非法载入；
2.http2特点和优点
（1）二进制传输 、http1.0是文本格式
（2）多路复用、可以在共享TCP链接的基础上同时发送请求和响应，消除不必要的延时而减少页面加载的时间；
（3）首部压缩、服务器推送
3、输入url到页面完成发生了什么
（1）DNS解析：将域名解析为ip地址
（2）建立TCP连接： 客户端浏览器与WEB服务器建立TCP(传输控制协议)连接，三次握手【浏览器-->服务器，服务器-->浏览器，浏览器-->服务器】
（3）发送请求：请求报文 http协议的通信内容
（4）响应请求：响应报文
（5）渲染页面：dom树、css树、合并渲染树计算布局 绘制；
（6）断开连接【非持久性】： TCP四次挥手。【浏览器-->服务器，服务器-->浏览器，服务器-->浏览器，浏览器-->服务器】
http对应于应用层，Tcp协议对应于传输层，http协议是在Tcp协议之上建立的；
4、HTTP 常见状态码
HTTP响应状态码有1到5开头的：
1** 消息，服务器收到请求，需要请求者继续执行操作
2** 请求成功，操作被成功接收并处理
3** 重定向问题，需要进一步的操作以完成请求
4** 客户端错误，请求包含语法错误或无法完成请求
5** 服务器错误，服务器在处理请求的过程中发生了错误
项目中常见的状态码
200 请求成功。
301 永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新 URI。今后任何新的请求都应使用新的URI代替
302 临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI
304 未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问 过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源
400 客户端请求的语法错误，服务器无法理解
401 未授权（请求中未包含身份验证信息），请求要求用户的身份认证。
403 服务器理解请求客户端的请求，但是拒绝执行此请求
404 请求资源不存在
500 服务器内部错误，无法完成请求
5、前端鉴权方式
Http basic Authorization 基于浏览器的一种鉴权方式
（1）未授权请求，拦截，返回 401 Unauthorised
（2）支持的浏览器弹出用户名密码框，输入用户名密码，连同上次请求数据，一起发送到服务端，使用授权头，Authorization: Basic [base64]编码的用户名密码
（3）服务端验证通过，返回资源
（4）客户端会一种携带授权头，不安全，适用于内网
session-cookie
用户未登录，无sessionId，客户端登录后，在cookie中种下sessionId，发送到服务端，服务端验证通过，释放资源。
sessionId过期，重新登录，http请求，后端会redirect到登录页，ajax请求或前端route，需要前端全局拦截
Token
用户未登录，无token，登录后，返回token，客户端可以存储在cookie，storage，或内存中，每次请求携带token，
其灵活的特点是，不必须依赖cookie，可以在任何终端使用，多用于app鉴权。
Token过期，重新登录，请求拦截通session-cookie
OAuth
OAuth2.0流程:
（1）第三方应用在资源方注册，获取身份，无身份后面请求无效
（2）第三方应用征得用户授权，同意获取资源
（3）第三方应用向资源方请求授权码，资源方返回授权码
（4）第三方应用以授权码，向资源方申请访问令牌，资源方返回令牌
（5）第三方应用以令牌，访问受限资源
6、http协议中常用的请求方法
（1）GET：向特定的资源发起请求
（2）POST：向指定的资源提交数据进行处理请求，数据被包含在请求体中
（3）PUT：向指定资源位置上传其最新内容
（4）DELETE：请求服务器删除Request-URL所标识的资源
（5）HEAD：向服务器索与get请求一致的响应，只不过响应体不会被返回
（6）OPTIONS：返回服务器针对特点资源所支持的http请求方法
（7）TRACE：回显服务器收到的请求，主要用于测试或者诊断
（8）CONNECT：http/1.1协议中预留能够将连接改为管道方式的代理服务器
GET /url/list 查看
POST /url/create 创建
PUT /url/update 更新
DELETE /url/delete 删除
HEAD /url/is_exists 检查资源
PATCH /url/update_by_id 更新某些字段
OPTIONS /url/get_methods 检查请求方式
vue框架类型
1、vue-router的2种模式以及原理 mode参数决定类型；可选值: "hash" | "history" | "abstract"（Node.js 环境）
（1）hash模式：hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件，改变 hash 不会重新加载页面
（2）history模式: history.pushState API 来完成 URL 跳转而无须重新加载页面; 【pushState()、replaceState()】
要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面
2、vue从data改变到页面渲染的过程
（1）把模板编译为render函数
（2）实例进行挂载，根据节点render函数的调用，递归的生成虚拟dom；
（3）对比虚拟dom，渲染真实dom；
（4）组件内部data发生变化，组件和子组件引用data作为props重新调用render函数生成虚拟dom返回 对比虚拟dom，渲染真实dom的操作；
3、vue全家桶成员
vue-cli + vue-router + vuex + axios
4、MVVM概念
MVVM分别为Model、View、ViewModel;是一种软件架构模式；
Model：数据模型，【后端传递的数据】
View：代表UI视图 【看到的页面，负责数据展示】
ViewModel：链接model和view的桥梁，负责监听model中数据的改变并且控制视图的更新完成数据与视图的双向绑定
5、SPA（单页应用）的优缺点
优点
（1）良好的交互体验，前端进行的局部渲染避免了不必要的跳转和重复渲染
（2）前后端分离【前端：view 后端：model】架构清晰
（3）减轻服务器压力，服务器只需要提供数据不需要管前端的展示逻辑和页面合成提高了性能
缺点
（1）SEO难度高
（2）首次加载时间过长
6、axios的底层原理
axios 原理还是属于 XMLHttpRequest， 加一个promise对象来对结果进行处理
如get
7、v-if 和 v-show 有什么区别
相同点： 两者都是在判断DOM节点是否要显示。
不同点：
（1）v-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点。 v-show只是在修改元素的css样式，也就是display的属性值，简单的基于css切换，元素始终在Dom树上。
（2）v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译； v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素始终被保留；
（3）v-if有更高的切换消耗，不适合做频繁的切换； v-show有更高的初始渲染消耗，适合做频繁的额切换；
8、v-for 与 v-if 的优先级
v-for的优先级比v-if高
9、Vue 组件中 data 为什么必须是函数
每个实例可以维护一份被返回对象的独立的拷贝，这样各个实例中的data不会相互影响，是独立的
10、vue中 key 值的作用
vue是通过比对组件自身新旧vdom进行更新的
使用key来给每个节点做一个唯一标识
key的作用主要是为了高效的更新虚拟DOM【高效diff；给key值Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点】
另外vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果
11、vue响应式数据的原理
采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter, getter
默认Vue 在初始化数据时，会给data 中的属性使用Object.defineProperty 重新定义所有属性，
当页面到对应属性时，会进行依赖收集（收集当前组件中的watcher ），如果属性发生变化会通知相关依赖进行更新操作；
12、为什么Vue 采用异步渲染
因为如果不采用异步更新，那么每次更新数据都会对当前组件进行重新渲染，所以为了性能考虑，Vue 会在本轮数据更新后，再去异步更新数据
13、Proxy 与 Object.defineProperty() 对比 【vue2 vue3响应式对比】
Proxy 的优点：
可以直接监听对象而非属性，并返回一个新对象；
可以直接监听数值的变化；
可以劫持整个对象，并返回一个新对象；
Proxy 的缺点：Proxy 是es6 提供的新特性，兼容性不好
Object.defineProperty() 的优点：兼容性好，支持IE9，IE9 以下的版本不兼容
Object.defineProperty() 的缺点：
无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，不能实时响应；
只能劫持对象的属性，我们需要对每个对象的每个属性进行遍历；
14、ES6 - async+await 同步/异步方案；
Promise 主要解决的是异步回调问题，
return new Promise + await （异步中的同步的写法await）
如果你在一个函数中有多个await,这个样子线程阻塞,很耗费时间【影响性能】,Promise.all方法,可以将多个await变成并行的去awaitPromise.all()
async + await 主要解决的就是将异步问题同步化，降低异步编程的认知负担
async 函数执行后，总是返回一个 promise 对象
await 所在的那一行语句是同步的
websocket 、webworker2个概念的了解；
个人整理，转载请注明出处！！！