初衷
除了自己给自己充电 还有给同样从事前端的朋友一点面试经验补充
面试题目很多，我总结的是我前段时间面试遇到的比较经典的问题, 面试样本有8家
两家高级，其他初中级，高级侧重算法，初中级侧重框架使用的熟练程度和对源码的理解（理解层次看个人能力了）
前端基础 + WEB安全 + 性能优化 是不分级别的 所有前端人员都应该掌握，不同级别掌握的量多量少而已
本文适用读者：
- 正在从事前端工作有技术提升的意向开发
- 打算跳槽的前端开发人员
- 正在学习前端的童鞋（先学会基础再看）
通用面试题目
HTML+CSS
由于我目前面试到的公司中 对于布局这部分的题目少之又少 即使有也是双飞翼或者类似双飞翼布局的问题 所以这部分的题目有些欠缺 欢迎大家补充
- 双飞翼/圣杯布局的多种实现方式
圣杯布局、双飞翼布局、Flex布局和绝对定位布局的几种经典布局的具体实现示例
Javascript
apply call bind (改变this指向)
深入浅出妙用 Javascript 中 apply、call、bind
不用call和apply方法模拟实现ES5的bind方法原生事件委托和 JQ 的动态监听(on live方法)
问题：不管是原生JS添加事件监听和JQ的on方法(一般用法) 法在动态添加元素之后 新增加的元素均无法绑定事件
1
2
3
4
5
6
7
8<ul id="list-wrapper">
<li class='item'>item1</li><!--onclick事件正常监听-->
<li class='item'>item2</li><!--onclick事件正常监听-->
<li class='item'>item3</li><!--onclick事件正常监听-->
<li class='item'>item4</li><!--onclick事件正常监听-->
<!--假设这个元素是通过js动态添加的-->
<li class='item'>item5</li><!--无法监听onclick事件-->
</ul>1
2
3
4// JQ
$('.item').on('click', function(){})
// 原生js 只是演示 就不区分 IE6-8 和 chrome 的区别了 兼容写法用 attachEvent
document.getElementsByClass('.item').addEventListener('click', function(){})这时候需要用到事件委托或者 jquery on 方法的特殊用法 还有 delegate live 方法（live 在 jq1.7版本以后就废弃了 不做演示）
1
2
3
4
5
6
7
8
9
10$('#list-wrapper').on('click', 'li', function(e){
console.log(e)
})
$('#list-wrapper').delegate('li', 'click', function(e){
console.log(e)
})
// js事件会冒泡 可以通过监听父级元素来拦截事件 从事件中可得到触发事件的元素本体 不管是不是新增的 都能正常监听
document.getElementById('list-wrapper').addEvenlistener('click', function(e) {
console.log(e.target || e.serElement)
})上述代码为纯手敲，难免手残，有错误可以指出
文章参考
JSON 相对于 XML 有什么优势 或者说下两者各自的优劣势
数组去重
方法很多 我就不献丑了 直接放链接
六种方法实现JavaScript数组去重递归 尾递归
递归的我就不说了 太常见了 随便一搜各种语言的实现都有 就放一篇尾递归优化的文章 还是阮一峰老师的
尾调用优化js隐式转换 (a == 1 && a == 2 && a == 3) 如何成立?
你所忽略的js隐式转换Event Loop (setTimeout Vue.$nextTick() XHR等异步操作
Promise JQ的链式调用区别和实现
链式调用实现上的区别： Promise是返回另一个Promise JQ是返回this
Promise 对象原型链 继承
完整原型链详细图解（构造函数、原型、实例化对象）不用loop(for循环)创建 n-m 的数组
判断一个变量是否是数组的方法 越多越好
网络安全 WEB安全(JWT 的 T如何防止被钓鱼链接利用 CSRF攻击如何防范 XSS如何避免)
跨域通信 跨Tab通讯 请求跨域 Cookies跨域
Cookies SessionStorage LocalStorage
堆和栈的实现 区别
基本类型和引用类型 分别在堆和栈中如何存放
数据结构和算法(红黑 二叉)
正则
HTML5 CSS3 ES6 新增的API
var let 区别
动画
性能优化
移动端网页性能优化自查表http状态码 头部和响应
http缓存 浏览器缓存机制
TCP/IP
框架相关
webpack gulp grunt 这几类打包工具 不分框架 都要掌握 至少能看能且能改配置 最好有自己从0到1的搭建过相应脚手架
Vuejs
Vue是我个人主要技术栈 可能这部分我整理的会多一点 毕竟我自己也出过面试题
- Vue生命周期有哪些
- Vue双向绑定的原理（基于js什么特性实现的）
- Vue-router 有哪两种模式 分别基于什么实现的 如何实现动态加载
- Vuex 是做什么的？描述一次有异步操作的完整数据流向
- 说下 Vuex 的 module 和 plugin
- Vue virtual dom 实现
- Vue v-for 中 key 的作用
- Vue 动态组件
<component is="component-name" /> - Vue $nextTick() 原理是什么
推荐阅读：
这是我17年在公司推广Vue的时候准备的学习路线图 算是比较全面的整理了 欢迎补充： (教程中有涉及到API使用异常记得以官方文档为准)
源码分析 打算深入Vue框架内部实现原理的非常建议看这个
React
我虽然写过ReactNative 但是主要技术栈不是React 就不献丑了 给个知乎专栏链接 这部分我在面试的时候 有一半以上都命中了
Angular的我就没有资源啦~
大家在搜索框架对应面试题的时候 可以以 框架名+面试题 如： Vuejs面试题 来搜索 另外 用
