一：JavaScript 

1、闭包是什么？利弊？如何解决弊端？

闭包是什么：JS中内层函数可以访问外层函数的变量，外层函数无法操作内存函数的变量的特性。我们把这个特性称作闭包。

闭包的好处：

隔离作用域，保护私有变量；有了闭包才有局部变量，要不然都是全局变量了。

让我们可以使用回调，操作其他函数内部；

变量长期驻扎在内存中，不会被内存回收机制回收，即延长变量的生命周期；

闭包的弊端：内层函数引用外层函数变量，内层函数占用内存。如果不释放内存，过多时，易引起内存泄露。

解决办法：无法自动销户，就及时手动回收，使用后将函数的引用赋null。

2、深度拷贝

1、深拷贝与浅拷贝的区别？

拷贝的层级不同，深拷贝是指每一层数据的改动都不会影响原对象和新对象，浅拷贝只有第一层的属性变动不互相影响，深层的数据变动还会互相影响。

浅拷贝：Object.assign

深拷贝：JSON.stringify和JSON.parse

2、JSON的stringify和parse处理的缺点？

如果对象中有属性是function或者undefined，处理后会被过滤掉；

如果属性值是对象，且由构造函数生成的实例对象，会丢弃对象的constructor；

3、$.extend()

使用jquey的extend方法不仅能实现深度拷贝，还能实现深度合并。具体用法

深度拷贝：$.extend({},targetObject) // targetObject是需要复制的对象

深度合并：$.extend(true,{},targetObject1,targetObject2) // 可以将两个对象深度合并后再返回出一个新对象

3、如何判断空对象？如何区分数据类型？

    判断空对象

1、用JSON的stringify和parse转成字符串后，跟'{}'对比；

2、用ES6，判断Object.keys(targetObject)返回值数组的长度是否为0；

3、用ES5，判断Object.getOwnPropertyNames(targetObject)返回的数组长度是否为0；

   区分数据类型

4、如何改变this指向？区别？

• call/apply

  
  

5、沙箱隔离怎么做？

使用iframe可以实现，变量隔离

6、浏览器存储，他们的区别？

localStorage：永久保存，以键值对保存，存储空间5M

sessionStorage：关闭页签/浏览器时清空

cookie：随着请求发送，通过设置过期时间删除

session：保存在服务端

localStorage/sessionStorage是window的属性，cookie是document的方法

7、常用的数组方法有哪些？

改变原数组：push、pop、shift、unshift、sort、splice、reverse

不改变原属组：concat、join、map、forEach、filter、slice

    slice和splice的区别？

slice切片的意思，根据传入的起始和终止下标，获取该范围数组。

splice可根据传入参数个数不同实现删除、插入操作，直接操作原数组。第1个参数为起始下标，第2个为删除个数，第3个为要增加的数据。

数组如何滤重？

8、Dom事件流的顺序？什么是事件委托？

当页面上的一个元素被点击时，先从document向下一层层捕获到该元素。然后再向上冒泡，一层层触发。

事件委托是将事件写在父级元素上，e.target是事件捕获时那个最小的元素，即选中的元素。所以可以根据e.target操作选中的元素。这样不需要给每个子元素绑定事件，代码更加简约。

9、对原型链的认识？

js通过原型链模拟实现面向对象，比如通过实例化一个构造函数可以给每个对象挂载自己专属的属性，通过给类的prototype上赋方法是所有对象所共有的方法。每次实例化不再赋值原型链上的方法。

10、防抖/节流的区别？

区别：防抖只会在最后一次事件后执行触发函数，节流不管事件多么的频繁，都会保证在规定时间段内触发事件函数。

防抖:

原理是维护一个定时器，将很多个相同的操作合并成一个。规定在delay后触发函数，如果在此之前触发函数，则取消之前的计时重新计时，只有最后一次操作能被触发。例如：实时搜索的input，一直输入就不发送。

• 节流：

原理是判断是否达到一定的时间来触发事件。某个时间段内只能触发一次函数。例如：在指定的时间内多次触发无效

二：Html

1、重绘和重排（回流/重构/重载）是什么？如何优化？

样式的调整会引起重绘，比如字体颜色、背景色调整等

Dom的变动会引起重排，比如定位改动、元素宽高调整

避免循环插入dom，比如table的行。可以js循环生成多个dom后，一次性插入。

2、html5有哪些新特性？

本地存储，比如localStorage、sessionStorage

语义化标签，如header、footer、nav等，使代码结构清晰，利于seo

canvas

svg

web worker，在主线程外再创建一个线程，可与主线程交互

拖放功能

三：CSS

1、如何实现一个宽度不固定的上下左右居中的弹框？

2、伪类和伪元素区别？

• 伪类本质上用于弥补常规css选择器的不足，因为如果没有我们可能需要多写一个class，所以叫伪类

• 伪元素本质上是创建了一个有内容的虚拟元素，如::before   ::after。因为相当于多了一个元素/节点，所以叫为元素

  
  

四：Vue

1、单页面应用是什么？优缺点？如何弥补缺点

单页面对一个入口DOM通过路由去更改内容，整个应用只有一个html页面

SPA优点：用户体验好，没有页面切换就没有白屏情况；

SPA缺点：首屏加载慢，不利于SEO

SPA弥补：通过压缩、路由懒加载缓解首屏慢；通过SSR 服务器端渲染解决SEO问题；

2、组件及通信方式有哪些？

2.1、什么是组件？

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

使用组件（把组件当作自定义元素）

2.2、父向子传值

Prop 是你可以在组件上注册的一些自定义 attribute。当一个值传递给一个 prop attribute 的时候，它就变成了那个组件实例的一个 property。为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中：

组件内部声明prop

2.3、父组件监听子组件事件

其实就是通过在父组件声明方法，并绑定在子组件上。以子组件内部触发方法的形式，向父组件传参，实现子向父传值的效果。如下

父组件中声明方法，并绑定在子组件上