5年前端技术官告诉你初级前端该如何准备技术面试

喜欢ヅ旅行 2022-12-20 12:52 321阅读 0赞

## 面试分为三部分 ##

*  技术面试：问技术问题。
 *  负责人面试：考察综合能力。比如：项目把控能力、项目深度、项目架构、业务等。
 *  hr 面试：侧重于性格、沟通、潜力等。

每轮面试在一小时左右。

### 每轮面试的知识点 ###

一面：

> 主要考察基础知识。

*  页面布局
 *  CSS盒模型、DOM事件
 *  HTTP 协议、原型链
 *  面向对象、通信
 *  前端安全、算法

二面：

*  渲染机制
 *  JS 运行机制
 *  页面性能
 *  错误监控

三面：

> 不再关注技术层面。

*  业务能力
 *  团队协作能力

终面：

*  职业竞争力
 *  职业规划

面试成功需要：技术过关、面试技巧等。

## 校招和社招各自看中的层面 ##

校招：

*  知识：40%
 *  能力：59%
 *  经验：1%

社招：

*  知识：30%。比如协议、业务的认知程度。
 *  能力：50%。比如架构、业务的抽象能力、项目的把控能力。
 *  经验：20%。项目的体现。

以上仅供参考。

## 面试准备 ##

面试准备包括以下四个部分：

*  职位描述（JD）的分析
 *  业务分析
 *  技术栈准备
 *  自我介绍

每个公司又有一套成熟的技术栈。比如在构建工具上，百度用 fis3、美团用 Gulp。

你要面哪个公司，要先看看对方要求的技术栈。

上面四个部分，我们接下来详细介绍。

### 一、（JD）的分析 ###

#### 介绍 ####

概念：

*  职位描述：注重的是工作职责。
 *  任职要求：要求的是工作能力。通常描述得很细致。

PS：前端的知识庞大，不可能所有的内容都准备好，但是要向“任职要求”靠拢。

分析职位描述（JD）的目的是：

*  快速识别出这个岗位是否是自己喜欢的、想要的。
 *  目前的技能是否能胜任岗位的要求。短期内的准备能否胜任。

#### 举例：京东 web 前端的职位描述 ####

如下：

[![6b86d0891a465ba6b851eabd45ad804d.png][]][6b86d0891a465ba6b851eabd45ad804d.png 1]

**职位描述：**

（1）面试时，会同时考虑到 `PC 端和移动端`两个部分。

（2）`App H5开发`指的是两层意思：

*  Hybrid 技术栈。
 *  纯 H5 开发。和 native 开发没有关系，比如活动、专题。

（3）`调试数据接口`：要学习一下怎么模拟数据。

（4）`前端组件库的建立`：要求较高但非常重要。体现在：

*  基本功要扎实，原生 js、css的理解要到位。
 *  之前有没有前端组件库相关的项目经验
 *  是否通读过其他的 UI 组件库。

（5）`优化与重构`：难度比第四条更大。

PS：前三条是基本知识，第四条、第五条属于进阶。

**任职要求：**

（1）`3年以上工作经验`：不要太较真工作年限。`精通 H5 特性`：说明公司很看重移动端。了解H5`最新规范`：贵公司希望我对新技术是有追求的，比如`ES6`等。

（2）要求我们对`面向对象`部分有足够的了解。组件化的编程也离不开面向对象。

（3）体现了几点：

*  `熟悉 Web 标准`：熟悉最新的标准即可。
 *  `表现与数据分离`：MVC框架。
 *  `语义化`：这个词千万不要忽视。不是什么都用 div。
 *  `实际经验`：利用框架开发的过程中，遇到过哪些问题？没有实际经验的话，也要提前准备几个问题。

（4）以下几点：

*  `前端架构分析与设计...`：说明此岗位并不面对初级岗位。因为工作一至两年的人，大部分都是**做业务开发**，缺少**系统的架构能力**。

我们要准备一个项目的架构（比如公司现有的项目）重新梳理，包含：目录结构的设计、复用性设计、模块化设计、自动化测试、上线流是什么。

*  `易读、易维护的代码`：面试过程中一定会让你写代码，来体现。要求；每个函数的功能要单一、能抽象尽量抽象。符合这两个原则，基本就满足了“易读、易维护”。
 *  `高质量、高效率的代码`，短时间内不好准备。

（5）`用户可用性、用户体验、用户研究`：考察的不是技术，而是候选人对于产品体验的理解。不仅仅只是完成功能而已。

