一 .面试前准备

其实走到现在来了，大部分有意向投前端岗的同学也都有各自的准备了。我这里就简单说下我自己的学习路径。前端的基础知识方面，一方面靠平时的积累，另一方面靠春招前的看面经查漏补缺。平时积累的话，我个人会看一些经典的前端书籍并且进行梳理和总结，我看过的书有

红宝书
《高性能Javascript》
《你不知道的Javascript（上中）》下我一直没看，好像是讲ES6的，惭愧
蝴蝶书
《图解HTTP》
ES6入门教程 https://es6.ruanyifeng.com/
《大话数据结构》

平时的积累我是从春招前一年就开始准备了，有计划地看书和进行总结，看掘金，看微信公众号，看InfoQ。

看的东西很杂不要紧，重要的是形成自己的知识体系，这样在看任何技术文章之后，都能清晰地知道这项技术应该在知识图谱里属于哪一块，我是否已经掌握这一块知识，如果没有的话我是否有必要现在就去掌握它。

除此之外，我刷了大概3个月的算法和数据结构的题目并且在Github上写了几个项目来专门总结算法类题目（虽然在面试阿里的时候没有用上）

项目部分其实是我当时的薄弱部分，本科毕业选择的导师一个项目也没有，全部都是研究性的课题（虽然有了项目也不一定和前端相关），自己也没有参加各种比赛什么的，只是在自学的时候，在Github上找了一些技术栈稍微复杂些的来练手。不过我自己在练手工程化的时候写了好几个开源小工具，事实证明这些开源的作品在面试的时候是非常加分的。

面试还有一个很重要的部分，那就是考察候选人的软性素质，比如学习能力和学习能动力。这些东西一般是在交叉面或者hr面时进行考察的，比如阿里的hr可能会问你“你觉得你做过最失败的一件事是什么”，她有可能就是想看你遇到了困难是怎么想的以及怎么面对的。诸如此类的问题也难以准备，因为它由一个人的性格决定，也很难在hr面前造假，所以我能准备的只有尽可能在技术层面表现出我好学，自驱动的特质。

二.面试内容

我当时一面的时候精神状态不是很好，虽然是下午但是特别困，经常答题的时候注意力不集中（现在看来真是一次危险的经历）。但是面试官超级nice，我很多次没有听清楚，他都很耐心地和我重新说（比如他当时问我了不了解async和await，我听了三遍才明白他说的这两个单词是这个，可能是因为发音问题哈哈）

你这个专业和计算机专业关联大吗，我就说我们这个专业在本科会学习一些计算机的课程的，当然同学的就业可能跟计算机关系不大，我自己对前端非常感兴趣所以就一直学习
看了下我的博客，问了里面的一个动画库
问了下实习经历
自我介绍一个比较难的项目
之前做过的项目里有没有用到什么比较难的算法
Flex介绍一下
CSS选择器
选择器的效率问题
jQuery的选择器怎么实现的
说一下常见的伪类和伪元素
移动端适配
Vue中的响应式怎么实现
Vue中对数组也是这么做的吗
Vue模板编译说一下流程
介绍一下vdom
Vue和React的vdom算法对比
Vue中组件通信的方法
持续集成的问题（因为我的项目里有）
VueRouter两种模式的原理
阐述下宏任务和微任务
让我介绍下我对前端安全问题的理解（XSS和CSRF的出现和应对策略）
MySQL的基本问题
队列有什么特点和应用场景
问了几种排序算法
提问环节（我问了一下技术栈只会用Vue有关系没，面试官说不要紧，这些都是相通的）

介绍下自己的学习习惯
问了下我的一个WebGL的项目
让我介绍下用Vue写过什么项目
逮住另外一个项目一直深挖...
Webpack的loader和plugins原理
三个手撕代码题，分别是考察原型链，一个是考察this，一个是判断两个矩形相交的算法题
让我介绍下前端安全
有没有了解过学校里其他前端相关的社团
自己评价下优点和缺点

自我介绍
介绍一下自己认为最难的项目以及我认为的难点
你接触过Vue以外的框架吗，了解程度怎么样
详细介绍下Vue里的响应式机制
讲下Vue里的diff原理
提问环节

自我介绍（做了哪些事和项目，学习路径和规划）
总结下自己目前的短板
为什么选择前端
自己经历过最失败的一件事
自己觉得最成功的的一件事
一个词总结一下自己
平时有什么业余爱好

三.阿里实习

当时春招也拿了几个offer，最后考虑到阿里的含金量和转正率还是选择了阿里。

这里补充一下，我个人觉得实习还是挺有必要的，一方面在秋招中一份优质的实习经历会非常加分，同时实习可以让你提前体验互联网生活，你可以根据情况来判断自己是否要决定走互联网这条路，我们组去年就有人来了一周就辞职回去读博了（害怕.jpg）

阿里的实习待遇还是挺好的，一天250元+2000的房补，再加上周末你可以选择加班，周末加班的话食堂是全免费的，而且也可以拿到补助（正式员工加班是没有补助的hhh）

