持续更新直到找到合适工作为止！-_-!

面试一

日期：20180420

前端性能优化？

前端性能优化这个问题可以回答的比较多，我自己的答案：
前端性能优化可以从：

减少HTTP请求的数量：

不详细赘述了

标题文字

图片预加载方式？

图片预加载的主要思路： 图片预加载的主要思路就是把稍后需要用到的图片悄悄的提前加载到本地，因为浏览器有缓存的原因，如果稍后用到这个url的图片了，浏览器会优先从本地缓存找该url对应的图片，如果图片没过期的话，就使用这个图片。

图片预加载实现的方法：

Image对象是专门用于处理图片加载的，就相当于内存中的img标签。

参考： 图片预加载的方法

手写http请求？（XMLHttpRequest）

使用XMLHttpRequest对象：创建XHR对象、配置header、发送请求！通过设置回调来接受服务器响应！

谈谈promise?

Promise的优点：

如果我们组合使用Promise，就可以把很多异步任务以并行和串行的方式组合起来执行。

ES5作用域和ES6作用域？

ES5: 函数作用域（局部）和全局作用域
ES6: 多出了一个块级作用域，也就是{}花括号里声明的单独的作用域

ES5怎么实现类？

使用原型继承的方式实现类！

对象的深拷贝？ES6、ES5

浅拷贝： 将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用
深拷贝： 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”

深拷贝对象（不讨论数组的情况）：

参考：https://www.cnblogs.com/pengh...

字符串的截取两个方法（subString subStr）的区别？

stringObject.substr(start,length):在字符串中抽取从 start 下标开始的指定数目的字符
 stringObject.substring(start,stop): 用于提取字符串中介于两个指定下标之间的字符
 

使用过less、sass么？

没用过，从预编译语言的优点回答的
使用的优点：

缺点：

跨域？

同源指的是：URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示他们同源。
同源策略：浏览器的同源策略，限制了来自不同源的"document"或脚本，对当前"document"读取或设置某些属性（但是允许当前源执行其他源的脚本）

前端跨域实现方式：

服务端跨域实现方式：

this 值？

this值在四种情况下：

谈谈CommonJs、AMD、CMD？

CommonJs: 模块的加载方式是同步的（服务器端模块加载）
AMD: 异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。（浏览器端模块加载） AMD的方式比较适合浏览器（require.js 遵循的是AMD规范实现的模块加载）
CMD: CMD相当于按需加载，定义一个模块的时候不需要立即制定依赖模块，在需要的时候require就可以了，比较方便；而AMD则相反，定义模块的时候需要制定依赖模块，并以形参的方式引入factory中

AMD 与 CMD 的区别：

同样都是异步加载模块，AMD在加载模块完成后就会执行改模块，所有模块都加载执行完后会进入require的回调函数，执行主逻辑，这样的效果就是依赖模块的执行顺序和书写顺序不一定一致，看网络速度，哪个先下载下来，哪个先执行，但是主逻辑一定在所有依赖加载完成后才执行

CMD加载完某个依赖模块后并不执行，只是下载而已，在所有依赖模块加载完成后进入主逻辑，遇到require语句的时候才执行对应的模块，这样模块的执行顺序和书写顺序是完全一致的

这也是很多人说AMD用户体验好，因为没有延迟，依赖模块提前执行了，CMD性能好，因为只有用户需要的时候才执行的原因

require.js 遵循AMD规范，主要为了解决下面两个问题：

参考： http://www.ruanyifeng.com/blo... https://www.jianshu.com/p/042...

vue 中的 data为什么是函数而不是属性值？

面试二

看代码说出打印值？

这道题的代码具体不清了，考查的是数组类似下面这样

var a = [,1],b = [,1,,1],c = [1,];console.log(a.length); console.log(b.length);console.log(c.length);

打印： 2 2 1

以下哪些方法属于全局函数？在window对象下

A eval
B parseFloat
C setTimeout
D alert
E enscape

答案： ABCDE

下面哪段代码会报错？

A var a = ()
 B var b = {}
 C var c = []
 D var d = 
 

答案： A

以下哪些方法可以在前端跨域？

A JSONP
B script 标签
C iframe 和 location.hash
D flash
E postMessage

答案： ABCDE
参考：http://www.cnblogs.com/rainma...

