由于个人原因，在6.7月份换工作，相对于金三 银四来说，现在这个时间点不怎么好，夏天，找工作，是一种受虐，太热了。个人建议：换工作尽量在3.4月份。
全过程可以分为3个阶段：1.海投，收到面试通知后，网上查下公司，疯狂面试，了解行情。2.认识到自己的弱点，自己找时间充电。3.给自己定位，有目标性的向某些公司投递简历，有目标性的准备面试。以下是个人的面试经验，将所有的面试问题进行归类总结，希望对大家有所帮助。
目标地点：深圳。时间：半个月左右。职位：前端。
一.css
1.纯css画三角形?
https://blog.csdn.net/xiaoxiaoluckylucky/article/details/80940242
2.一个背景图的线性渐变?
.box {
width: 100px;
height: 100px;
background-image: linear-gradient(to right, red, blue);
}
效果图：
3.一个块级元素的水平居中，你有哪几种方式可以实现？使用flex让元素水平居中有做过吗？、
方法一：子绝父相
<style>
.father{
width:400px;
height:400px;
background:blue;
position:relative;
}
.son{
width:200px;
height:200px;
background:red;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
效果图：
方法二：父元素弹性布局
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.father {
width: 400px;
height: 400px;
background: red;
display: flex;
justify-content: center;
/*x轴对齐方式*/
align-items: center;
/*y轴对滴方式*/
}
.son {
width: 200px;
height: 200px;
background: blue;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
效果图如下：
4.flex的属性有哪些？
常用的有：
flex-direction: row | row-reverse | column | column-reverse;//方向flex-wrap: nowrap | wrap | wrap-reverse;//如何换行justify-content: flex-start | flex-end | center | space-between | space-around;//在主轴上的对其方式align-items: flex-start | flex-end | center | baseline | stretch;//在交互轴上的对齐方式
5.圣杯布局和双飞翼布局？
https://blog.csdn.net/xiaoxiaoluckylucky/article/details/79713542
6.两个元素，一个元素有固定宽度，另外一个元素自适应？
思路：左边元素宽度固定，右边元素自适应。即.left宽度100px,设置左浮动，.right设置marging-left:100px。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.left {
width: 100px;
height: 100px;
background: red;
float: left;
}
.right {
height: 100px;
margin-left: 100px;
background: blue;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
效果图如下：
7.一个p标签，不换行，超出部分显示为省略号？
p{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
8.手机适配 问题:一个图片比较大或者比较小，怎么适配手机怎么优化?
9.rem有用过吗？怎么使用的？
https://www.cnblogs.com/dannyxie/p/6640903.html
10.弹性布局、百分之布局、响应式布局的区别？
https://www.cnblogs.com/yanayana/p/7066948.html
11.绝对定位、相对定位、固定定位的区别？
position:absolute;脱离标准流，参考点是第一个非static定位的父元素。
postion:relative;没有脱离标准量，参考点是元素原本的位置。
position:fixed;脱离标准流，相对浏览器窗口定位。页面如何滚动，这个盒子显示的位置不变。
二：js
1.原生js怎么样？
还可以 ps:不可回答不好或者不怎么样，99%的公司注重原生js
2.轮播图的原理？无缝轮播的原理？
原理：1.布局：一个大ul里面有很多li,ul设置overflow:hidden 2.使用setTimeout定时器，改变ul的offsetLeft
无缝轮播原理：类似轮播图原理，只是在头尾各添加一张图片
3.手写ajax会吗？现场写一个？
$.ajax({
type: "GET",
url: "",
data: {name:'xx'},
dataType: "json",
success: function (data) {
}
});
4.后台返回状态码有哪些？
- 200 OK – [GET]：服务器成功返回用户请求的数据，该操作是幂等的（Idempotent）。
- 201 CREATED – [POST/PUT/PATCH]：用户新建或修改数据成功。
- 202 Accepted – [*]：表示一个请求已经进入后台排队（异步任务）
- 204 NO CONTENT – [DELETE]：用户删除数据成功。
- 400 INVALID REQUEST – [POST/PUT/PATCH]：用户发出的请求有错误，服务器没有进行新建或修改数据的操作，该操作是幂等的。
- 401 Unauthorized – [*]：表示用户没有权限（令牌、用户名、密码错误）。
- 403 Forbidden – [*] 表示用户得到授权（与401错误相对），但是访问是被禁止的。
- 404 NOT FOUND – [*]：用户发出的请求针对的是不存在的记录，服务器没有进行操作，该操作是幂等的。
- 406 Not Acceptable – [GET]：用户请求的格式不可得（比如用户请求JSON格式，但是只有XML格式）。
- 410 Gone -[GET]：用户请求的资源被永久删除，且不会再得到的。
- 422 Unprocesable entity – [POST/PUT/PATCH] 当创建一个对象时，发生一个验证错误。
- 500 INTERNAL SERVER ERROR – [*]：服务器发生错误，用户将无法判断发出的请求是否成功。
5.有多个请求第一个完成后才执行第二，第二个完成后才执行第三个，你有几种方法实现？
方法一：设置ajax的async:false
方法二：用es6的promise
6.浅拷贝和深拷贝的区别？es6中的...扩展运算符是浅拷贝还是深拷贝？一个对象，你有几种方法实现它的深拷贝？
浅拷贝:只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存。
深拷贝:会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。
//深拷贝方法一
var $ = require('jquery');
var obj1 = {
a: 1,
b: { f: { g: 1 } },
c: [1, 2, 3]
};
var obj2 = $.extend(true, {}, obj1);
console.log(obj1.b.f === obj2.b.f);// false
//深拷贝方法二
使用Object.create()方法
//深拷贝方法三
手动复制属性
7.一个顶级对象里面嵌套子对象，子对象里面嵌套孙对象，怎么获取一个对象的深度？
obi1 = {
name: 'xx',
children: {
name: 'x2',
children: {
name: 'x3'
}
}
}
var num = 1;
function getDeepLength(o) {
for (var i in o) {
if (typeof o[i] == 'object') {
console.log(o[i]);
num++;
getDeepLength(o[i])
}
}
return num;
}
console.log(getDeepLength(obi1))//3
8.XSS攻击全称是什么？
跨站脚本攻击
9.什么是闭包 ，为什么要用闭包？你所做的项目中，哪些地方有用到闭包？
https://blog.csdn.net/xiaoxiaoluckylucky/article/details/80946733
10.如何防止表单重复提交？有几种方法？
方法一：定义一个flag=false,改变flag的值
方法二：设置button的禁用属性
方法三：利用session
11.layer和vue有冲突怎么处理？
此问题没有遇到过，直接说没有遇到即可
12.组件开发和模块开发的区别？你在开发的过程中是怎么划分组件？
组件按照功能划分，模块按照业务逻辑划分。业务（模块）shirt由多个独立的组件组成。
13.有写过封装方法吗？写过什么？
肯定有的，比如说ajax封装，拖拽功能的封装等。
14.ajax请求有用过哪几种？
比如get、post
15.写过ajax封装吗？ajax里面的error你是怎么封装判断的？
写过，需要熟悉ajax和后台返回的状态码，error封装如下
error: function (xhr, status, error) {
switch (xhr.status) {
case 400:
msg = '服务异常';
break;
case 401:
msg = '身份认证异常';
callback = function () {
window.location.reload();
}
break;
case 403:
msg = "权限受限";
break;
case 404:
msg = "资源不存在";
break;
case 500:
msg = "运行异常";
break;
default:
msg = "未知服务异常";
}
}
16.写过的最难的组件是什么？
拖拽、日期组件等
17.sessionStorage、localStorage、cookie的区别？
1、cookie数据存放在客户的浏览器上，session数据放在服务器上。
2、cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗，考虑到安全应当使用session。
3、sessionStorage、cookie是会话级存储，浏览器关闭就会自动消失；localSotrage是永久存储，除非手动删除，否则不会消失。
4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
5、可以考虑将登陆信息等重要信息存放为session，其他信息如果需要保留，可以放在cookie中。
18.canvas画一个不规则的多边形，多边形的各边框样式和颜色都不一样，怎么设置样式怎么画线条啥的？
canvas教程http://www.runoob.com/html/html5-canvas.html
19.echart画不连续的折线图？
金融公司比较注重echarts、canvas等，自行百度
20.跨域有哪几种方式？
方法1：cors
方法2：jsonp;只支持get不支持post。
使用jsonp的时候需要在ajax里面添加如下代码：
dataType: "jsonp", //指定服务器返回的数据类型
jsonp: "theFunction", //指定参数名称 可省略 默认是callback即函数名字
jsonpCallback: "showData", //指定回调函数名称
21.混合、webapp、 原生app的优点和和缺点？你之前做的是哪一种？
原生脚本/NativeScript：将原生API封装成JavaScript接口，这有点像前端的nodejs。NativeScript方式 与原生相比性能损失不大（据称只有10%左右），优点是开发语言统一使用JavaScript，缺点是 要针对不同的平台分别开发。
原生+web/ Hybrid：使用原生技术开发，部分页面调用web。优点是比纯原生开发周期短， 页面更新方便，如支付宝，还有很多app的详情页面。缺点：需要原生和web配合。
混合/Hybrid：使用web技术开发App，使用Cordova/PhoneGap之类进行打包封装。优点是采用标准的web技术开发， 避免了不同平台原生开发体系的学习，学习成本低，上手快、效率高,一次开发 微信 wap app全部搞定；缺点是app 在android平台性能上有一些损失，但是相信硬件的发展会接近原生。
22.h5页面怎么调用原生native的方法？比如说摄像头麦克风啥的？
方法1：mWebview.addJavascriptInterface(new MyObject(TestWebViewActivity.this), "myObj");
方法2：Scheme：WebView拦截页面跳转
23.Echarts的数据，导出表格做过吗？
https://www.jb51.net/article/127309.htm
24.现在需求是要做一个官网，你需要多久？没有ui，你自己能做官网吗？
能做，这个要看需求，需求简单，没有ui,一周左右就可以搞定。一般公司说没有ui,这时候，我会反问面试官，难道你们公司没有ui设计师吗？（ps:没有ui的公司不去）
25.单线程和事件队列你知道吗？谈谈浏览器的机制？
单线程和事件队列：js是单线程加事件队列。单线程，即一次只能做一件事。事件队列，是指异步事件，如计数器、ajax、回调函数事件，会添加到任务队列里面，主线程空闲后轮询任务队列，并将任务队列中的任务（回调函数）取出来执行，来实现异步操作。
浏览器的机制：此问题的大白话是从输入url到我们看到页面这过程中，浏览器做了哪些？
有以下6大步：
-
DNS解析
-
TCP连接
-
发送HTTP请求
-
服务器处理请求并返回HTTP报文
-
浏览器解析渲染页面
-
连接结束
26.将url后面的参数变成obj？
此题目要求获取url的参数、字符串分割成数组、对象的赋值
var str = window.location.search;
str = url.substring(1);
var arr = url.split('&'); //[name=xx,age=2];
var obj = {};
for (var i = 0; i < arr.length; i++) {
var key = arr[i].split('=')[0];
var value = arr[i].split('=')[1];
obj[key] = value;
}
console.log(obj) //{name: "xx", age: "2"}
27.用正则替换一个字符串的前后空格？
var tempStr = str.replace(/(^\s*)|(\s*)$/g, "");
28.数组的去重有哪几种方式？
https://www.jb51.net/article/118657.htm
重点：用es6的方法,这是个面试的套路，同时检测你有没有用过es6
var set = new Set(array1);
var newArray = Array.from(set);
29.怎么判断一个数组里面是否包含一个值？
方法1：循环===或者循环indexof
var arr = ['a', 's', 'd', 'f'];
console.info(isInArray(arr, 'a'));//循环的方式
function isInArray(arr, value) {
for (var i = 0; i < arr.length; i++) {
if (value === arr[i]) {
return true;
}
}
return false;
}
方法2：jQuery的inArray方法
var array = ['a','ab','abc'];
$.inArray('abc',array);
30.给你一个数据，怎么判断这个数据的数据类型？
方法1：Object.prototype.toString.call(str)
方法2：jquery.type()
方法3：根据对象的constructor判断： constructor
31.同步和异步的区别？
32.怎么实现ajax的同步请求？有几种方式？
三.vue、angular、react
1.vue 发送请求是用什么？
axios
2.vuex是什么？在你开发的项目中是怎么使用vuex？
中心化状态管理方案
3.谈下vuex的核心，vuex有什么优点和缺点？mutation和action有什么区别？异步是写在mutaion里面还是action里面？
Vuex核心是getter/state/mutaion/action.
mutatiion是用来改变state
action是用来提交mutaion
异步是写在action
4.用过angular有哪些API?
controller/filter/http/scope等
5.vue中用过哪些比较难的？
vuex
6.vuex跟cookie的区别？
vuex是中心化状态管理方案，getter/state/mutaion/action是一套的，集中管理，实现数据共享和同步。
7.由列表页跳转到详情页，有传递一个参数到详情页，刷新详情页，页面会出现404吗？
https://router.vuejs.org/zh/guide/essentials/history-mode.html
8.vue的双向绑定数据原理？
利用es5的API，setter/getter实现
Vue实现这种数据双向绑定的效果，需要三大模块：
- Observer：能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
- Compile：对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
- Watcher：作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
9.vue的原理？
同上题8
10.vue和angular的区别？各自有什么优点和缺点？
https://cn.vuejs.org/v2/guide/comparison.html
11.vue钩子函数并解释？created和mounted的区别，分别在什么时候用?
beforeCreate/created/beforeMounted/mounted
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
其实两者比较好理解，通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选。
12.v-for循环的li标签，点击当前li高亮，怎么实现？
步骤1：在data里面定义一个i:0;
步骤2：在li绑定点击事件，点击事件中，将当前索引赋值给data里面的i
步骤3：在li中判断i==index的时候，改变此li的样式
13.你做过的项目中，vue和哪些ui框架一起使用过？
mint-ui、Element 、iview
14.vue路由懒加载加载不出来怎么办？
没有遇到此问题 。ps:没有baserurl就没有这个问题。
15.Vue的设计思想？
https://www.cnblogs.com/liutie1030/p/6008869.html
16.vue的子向父传递参数，我们一般是emit单个值，如果需要emit多个值，怎么实现？
https://blog.csdn.net/sllailcp/article/details/78595077
17.Vue里面的data为什么是个函数且return?
作用域的问题，避免全局污染
18.路由的传参和获取参数？
配置路由:
path: '/describe/:id',或者
this.$router.push({
name: 'Describe',
params: {
id: id
}
})获取参数
this.$route.params.year
this.$route.query.id19.路由是怎么配置的？有子路由怎么配置？路由的懒加载怎么实现？
https://www.cnblogs.com/padding1015/p/7884861.html
子路由是用children
路由懒加载resolve => require([URL], resolve),支持性好
20.谈谈你对vue的理解和看法？
https://blog.csdn.net/wmwmdtt/article/details/55095420
21.使用vue过程中你遇到了什么困难？
多级嵌套传参，解决思路自行百度
22.Vue里面watch的数据的范围？data外面的数据能watch吗？
watch的数据范围是data里面的数据
23.watch一个对象？watch一个对象的某个属性怎么实现？
watch一个对象：
watch: {
msg: {
handler(newValue, oldValue) {
console.log(newValue)
},
deep: true
}
}
监听对象内的某一具体属性，可以通过computed做中间层来实现
24.谈谈vuex的单向数据流？
https://www.jianshu.com/p/1ebc15645abe
四：es6
1.es6申明变量有哪几种方式,let和var的区别？
申明变量有let const
区别有.
- 通过var定义的变量，作用域是整个封闭函数，是全域的 。通过let定义的变量，作用域是在块级或是子块中。
- 不论var声明的变量处于当前作用域的第几行，都会提升到作用域的头部，有变量提升。
-var 声明的变量会被提升到作用域的顶部并初始化为undefined，而let声明的变量在作用域的顶部未被初始化 - let声明的时候需要赋值
2.你用过的es6有哪些 ？
变量声明let/const;promise;结构赋值；箭头函数；...扩展运算符等
3.es6的...扩展运算符是浅拷贝还是深拷贝，...是怎么使用的？
...是深拷贝，
demo:
var arr = [1,2,3,4,5] var [ ...arr2 ] = arr
此题可以跟面试官聊以下深拷贝和浅拷贝的区别
4.promise的优点？
五.前端性能优化
1.减少页面加载时间的方法有哪些？
方法有：1. 压缩CSS代码
3.使用雪碧图
4.利用缓存
5.减少请求
6.优化样式表和脚本的顺序
2.前端性能测试做过吗？用什么工具？
https://blog.csdn.net/qq_17767355/article/details/51057239
六.难点问题（此类问题出现的频率比较高，需花时间去看去理解）
1.谈谈构造函数？
2.websocket是什么？有用过吗？有什么优点和缺点？websocket和http有什么区别？
讲一下webscoket和http的区别，websocket的原理和使用的场合。
WebSocket 连接允许客户端和服务器之间进行全双工通信，以便任一方都可以通过建立的连接将数据推送到另一端。WebSocket 只需要建立一次连接，就可以一直保持连接状态。这相比于轮询方式的不停建立连接显然效率要大大提高。
3.继承的方式有哪几种？
原型链继承、构造继承、实例继承、拷贝继承
4.上一个项目中遇到的问题？
此题没有固定答案
5.node.js有用过吗？express有用过吗？
肯定说有用过，至少要学自己学习过写过demo
相关知识点见 https://nodejs.org/en/
6.mvvm和mvc的区别？
http://www.360doc.com/content/16/0413/11/32348297_550241237.shtml
7.webpack用了哪些？
https://www.jianshu.com/p/dce7546a5d20
8.weex有了解吗？是干什么用的？
答有了解，Weex 致力于使开发者能基于当代先进的 Web 开发技术，使用同一套代码来构建 Android、iOS 和 Web 应用。
http://weex.apache.org/cn/guide/
9.设计模式有哪些？
- 简单工厂模式
- 单例模式
- 建造者模式（Builder）
- 原型模式(prototype)—克隆
- 中介者模式(Mediator)
- 代理模式
- 观察者模式（Observe）
- 策略模式（strategy)
- 状态模式
- 享元模式(Flyweight)
- 装饰器模式
10.原型的继承，什么时候会继承什么时候不会继承？原型和call/apply一起使用的笔试题？
要求高点的公司，都有此类题目的面试题，题目多变，但是核心思想不变，百度原型继承面试题，建议此知识点多看看多理解，出现的概念较高。
11.算法题目，两个无限大的数字的乘积？
此题当时没有答上来。
大概思路是：将无限大的数字分解为单个数字，然后再利用小学的乘法运算来计算，将大数字化为小数字，即将大问题化为小问题 ，解决了小问题，大问题就解决了。
12.斐波那契数列？递归函数？
https://blog.csdn.net/MallowFlower/article/details/78858553
13.数组的二次分类问题？ps:需要有扩展性有计算机思维。
https://blog.csdn.net/github_38771368/article/details/76576793
14.函数的调用，函数内部的this指向问题？
http://www.runoob.com/js/js-function-invocation.html
七.私人问题
1.个人定位和规划？
我简单谈了下自己的2年计划。阐述自己喜欢学习喜欢技术，并想在前端这一块做精，往高级前端工程师发展。
2.低于你这个薪资你考虑吗？
关于此问题，我会给面试官一个我最低能接受的薪资，低于这个薪资，我就不考虑。
3.谈一下你自己的优点？凭什么要这么高工资？
只有一次被问到此问题。是家金融公司，面试过程中，我表示很好。只是面试官想压我工资，刚开始用我不是计算机专业来压我工资，后来又问我这个。这个问题，我回答了2次后，都被面试官怼回来了，最后，我就说了几句我想说的话和感受。如果面试官确实想压工资，那么此问题，不管你怎么回答，面试官都不会满意。保存平常心态就好。
4.你最近有结婚的打算吗？
女性朋友会问到此问题。直接说没有。
ps：面试过程中会遇到各种问题各种面试官，重点是要自信。面试官问的问题，如果自己知道，就自信的阐述自己的观点和理解；如果是那种之前没有考虑过的有点难的问题，可以讲讲自己对这个问题的理解；如果确实不知道，就说不清楚，切不可乱说，因为面试官都是有点水平的，如果你的回答是错误的，面试官不会当面揭穿你，但是这种情况肯定是对求职者不利的。
面试官水平也有差别，遇到比较屌的面试官，也不必客气，面试官对求职者不耐烦，这些我们都是可以感受到的，这种面试这种公司，没有必要久待。水平比较高的素质比较高的面试官，求职者可多和面试官互动，互相讨论请教问题，对于自己来说，也是一种成长。
对于有的问题，可以反问面试官，比如说面试官问：需求是做一个官网，没有ui，你可以做吗？我的回答是这样的：做一个大众的普通的官网，没有ui，我是可以做的，但是肯定没有ui设计的那么好看，贵公司难道没有ui吗？
心态很重要，心态很重要，心态很重要。