（6）`强烈兴趣`等，是公司企业文化的一种要求。多去GitHub上看看别人的项目里用的什么新技术、多看博客。短时间内无法准备。

（7）了解`Sass`和`Less`：这是基本技能。

（8）**熟悉**`web构建工具`：新手推荐学习 Glup，而不是 grunt。当然，你要知道 **Glup 和 grunt 的区别**。

PS：了解、熟悉、精通，是有区别的。

（9）暂时可以忽略。如果 职位描述里没有要求`Node.js`，而你只会一点点 `Node.js`，那不建议你面试的时候把`Node.js`体现出来。否则是给自己挖坑。

### 二、业务分析 ###

CSS3 动画是重点准备的内容。

jQuery 要准备事件委托、选择器等。

ES6语法：import、export等。

通过简单分析源码，我们初步得知网站的以下几点：

*  jQuery
 *  vue 框架
 *  ES6
 *  webpack 打包工具

### 三、前端技术栈准备 ###

![34e452c8c819159a541815a536573781.png][]  
上图中，左侧是前端技术核心，右侧是前端工程化。

**左侧**：（前端技术核心）

*  jQuery：要注意看源码。看源码时，要看这几个：核心架构、事件委托是什么、插件机制、兼容性。
 *  三大框架：都是mvvm框架，准备一至两个即可，或者精心准备一个。面试时会问得很细。比如面试官会经常问Vue、React的源码。建议找网上的源码分析的文章。
 *  Node.js：服务器端的运行环境。如果没有相关项目经历，就尽量不要提。
 *  JavaScript 基础：框架有时候都很虚；熟练掌握 JavaScript 基础，才是行走江湖、驰骋千里的关键。

**右侧**：（前端工程化）

*  npm、yarn：包管理工具。npm的常见命令、npm scripts 怎么用的。
 *  webpack：模块打包。
 *  gulp、grunt：构建工具。
 *  Sass、less：CSS 预处理器。
 *  Babel：ES6转ES5

### 四、自我介绍 ###

面试问的问题，很大层次上，取决你的简历和自我介绍。

#### 简历 ####

简历中最重要的四个信息：

*  基本信息：姓名、年龄、手机、邮箱、籍贯。
 *  学历：从大到小写。硕士 -> 本科。
 *  工作经历：时间、公司、岗位、职责、技术栈、**业绩**。业绩是大多数人所忽略的。
 *  开源项目、Github、说明。

自我评价可以不写。

项目的业绩上，要包括：**技术收益**和**业绩收益**。

#### 自我陈述 ####

1、**把握面试的沟通方向。**

如果陈述中谈到项目，面试官可能会问：

*  负责了什么项目，项目是做什么的
 *  和前端的结合点是？你的角色是？项目中承担了什么责任？
 *  你在项目中的成绩？

如果你说自己是项目`负责人`，会被问到：

*  该项目怎么分配？有几个人参与？
 *  作为负责人，你的角色是什么？是项目管理还是技术管理？
 *  遇到技术难点，如何解决？

### 提问题 ###

如果在深入问题时，碰到不会的，不要说“我不知道”。建议回答：

*  这方面我没有经验，能不能**指点一下**？
 *  有什么建议或者参考资料吗？我想把这个东西弄懂。

## 最后，给刚毕业的大学生一点建议 ##

### 刚毕业找工作并不是全看技术 ###

在刚毕业的时候我会认为找工作是只看技术的，毕竟我们是技术岗位。

但是现在自身的感觉包括也和其他小伙伴聊过之后发现技术有的时候占比也没有想象那么高。

因为其实我们毕业之后 1 -2 年内并不是特别能拉开差距，大家的水平相差都不是特别大。

这个时候可能一些其他的品质更重要，比如你的沟通能力、你的性格、是否踏实。

同时，找工作这个事情，运气和缘分也是很重要的，比如当时的岗位是否是急缺岗位，如果是新增的部门或者刚好有人离职需要补位，这些特殊情况下，可能要求会稍微降低些（绝对不会降低太多）。

所以最好是找团队人员内推，这样对团队的情况会更加了解。

但是个人觉得，3 年之后技术水平的差距就会越来越大了，并且想要缩短差距也会越来越难。

### 刚毕业尽量去大公司 ###

其实就和你上大学选择名校还是一般学校，有些人说不想当大公司的螺丝钉的时候可以先问下自己能不能够进入大公司，不要还没有进入就开始酸。

有能力去而选择不去和去不了是两个概念。

从自身以及周围人的经验而谈，大公司你能学到的东西从各方面都是比小公司强一点的（这里说的小公司不代表某些小而精的公司）。