看下列代码，将会输出什么?（考查变量声明提升）

var foo = 1;
 function(){console.log(foo);var foo = 2;console.log(foo);
 }

输出undefined 和 2

以下代码输出什么？(考查逻辑表达式）

console.log(1 && 2);

输出： 2

以下代码输出什么？（javascript）

console.log(1+"2"+"2"); 
 console.log(1+ +"2"+"2");
 console.log(1+ -"1"+2);
 console.log(1+ -"1"+"2");
 console.log(+"1"+2);
 console.log(1+ "2");
 console.log("A"-"B"+"2");
 console.log("A"-"B"+2);
 

输出： 122 32 2 02 3 12 NaN2 NaN

在body中插入“

• 第一行...
• ...
...

”,ul中有10个li，要求插入时考虑性能

页面插入DOM会引起回流和重绘。尽量减少回流和重绘的次数为主要思路。

参考： http://developer.51cto.com/ar...

谈谈cookies、sessionStorage、localStorage之间的区别？

主要从四个方面来回答：

区别：

对象的深拷贝、浅拷贝？为什么需要深拷贝？

浅拷贝： 将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用
深拷贝： 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用”

深拷贝对象（不讨论数组的情况）：

为什么需要深拷贝： 我的回答是 我们拷贝的初衷是，创建一个新对象，该新对象拥有原有对象的所有属性和方法。如果浅拷贝，那原对象改变，表面上看就是我们拷贝的对象也变了。

数组去重方法有哪些？

方法：

/*
 * 给传入数组排序，排序后相同值相邻，
 * 然后遍历时,新数组只加入不与前一值重复的值。
 * 会打乱原来数组的顺序
 * */
 function uniq(array){array.sort();var temp=[array[0]];for(var i = 1; i < array.length; i++){if( array[i] !== temp[temp.length-1]){temp.push(array[i]);}}return temp;
 }var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
 console.log(uniq(aa));
 

/*
 *
 * 还是得调用“indexOf”性能跟方法1差不多，
 * 实现思路：如果当前数组的第i项在当前数组中第一次出现的位置不是i，
 * 那么表示第i项是重复的，忽略掉。否则存入结果数组。
 * */
 function uniq(array){var temp = [];for(var i = 0; i < array.length; i++) {//如果当前数组的第i项在当前数组中第一次出现的位置是i，才存入数组；否则代表是重复的if(array.indexOf(array[i]) == i){temp.push(array[i])}}return temp;
 }var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];
 console.log(uniq(aa));
 

    // 思路：获取没重复的最右一值放入新数组/** 推荐的方法** 方法的实现代码相当酷炫，* 实现思路：获取没重复的最右一值放入新数组。* （检测到有重复值时终止当前循环同时进入顶层循环的下一轮判断）*/function uniq(array){var temp = [];var index = [];var l = array.length;for(var i = 0; i < l; i++) {for(var j = i + 1; j < l; j++){if (array[i] === array[j]){i++;j = i;}}temp.push(array[i]);index.push(i);}console.log(index);return temp;}var aa = [1,2,2,3,5,3,6,5];console.log(uniq(aa));

    /** 速度最快， 占空间最多（空间换时间）** 该方法执行的速度比其他任何方法都快， 就是占用的内存大一些。* 现思路：新建一js对象以及新数组，遍历传入数组时，判断值是否为js对象的键，* 不是的话给对象新增该键并放入新数组。* 注意点：判断是否为js对象键时，会自动对传入的键执行“toString()”，* 不同的键可能会被误认为一样，例如n[val]-- n[1]、n["1"]；* 解决上述问题还是得调用“indexOf”。*/function uniq(array){var temp = {}, r = [], len = array.length, val, type;for (var i = 0; i < len; i++) {val = array[i];type = typeof val;if (!temp[val]) {temp[val] = [type];r.push(val);} else if (temp[val].indexOf(type) < 0) {temp[val].push(type);r.push(val);}}return r;}var aa = [1,2,"2",4,9,"a","a",2,3,5,6,5];console.log(uniq(aa));

// ES6
 function unique (arr) {const seen = new Map()return arr.filter((a) => !seen.has(a) && seen.set(a, 1))
 }
 

谈谈react/vue/angular之间的差异、区别？