面试技巧：成为令HR心动的程序猿

前言

在谈面试技巧之前，我们先聊聊面试的本质是什么。简单来说，面试是面试官向应聘者提出问题，以此观察应聘者的反应和表现，以评估其知识、能力、经验等是否符合职位的要求。由此，想在一场面试中脱颖而出，首先我们自身要有过硬的基础知识与技能储备（不然几个面试题一出，人就傻了，笔试都过不了，何谈面试机会），其次加上不卑不亢的回答（是来找工作的，不必感觉低人一等，行就是行，不行就下一家）。

基础知识与技术储备

作为一个前端，我简单从以下几个点聊下：

HTML/HTML5

一般情况下，大概率会问【HTML5有哪些新的特性或技术？】。以此衍生，语义化标签有哪些及其作用是什么，Canvas元素有什么作用，文档类型和字符集是什么，video和audio元素有哪些属性。所以，有关HTML5的新特性，要重点关注下。

常见面试题整理：

HTML5有哪些新的特性或技术？
HTML5中的新文档类型和字符集是什么？
在HTML5中如何嵌入音频或视频？
HTML5有哪些其他的媒体标签？
HTML5 Canvas元素有什么作用？
HTML5提供了哪些存储类型？
HTML5相对于HTML4有哪些主要的区别和改进？
请解释一下HTML5中的语义元素，如header、footer、article、section等。
HTML5中的video和audio元素有哪些属性？
请解释一下HTML5中的表单控件，如email、date、range等。
HTML5中的Web存储API有哪些数据存储方式？
请解释一下HTML5中的拖放API以及如何使用它？
HTML5中的Web Workers是什么？如何使用它？
HTML5中的Web Sockets是什么？如何使用它？
HTML5中的WebRTC是什么？如何使用它？
请解释一下HTML5中的SVG和Canvas的区别和用途。
在HTML5中如何使用WebGL或WebGL 2.0来创建3D图形？
HTML5中的File API是什么？如何使用它来读取文件？
请解释一下HTML5中的Geolocation API以及如何使用它？
HTML5中的Web Audio API是什么？如何使用它来处理音频？

CSS/CSS3

一般情况下，大概率会问【对盒子模型的理想？】。以此衍生标准盒子模型，IE怪异盒子模型。另外可能会问响应式设计是什么及如何实现，水平垂直居中怎样实现及有哪些方法，grid网格布局与flex弹性布局，css选择器有哪些及怎样使用，css预编语言有哪些及区别，css性能优化有哪些方法。

常见面试题整理：

CSS是什么？它有哪些作用？
CSS有哪些选择器？它们的优先级如何计算？
CSS有哪些布局模型？它们的特点是什么？
CSS中的盒模型是什么？它有哪些组成部分？
CSS中的浮动是什么？它有哪些应用场景？
CSS中的定位是什么？它有哪些属性？
CSS中的动画和过渡是什么？如何实现它们？
CSS3有哪些新特性？如何使用它们？
CSS中的媒体查询是什么？如何使用它们？
CSS中的响应式设计是什么？如何实现它？
CSS中的Flexbox和Grid布局是什么？如何使用它们？
CSS中的字体和文本样式有哪些属性？如何使用它们？
CSS中的伪类和伪元素是什么？它们有哪些应用场景？
CSS中的继承是什么？如何使用它？
CSS中的属性前缀是什么？为什么需要它们？
如何居中一个元素？有哪些方法可以实现它？
如何隐藏一个元素，但仍然显示它的内容？
如何清除浮动元素的影响？
如何使用CSS实现图片懒加载？
如何使用CSS进行性能优化？

JavaScript

一般情况下，大概率会问【闭包、原型继承】。以此聊下闭包的利弊，作用域链。另外可能会问JavaScript有哪些数据类型，什么是事件冒泡和事件捕获，JavaScript中的防抖和节流，JavaScript中的事件模型，JavaScript中的宏任务与微任务，JavaScript中的ES6新特性。

常见面试题整理：

JavaScript是什么？它的主要用途是什么？
JavaScript有哪些数据类型？
JavaScript有哪些运算符？
JavaScript有哪些函数？
什么是变量提升（Hoisting）？
什么是闭包？请给出例子。
什么是事件冒泡和事件捕获？请给出例子。
请解释一下JavaScript中的this关键字。
请解释一下JavaScript中的原型继承。
请解释一下JavaScript中的定时器。
请解释一下JavaScript中的防抖和节流。
请解释一下JavaScript中的异步编程。
请解释一下JavaScript中的Promise、async/await。
请解释一下JavaScript中的垃圾回收机制。
请解释一下JavaScript中的DOM操作。
请解释一下JavaScript中的事件模型。
请解释一下JavaScript中的JSON对象。
请解释一下JavaScript中的模块化编程。
请解释一下JavaScript中的箭头函数。
请解释一下JavaScript中的ES6新特性。

vue

一般情况下，大概率会问【生命周期钩子有哪些、组件通信有哪些方式】。以此聊下生命周期什么时候调用，及在每个生命周期干了什么。另外可能会问mixins是什么及如何使用，路由是什么及如何使用，虚拟DOM是如何工作的及其与真实DOM有什么区别，双向数据绑定是如何实现的，computed和watch有什么区别，指令有哪些及v-if和v-show指令有什么区别。

常见面试题整理：

Vue是什么？它有哪些特点？
Vue的生命周期钩子有哪些？它们在什么时候被调用？
Vue中的v-if和v-show指令有什么区别？
Vue如何实现组件间的通信？
Vue中的mixins是什么？如何使用？
Vue中的computed和watch有什么区别？
Vue中的父子组件如何进行通信？
Vue中的路由是什么？如何使用？
Vue中使用v-for时需要使用key属性吗？为什么？
Vue中的单文件组件是什么？它们有哪些组成部分？
Vue中的响应式原理是什么？如何检测数组的变化？
Vue中的虚拟DOM是如何工作的？与真实DOM有什么区别？
Vue中的模板(template)是什么？如何使用？
在Vue中如何进行依赖收集？
Vue的双向数据绑定是如何实现的？
Vue中的指令有哪些？如何使用它们？
Vue中如何使用mixins进行组件复用？
在Vue中如何进行表单验证？
Vue中的插槽(slot)是什么？如何使用它们？
Vue中的组件通信有哪些方式？它们的优缺点是什么？

面试技巧

进入正题，从以下几个方面聊聊面试技巧：

1. 了解公司和岗位需求，在面试前，要了解清楚这个公司是干嘛的，及他对招聘岗位要求是怎么的。（例如，你面试的是一家游戏研发的公司，除了要求掌握基础的前端知识，有没有要求要会使用一些其他软件什么的，或者公司主要业务是小程序这块，你有没有具备小程序研发能力，或者公司主要业务是可视化数据展示，你有没有具备Echart等可视化研发技能）。
2. 在网上刷一刷岗位的常见面试题，例如在【基础知识与技术储备】中提到的，各个技能点常见的面试题。
3. 展示实际项目经验：过展示自己的实际项目经验，来展示自己的能力，例如你在项目中承担的角色和所做的工作。
4. 了解新技术动态，前端技术不断发展和更新，面试过程中，可能会问最新的前端技术动态和趋势。
5. 注意语言表达和形象，首先是着装要整齐，不必西装革履的，但要看起来干干净净的，别邋里邋遢的；其次要清晰地表达自己的想法和观点。

还有什么要补充的，欢迎来探讨探讨。