前端面试题（持续更新中~）

一、跨域方式

第一种方式：jsonp请求；jsonp的原理是利用 标签的跨域特性，可以不受限制地从其他域中加载资源，类似的标签还有。

第二种方式：document.domain；这种方式用在主域名相同子域名不同的跨域访问中.

第三种方式：window.name；window的name属性有个特征：在一个窗口(window)的生命周期内, 窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都 有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。

第四种方式：window.postMessage；window.postMessages是html5中实现跨域访问的一种新方式，可以使用它来向其它的window对象发送消息，无论这个window对象是属同源或不同源。

第五种方式：CORS；只需服务器端设置Access-Control-Allow-Origin,CORS背后的基本思想，就是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应是应该成功还是应该失败。

第六种方式：WeFb Sockets；web sockets原理：在JS创建了web socket之后，会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后，建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议。

第七种方式：使用本地服务器进行代理。

二、vue响应式原理

在生成vue实例时，为对传入的data进行遍历，使用Object.defineProperty把这些属性转为getter/setter.

Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。

每个vue实例都有一个watcher实例，它会在实例渲染时记录这些属性，并在setter触发时重新渲染。

Vue 无法检测到对象属性的添加或删除

Vue 不允许动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, propertyName, value)方法向嵌套对象添加响应式属性。

声明响应式属性

由于 Vue 不允许动态添加根级响应式属性，所以你必须在初始化实例前声明所有根级响应式属性，哪怕只是一个空值。

如果你未在 data 选项中声明 message，Vue 将警告你渲染函数正在试图访问不存在的属性。

三、v-for为什么要加key

key的作用主要是为了高效的更新虚拟DOM！！！

当v-for进行数据渲染列表时，如果数据量庞大，我们对列表进行增删改时就会重新渲染列表，这样会影响性能！

如果我们加上key那么列表修改是就会根据之前的key值判断是否更新数据，如果需要则更新数据，如果不需要就复用之前的数据

四、Vue中双向数据绑定是如何实现的

实现原理大致是，通过Object.defineProperty()方法来劫持Vue数据的属性，一旦监听到数据变化，则更新数据关联的虚拟DOM树，当然在模版编译的时候，为指令v-model绑定input事件，当输入的内容发生改变时，同步更新data中绑定的数据

五、单页面应用和多页面应用区别及优缺点

单页面简称(SPA),原理:利用js感知到url的变化,可以通过js动态的将当前的页面内容清除掉,接着将下一个页面的内容挂载到当前的页面上,页面每次切换跳转时,并不需要做html请求,这样就节省了很多http发送延迟,切换速度更快.

优点：加载速度快,内容的改变不需要重新加载整个页面,对服务器压力小，前后端分离,视觉效果好

缺点：页面初次加载比较慢,页面复杂提高很多

多页面：一个应用多个页面,页面跳转时整个页面都刷新,每次都请求一个新的页面

优点：SEO效果好

缺点：页面切换慢,每次切换页面需要选择性的重新加载公共资源

六、防抖与节流

防抖：连续的事件，只需触发一次回调

场景：

     1、搜索框搜索输入，只需用后最后一次输入完，再发送请求

     2、手机号、邮箱验证输入检测

     3、窗口大小resize。只需窗口调整完成后，计算窗口大小，防止重复渲染

节流：间隔一段时间执行一次回调

场景：

     1、滚动加载，加载更多或滚到底部监听

     2、谷歌搜索框，搜索联想功能

     3、高频点击提交，表单重复提交

更新中...

---