前端开发必会面试题和多种实战技巧

【问】$route和$router的区别？
可以理解为，一个是用来获取路由信息的，一个是用来操作路由的
$route
route是路由信息对象，里面主要包含路由的一些基本信息，包括name、meta、path、hash、query、params、fullPath、matched、redirectedFrom
$router
router是VueRouter的实例，包含了一些路由的跳转方法，钩子函数等

【问】谈谈你对provide和inject的理解？
通过provide/inject可以轻松实现跨级访问祖先组件的数据

在父组件中provide方法返回个对象，在孙组件中用inject:['对象']访问对象

【问】什么是事件代理/事件委托
事件代理/事件委托是利用事件冒泡的特性，将本应该绑定在多个元素上的事件绑定在他们的祖先元素上，尤其在动态添加子元素的时候，可以非常方便的提高程序性能，减小内存空间

【问】call()和apply()的区别
实际上，apply和call()的功能是一样的，只是传入的参数列表形式不同，apply传入的是数组

它们各自的定义：

apply：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, arguments);即A对象应用B对象的方法。
call：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.call(A, args1,args2);即A对象调用B对象的方法。
它们的共同之处：
都“可以用来代替另一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象”。

它们的不同之处：
apply：最多只能有两个参数——新this对象和一个数组argArray。如果给该方法传递多个参数，则把参数都写进这个数组里面，当然，即使只有一个参数，也要写进数组里。如果argArray不是一个有效的数组或arguments对象，那么将导致一个TypeError。如果没有提供argArray和thisObj任何一个参数，那么Global对象将被用作thisObj，并且无法被传递任何参数。
call：它可以接受多个参数，第一个参数与apply一样，后面则是一串参数列表。这个方法主要用在js对象各方法相互调用的时候，使当前this实例指针保持一致，或者在特殊情况下需要改变this指针。如果没有提供thisObj参数，那么 Global 对象被用作thisObj。 
实际上，apply和call的功能是一样的，只是传入的参数列表形式不同。

【问】什么是事件冒泡？什么是事件捕获
冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document)的顺序触发
捕获型事件：事件从最不精确的对象(document)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)

支持w3c标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法，其中第三个参数useCapture是一个boolean值，用来设置事件是在事件捕获时执行，还是事件冒泡时执行，而不兼容W3C的浏览器(IE)用attachEvent()方法，次方法没有相关设置，不过IE的事件模型默认是在事件冒泡时执行的，也就是在useCapture等于false的时候执行，所以把在处理事件时把useCapture设置为false是比较安全，也是实现兼容浏览器的效果

【问】什么是"use strict";使用它的好处和坏处分别是什么？

var length=88;

function test(){
    console.log(this.length)
}

var obj={
    length:99,
    action:function(test){
        test();
        arguments[0]();
    }
}

obj.action(test,[1,2,3],4,5,6)

this指向规则：
如果有调用者，指向调用者，无调用者，默认为window

图片性能优化

雪碧图
精灵图

------减少网络请求的次数

字体图标
base64编码
后端返回的图片---图片懒加载

当全局变量和局部变量同名，全局变量不会作用于同盟局部变量作用域