个人经验而言，大公司并不是每个人都是螺丝钉，做重复的劳动，因为你所对接的部门有很多，你需要和各种各样的前端、后端、产品、设计、QA 接触，每个人的习惯都不尽相同，也会遇到跨部门合作，不同部门的技术栈可能会不一样，所以，你所接触的东西是多元化的；

相反，小公司所接触的前端、后端、设计和 QA 基本都比较固定，基本上也不会有跨部门合作的需求，并且技术栈相对而言比较固定，使用了一套技术栈基本也不会换，所以你的技术提升视野可能会稍微窄一点。

并且大公司的业务复杂程度和用户数量也是小公司所不能提供的。

说句实在话，简历中有知名互联网公司的工作经验是很加分的，基本都能有个面试资格，因为从某种程度降低了成本，因为既然能够去知名互联网公司，说明肯定是有优势的。

### 不要只会 API，要了解其原理 ###

我们老大经常给我们说过的一句话是：“不要只会一些 API 的东西”，现在前端的一个现象是，很多人使用了一些 API，就觉得掌握了某些知识。

要注重一些底层知识，一些原理，这才是长远发展的必备技能。

比如在电面的时候问：“一句话概述下什么是 promise”，很多人都回答 promise 的使用方法。

### 找工作是双向选择的过程，一个好的团队很重要 ###

找工作真的是双向选择的过程，不仅仅是公司选择你，也是你选择公司的过程，有能力的话最好找一个好的团队，做的业务是自己喜欢的，最起码不能太反感不是。

其实从面试官你基本也可以判断出该团队的水平，个人的一点看法是，如果你本身还处于成长阶段，如果面试时候问的问题你都可以顺利的回答出，那么该工作你就要慎重考虑下，可能成长空间会小一点。

### 减少跳槽的频率 ###

关于跳槽频率，这个不管是技术 leader 和 hr 都是考虑的一个问题。

因为前几年，个人感觉涨薪的最便捷途径就是跳槽，涨薪幅度会比较高，在一家公司等加薪比较慢。

但是如果你跳槽过于频繁其实是不利的，个人认为，一年跳槽一次这个频率就有些高了。

京东也是将这点明确有要求的，一票否决制度，五二原则（五年内之内最多在两家公司）

### 关于学历 ###

现在很多公司的门槛都是本科相关专业毕业，并且以后的要求肯定会越来越高。

每个公司要求不一样。

### 面试前一定要多刷题 ###

一定要多刷题，刷题，刷题，重要的事情说三遍。多注重底层原理和概念的学习，了解更多的底层知识，更多的原理知识，都是提高你解决问题的能力。

做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。

学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。

#### 我平时一直有整理面试题的习惯，有随时跳出舒适圈的准备，不知不觉整理了229页了，在这里分享给大家，有需要的[点击这里免费领取题目+解析PDF][PDF] ####

![ac0b1c2376da47d727e0dc8a77e76478.png][]

![b871b45fb2e6d5442144c863cbcff965.png][]

![f5c18f4b2878302f1f53a8c393e7eb0d.png][]

### 如果你需要这份完整版的面试题+解析，[**【点击我】**][Link 1]就可以了。 ###

[6b86d0891a465ba6b851eabd45ad804d.png]: /images/20221120/5129c601d35849ad8fee1e67af06fda0.png
[6b86d0891a465ba6b851eabd45ad804d.png 1]: https://camo.githubusercontent.com/769a82ef5e227d054595b1517ba7c9bb6a96d8dfea5ecf6c5e7f31c4fcde22ec/687474703a2f2f696d672e736d79687661652e636f6d2f32303138303330345f323133322e706e67
[34e452c8c819159a541815a536573781.png]: /images/20221120/62f19b95b59a4c98b191ff07307a913f.png
[PDF]: https://links.jianshu.com/go?to=https%3A%2F%2Fjq.qq.com%2F%3F_wv%3D1027%26k%3DhCLQP3CQ
[ac0b1c2376da47d727e0dc8a77e76478.png]: /images/20221120/edace38df9e44102a624b78fbd917965.png
[b871b45fb2e6d5442144c863cbcff965.png]: /images/20221120/038602520f204e0ca8d8b2d8fa8661d8.png
[f5c18f4b2878302f1f53a8c393e7eb0d.png]: /images/20221120/a8c8cb3c2f504d669085c0fc12b6030a.png
[Link 1]: https://links.jianshu.com/go?to=https%3A%2F%2Fjq.qq.com%2F%3F_wv%3D1027%26k%3DCNNxKtKV