来了部门之后的故事用这一篇文章也写不完，简单总结下就是，大家都很nice，但是互联网公司的压力还是摆在那里的，且身边的小伙伴们都很优秀而且努力~

四.最后

为了准备这次面试刷了很多面试题，并且做了一个整理，分了HTML、css、JavaScript、React、Vue、浏览器、服务端与网络、算法等等.....下面分享给大家

HTML

浏览器页面有哪三层构成，分别是什么，作用是什么?
HTML5的优点与缺点？
Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?
HTML5有哪些新特性、移除了哪些元素？
你做的网页在哪些浏览器测试过,这些浏览器的内核分别是什么?
每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？
说说你对HTML5认识?（是什么,为什么）
对WEB标准以及W3C的理解与认识?
HTML全局属性(global attribute)有哪些?
说说超链接target属性的取值和作用？
iframe有那些缺点？
Label的作用是什么，是怎么用的？
如何实现浏览器内多个标签页之间的通信?
谈谈你对canvas的理解？
......

CSS

解释一下CSS的盒子模型？
请你说说CSS选择器的类型有哪些，并举几个例子说明其用法？
请你说说CSS有什么特殊性?（优先级、计算特殊值）
常见浏览器兼容性问题与解决方案？
列出display的值并说明他们的作用？
如何居中div, 如何居中一个浮动元素?
请列举几种清除浮动的方法(至少两种)?
block，inline和inlinke-block细节对比？
什么叫优雅降级和渐进增强？
说说浮动元素会引起的问题和你的解决办法
你有哪些性能优化的方法？
为什么要初始化CSS样式？
CSS样式表根据所在网页的位置，可分为哪几种样式表？
请你说说em与rem的区别？
......

JavaScript

js的各种位置，比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别？
js拖拽功能的实现
异步加载js的方法
js的防抖与节流
说一下闭包
说说你对作用域链的理解
JavaScript原型，原型链 ? 有什么特点？
请解释什么是事件委托/事件代理
Javascript如何实现继承？
函数执行改变this
babel编译原理
函数柯里化
说一下类的创建和继承
说说前端中的事件流
如何让事件先冒泡后捕获
说一下图片的懒加载和预加载
js的new操作符做了哪些事情
改变函数内部this指针的指向函数（bind，apply，call的区别）
Ajax解决浏览器缓存问题
......

Vue

Vue中 key 值的作用
Vue 组件中 data 为什么必须是函数？
vuex的State特性是？
介绍一下Vue的响应式系统
computed与watch的区别
介绍一下Vue的生命周期
为什么组件的data必须是一个函数
组件之间是怎么通信的
Vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？
Vue如何实现按需加载配合webpack设置
简单描述每个周期具体适合哪些场景
scss是什么？在Vue.cli中的安装使用步骤是？有哪几大特性？
聊聊你对Vue.js的template编译的理解？
Vue 路由跳转的几种方式
Vue如何实现按需加载配合webpack设置?
Vue的路由实现：hash模式和history模式
Vue与Angular以及React的区别？
Vue路由的钩子函数
什么是Vue的计算属性？
......

React

介绍一下react
React单项数据流
react生命周期函数和react组件的生命周期
react和Vue的原理，区别，亮点，作用
reactJs的组件交流
有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢
项目里用到了react，为什么要选择react，react有哪些好处
怎么获取真正的dom
选择react的原因
react的生命周期函数
setState之后的流程
react高阶组件知道吗？
React的jsx，函数式编程
react的组件是通过什么去判断是否刷新的
如何配置React-Router
路由的动态加载模块
Redux中间件是什么东西，接受几个参数
redux请求中间件如何处理并发

浏览器

跨标签页通讯
浏览器架构
浏览器下事件循环(Event Loop)
从输入 url 到展示的过程
重绘与回流
存储
Web Worker
V8垃圾回收机制
内存泄露
reflow(回流)和repaint(重绘)优化
如何减少重绘和回流?
一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
localStorage 与 sessionStorage 与cookie的区别总结
http多路复用
cookie可设置哪些属性？
正向代理和反向代理
......

服务端与网络

HTTPS和HTTP的区别
HTTP版本
从输入URL到页面呈现发生了什么？
HTTP缓存
缓存位置
强缓存
协商缓存
缓存的资源在那里
用户行为对浏览器缓存的影响
缓存的优点
不同刷新的请求执行过程
为什么会有跨域问题
如何解决跨域
访问控制场景（简单请求与非简单请求）
withCredentials 属性
服务器如何设置CORS
URL类中的常用方法

算法与数据结构

二叉树层序遍历
B树的特性，B树和B+树的区别
尾递归
如何写一个大数阶乘？递归的方法会出现什么问题？
把多维数组变成一维数组的方法
说一下冒泡快排的原理
Heap排序方法的原理？复杂度？
几种常见的排序算法，手写
数组的去重，尽可能写出多个方法
如果有一个大的数组，都是整型，怎么找出最大的前10个数

前端飘哥