最近整理了一些面试题和面试经验，分享给大家，希望能给大家带来帮助。
前端面试类型我大致总结为四类：
1、基础题（包括js基础、css、网络知识）
2、框架（jquery、vue、react、angularjs等等 取决于你会哪些框架）
3、常用工具（git、webpack、gulp）
4、提升类
5、工作经历
1、基础题
首先是基础题，对于这类问题，准备的时候，可以多问一下自己为什么，因为面试管问的时候可能会由一道题延伸到另一个题，也可能现场出一到题，这时候就要考验我们对基础知识的掌握和灵活应用的能力了。
下面是我总结的一些问题：
----关于js的----
这类题目的掌握和熟练应用可以大大提升我们平时的代码质量。
（1）问：js基本类型和引用类型
答：基本数据类型：Undefined、Null、Boolean、String、Number、Symbol （es6）。引用类型：Object。Object可以细分为：Object 类型、Array 类型、Date 类型、RegExp 类型、Function 类型
由这道题可能延伸到（2）题。
（2）问：如何判断js数据类型
答：（1）typeof (2) instanceof (3) Object.prototype.toString.call()
可以了解下这几种方法的原理，instanceof 会涉及到原型对象。
（3）问：js 拷贝
答：js的拷贝的话，分为深拷贝和浅拷贝。
浅拷贝： 只对基本数据类型进行拷贝，方法有：Object.assign() 、es6的结构赋值、数组的slice、concat方法、展开运算符、Array.from。
深拷贝：对所有数据类型进行真正的拷贝，方法有：利用JSON.stringify() 和JSON.parse()、利用递归实现。
（4）问：事件处理机制
答：事件处理机制有三个阶段：事件捕获、目标阶段、冒泡阶段。（这里不展开描述了，但是需要知道每个阶段发生了什么）
（5）问：原型和原型链
答：JavaScript 只有一种结构：对象。每个实例对象（ object ）都有一个私有属性（称之为 proto ）指向它的构造函数的原型对象（prototype ）（只有函数对象才有prototype）。该原型对象也有一个自己的原型对象( proto ) ，层层向上直到一个对象的原型对象为 null。根据定义，null 没有原型，并作为这个原型链中的最后一个环节。（即Object.prototype.__proto__ = null）;
（6） 问：什么是闭包
答：要了解闭包，要先了解什么是作用域，函数内部可以直接读取全局变量，但是函数外部是无法读取函数内的局部变量，那么如何可以在外部读取到函数内部的变量，可以通过函数内部的函数实现，在这个内部函数中去访问函数内部的变量，并将其返回，这就形成了闭包，即能够读取其他函数内部变量的函数。
（7）问：事件循环机制（event loop）
答：先了解几个概念：1、js是单线程。 2、一个线程中，事件循环是唯一的，但是任务队列可以拥有多个。3、任务队列有宏任务（script(整体代码), setTimeout, setInterval, setImmediate, I/O（输入输出）, UI rendering）和微任务（process.nextTick, Promise, Object.observe(已废弃), MutationObserver(html5新特性)）
事件循环：
（1）js代码执行时，先按代码顺序将同步任务压入主执行栈中执行 （2）遇到异步任务则先将异步任务压入对应的任务队列中（宏队列或微队列） （3）同步任务执行完毕后，查看微队列，将微任务一一取出进入主执行栈中执行 （4）微任务队列清空后，再查看宏队列，只取出第一个宏任务执行，执行完一个宏任务后，回到第三步的操作 这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）。
（8）问：前端模块化
答：commonJS、CMD 和 sea.js、AMD 和 require.js、ES6（可能会问require和import区别）
（9）问：es6新增特性
答：可以看下阮一峰老师的文档，非常详细（ES6 入门教程）
----关于css的----
css类型的题目出现的频率没有其他类型的题目高，这类题目可以多做下demo
（1）问：盒子模型
答：ie盒子模型： width 和 height 指的是内容区域+border+padding的宽度和高度。
标准盒子模型：width 和 height 指的是内容区域的宽度和高度。
ie盒子模型和标准盒子模型转换可以利用 box-sizing： border-box / content-box；
（2）问：有哪些行内元素、块级元素
答：行内元素：a, b, i, abbr, span, sub, sup, strike, strong
块级元素：div, p, h1-h6, ul, textarea, table, button
空元素：hr, input, br, img, link, meta
（3）问：水平垂直居中
答：1.水平居中：
行内或类行内元素：text-align: center;
块级元素：margin-left 和 margin-right 为 auto（前提是已经为元素设置了适当的 width 宽度，否则块级元素的宽度会被拉伸为父级容器的宽度）
多个块级元素：display:flex; justify-content: center;
2.垂直居中：
行内元素：父节点：display: table; 居中元素：display: table-cell; vertical-align: middle;
未知元素的高度：父节点： position: relative; 居中元素： position: absolute; top: 50%; transform: translateY(-50%);
（4）问：position属性
答：position主要的属性值：static（默认值）、relative、fixed、absolute、sticky。（每个属性的布局方式）
（5）问：如何画一个三角形、或梯形
答：border属性（了解border属性原理）
----关于网络知识的----
（1）问：get、post区别
答：GET产生一个TCP数据包，请求时浏览器会把http header和data一并发送出去，服务器响应200（返回数据）
POST产生两个TCP数据包，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）
（get请求参数的限制是来源与浏览器或web服务器，浏览器或web服务器限制了url的长度。）
（2）问：cookie、localStorage与sessionStorage区别
答：cookie: 一般由服务器生成，可设置失效时间.
localStorage:仅在客户端（即浏览器）中保存,除非被清除，否则永久保存
sessionStorage:仅在当前会话下有效，关闭页面或浏览器后被清除
(可能会给个场景，问采用哪种存储方式比较好)
（3）问：http缓存机制
答：强缓存和协商缓存（内容太多了，不展开了哈）
（4）问：跨域问题
答：什么是跨域：浏览器在执行脚本的时候，都会检查这个脚本属于哪个页面，即检查是否同源，只有同源的脚本才会被执行；而非同源的脚本在请求数据的时候，浏览器会报一个异常，提示拒绝访问
（协议、域名、端口号都相同，只要有一个不相同，那么都是非同源。）
跨域的解决方法：（1）response 添加 header：resp.setHeader("Access-Control-Allow-Origin", "*");（2）jsonp （原理即利用script标签可以跨域）（3）代理
2、框架问题
框架问题主要会根据简历中涉及到的框架和面试的公司用到的框架来问，目前比较热门的就是vue和react。如果不会其中一个的话，直接告诉面试官就可以。我只用过vue，所以这里只总结vue相关的内容。
一般面试管会问到的主要有两种类型：
一类是api相关的：（1）路由有哪些方式。（2）vue生命周期。（3）watch和computed区别。（4）solt有哪些（5）路由有哪些钩子
一类是原理相关的：（1）vue数据双向绑定原理（高频）。（2）keep-alive原理。（3）nextTick原理。（4）diff算法。（5）列表数组中key的作用。（6）vue的Virtual DOM。
3、常用的工具
git问的话一般就是基本的操作，这个问到的不多，一般会用就可以。打包工具会常问一些（但是我也不太会，所以整理的也不多）：（1）webpack常用的打包插件。（2）webpack常见的loader。（3）webpack和gulp区别
4、提升类
提升类的面试官一般就是问如何进行优化了，比如（1）如何进行白屏优（2）性能优化。这类题答案很广泛，从输入url到页面完全渲染的过程都有可以进行优化的地方，比如减少域名解析，利用浏览器缓存，减少页面回流，当然也可以从项目上角度，如组件化、模块化开发，压缩图片，压缩包体积。但是回答的时候要了解自己答的每个点，因为面试管可能会回问一下，比如讲一下浏览器的缓存机制。
5、工作经历
这类问题一般都是结合简历去问的，所以简历很重要，一定要突出自己的优势，自己不熟悉的部分千万不要写，面试管问到就蒙了。说到这里，顺便说下简历，简历很重要的部分就是项目经历，最好是遵从star法则去写，重点突出自己负责的工作和结果部分，自己做了什么，达到了什么结果，优化了什么功能，提升了多少性能。学会用数据说话。
除了简历中的内容，面试官可能还会问到（1）项目中遇到哪些困难（这个困难要有些深度，最后你是如何解决的）（2）印象最深的项目（从这个项目中你提升了哪些能力）
我整理的大概就是这些啦，有不足的地方还请多多指教。最后希望大家都能有一份满意的工作～