如何经过前端面试

本教程的目的是教你如何经过(个人)前端面试

本文涵盖了本人平常面试中常常问到的知识点, 面试对象为2~10年工做经验的前端工程师, 我始终认为: 一个合格的前端工程师, 首先应该是一个合格的工程师, 故涉及到的内容不止于前端范畴, 甚至能够说是全栈范畴了, 但愿能够给想得到提升的前端工程师一些帮助

本文的重点是列出值得思考的点, 而不是单纯的罗列面试题目, 题目不会直接给出明确的答案, 部分题目自己就是开放性问题, 没有固定答案, 但愿你们能够带着思辨性思惟去阅读

从上到下是一个大概的优先级顺序, 越靠前的知识点, 面试评价占比越高

1. js基础

js基础问题通常是在整个面试过程当中穿插提问, 我我的并不会单独集中提问这里涉及到的问题, 一来这些问题能够在面试沟通的字里行间逐渐感觉到候选人的水平, 二来这些问题过于基础, 默认来面试的人都应该已经会了, 重点提问会让对方感受不被尊重(就像问一个数学系博士一元二次方程解法同样滑稽), 但这并非说这些知识不那么重要

引用传递

引用传递是js基础中最重要的几个问题之一(若是这种问题不了解那这场面试基本就聊不下去了), 不熟悉引用传递这一特性的开发者会在代码中埋下天坑, 这类隐藏bug极可能在测试阶段蒙混过关, 最终在线上爆发

常规问题是:

• 什么是引用传递
• 什么又是传递引用
• 什么类型有这种行为
• 什么是包装类型
• 怎么从内存的角度解释引用问题
• 什么是深拷贝和浅拷贝
• 如何实现深拷贝
• webworker之间传递数据是引用传递吗

事件循环

事件循环不管在浏览器端仍是node场景, 都是最基础的问题之一, 这一问题我会重点提问, 对事件循环不理解的开发者可能会写出难以捉摸的bug, 或者滥用事件循环机制带来性能损耗, 我遇到过一个候选人, 他遇到个棘手的问题最终包一层setTimeout 0 就解决了, 可是他本身也不明白为何(这就很恐怖), 对于这一知识点, 合格的前端开发须要彻底明白事件循环的原理, 运做流程, 接触过node开发的还应当知道node与浏览器中事件循环的差别, 对于高级一些的开发者, 则但愿其对事件循环的设计作出一些评价, 例如: 为何要区分microtask和macrotask, 这样设计的目的是什么?

常规问题是:

• 简述浏览器/node的事件循环机制
• 什么是 microtask 和 macrotask
• 浏览器环境下, 渲染dom会插在事件循环的哪个阶段进行
• setImmediate 和 setTimeout 的区别
• Node.js 中 process.nextTick 的运行时机

做用域

做用域是写任何代码都须要考虑清楚的问题, 对做用域不熟悉的人, 每每会使用错误的方式写出运行结果看似正确的代码, 实际上潜藏的很大的隐患, 可能本身写的模块没问题, 但实际上由于做用域的关系影响到了其余的模块却不自知, 做用域的考察不会专门出题(由于不必并且题目很差设计), 但会夹在其余题目内顺带考察

常规问题是:

• 什么是变量提高
• 什么是暂时性死区
• 什么场景要使用闭包
• let 与 var 的区别
• try catch的做用域
• 什么是词法做用域

基本语法

语法没什么可说的, 须要面试者熟练掌握es6+的新语法特性, 了解新的数据类型(Map, Set, Symbol, WeakMap, WeakSet 等). Promise, Async/Await, 解构赋值, 扩展运算符, 箭头函数这些极其经常使用的语法须要特别熟练, Generator, Reflect, Proxy, Class, Decorator等语法也要求会用.

常规问题是:

• == 和 === 的区别
• 如何实现一个Promise
• Promise/Async/Await中的错误处理
• Class中的super方法的做用
• 箭头函数中的this
• const定义的对象中的值能够修改吗
• rest运算符的使用场景
• Set和数组的性能差别
• WeakMap/WeakSet分别是什么
• 如何编写一个Decorator
• 如何实现一个相似Proxy的功能
• 什么是Iterator
• 了解哪些TC39提案中的语法

代码调试

开发者天天都在制造bug, 调试能力是影响开发者工做效率的重要因素, 我面试时会对调试能力有硬性要求, 不会使用调试工具的, 凭意念猜想碰运气调试的选手必定会被挂掉, 正常开发者应当熟练使用chrome dev tool, 而且有严谨的逻辑思惟, 知道经过二分法, 控制变量法等方式快速定位问题

常规问题是:

• 简述js中常见的错误类型
• 错误堆栈的查看方式
• 全局错误处理
• 如何使用断点调试定位问题
• 如何排查内存泄漏问题
• 页面白屏时间过长, 如何定位问题
• 如何判定一个问题是前端问题仍是后端问题
• 描述以前遇到过一个最棘手的bug, 如何解决的

2. 前端框架

当前时间点, 前端框架通常是指 vue/react/angular, 公司的技术栈总体偏向vue, 我面试的时候会稍微偏向提问vue的问题, 固然我本人是保持技术中立的, 面试者若是只会react or angular, 也会对应换成react/angular的问题, 框架相关的面试问题倾向于底层原理, 框架实现的角度(毕竟用谁都会用)

框架使用

这一部分的问题一般是针对经验较少的面试者, 校招, 外包面试或较初级的岗位面试会常常提到, 正常状况下只涉及到vue和react, 国内开发者使用angular的不多, 面试遇到的很少, 这部分问题主要是考察面试者是否可以熟练使用框架开发前端应用, 是否能避免一些显而易见的坑

常规问题是:

• vue中计算属性的做用
• vue中$set的做用
• vue中created与mounted的差别
• vue如何实现自定义指令
• vue如何实现一个下拉菜单组件
• 什么是keep-alive组件
• vuex使用方法
• 如何实现模块按需加载
• 前端路由的常规用法
• react setState何时是同步, 何时是异步
• react shouldComponentUpdate的用法
• react hoc使用场景
• redux与vuex的区别
• 循环渲染中的key有什么做用
• 数据中没有惟一值字段怎么指定key
• 如何作性能优化
• prefetch preload

框架原理

正常的前端开发人员, 只会使用框架确定是不行的, 若是对框架的原理不了解, 会在不经意间踩到隐藏的坑, 熟悉框架原理也能帮助你更好的优化前端应用, 也能够提高一我的的架构设计思惟能力, 前端面试中我会重点考察这一部分的能力, 这里面也会涉及较多开放性问题, 与面试中探讨交流之中我有时能够学到知识, 也能够很快判定一我的的综合能力

常规问题是:

• vue/react/angular横向对比, 优缺点
• vue双向绑定实现原理
• vue依赖收集原理
• vue中的数组是怎么实现响应式的
• 虚拟dom与diff算法解决了什么问题
• vue/react中diff算法的原理, 有什么区别
• vue nextTick方法是怎么实现的
• vue template是怎么编译的
• vue style scope是怎么实现的
• vue插件机制原理, Vue.use方法的意义
• vue eventbus传数据是同步仍是异步
• vuex中mutation为何不推荐处理异步逻辑
• 前端路由是怎么实现控制页面切换的
• 当前的diff算法还有什么优化空间
• 为何react不须要依赖收集
• react fiber原理
• react任务时间分片机制
• react中的错误边界
• 什么是数据不可变
• redux的工做原理
• mobx如何实现响应式
• 如何实现一个组件库, 全量引入和按需引入分别怎么实现
• angular的依赖注入原理
• rxjs是怎么把事件处理成流的
• Promise与Observable的区别
• vue/react/angular当前还存在哪些缺陷, 如何改进

3. 网络通讯

前端开发天天都会和网络通讯技术打交道, 这部分知识点包括各类网络协议, 浏览器中的一些特殊机制, 好比跨域等, 这些也是很基础的知识点, 任何开发者都必须熟练掌握

网络协议

关于网络协议能够考察的知识点很是多, 一般非计算机专业出身的前端对网络协议这块知识不了解, 推荐阅读 Unix网络编程 这本书来补充知识点. 主要考察内容是http/https, 也会考察一些tcp/udp的知识, 尤为是面试者作过nodejs开发的时候

常规问题是:

• 描述http通讯过程
• http 302是什么状况下发生的
• tcp与udp的区别
• 什么是tcp粘包
• https是怎么保证通讯数据安全的
• 签发ssl证书的机构起到什么做用
• http2有什么新特性
• 什么是多路复用, http1.1能够实现多路复用吗
• cookie 和 session 有什么区别
• websocket如何使用
• 什么是rpc

跨域问题

跨域自己应当属于网络协议的内容, 但前端开发会很频繁遇到这个问题, 因此单独拉出一节来说, 这也是很重要的基础知识之一, 任何开发者都必须熟悉跨域的出现场景, 如何解决跨域等

常规问题是:

• 什么是同源策略
• 常规的跨域解决方案
• 什么是cors
• 什么是简单请求/非简单请求
• 什么是options请求
• 服务端如何响应options请求
• 跨域如何发送cookie
• jsonp的原理
• 如何经过代理避免跨域

DNS

dns问题在前端面试中不常见, 一般面试者作过服务端开发, 或是面试node职位会重点考察, 对于高级的前端开发人员, 也须要了解其中的一些原理, 来辅助排查或规避问题, 或是找到一些问题的解决方案或优化方案

常规问题是:

• dns寻址过程
• 什么是hosts
• dns变动生效时间
• 什么是dns prefetch

网络安全

网络安全是个大问题, 很容易产生严重的事故, 但大多数前端人员对此缺少了解, 一个合格的前端工程师, 应当了解常见的网络安全漏洞, 了解常规攻击手段和对应手段, 可以敏锐的察觉代码中的安全问题

常规问题是:

• 如何发起csrf攻击, 如何防范
• 什么是dns劫持
• 什么是http劫持
• 如何保证cookie的安全性
• 如何设计安全的鉴权机制
• 什么是jwt
• 什么是OAuth 2.0, 工做流程是怎样的
• 什么是内容安全策略(CSP)

4. 工程化

工程化能力是现代前端开发很重要的能力之一, 高级前端开发须要有本身搭建前端工程脚手架的能力, 这其中包括了 webpack, babel, eslint, npm等不少相关工具, 这些工具要求熟练使用, 同时懂原理会有很大加分

webpack

webpack周边生态很复杂, 插件繁多, webpack自己功能也多, 想了解原理并不容易, 通常只考察经常使用的功能的使用, 部分功能最好懂得原理

常规问题是:

• webpack起到什么做用
• loader和plugin的区别
• loader的执行顺序
• 什么状况下loader能够并行执行
• 如何编写一个loader or plugin
• webpack分包加载
• require和import的模块的差别
• manifest.json是什么, webpack如何生成manifest.json
• code splitting 如何实现
• 什么是 tree shaking
• hmr运行机制
• 什么是dev server

babel

babel一般搭配webpack使用, 通常做为webpack loader为前端项目服务, 一般考察常规用法与其中的工做原理

常规问题是:

• babel如何实现es6 -> es5的转译
• babel preset是什么
• 什么是stage 0, stage 2
• 什么是babel polyfill
• 为何须要polyfill
• babel是如何处理vue template / react jsx 的

eslint

eslint能够考察的内容不多, 通常是搭建工程脚手架使用到, 考察方向偏应用, 不考察原理

常规问题是:

• 为何要使用eslint
• 如何强制约束开发者使用同一套eslint规则
• eslint如何检查非js代码(例如vue template jsx pug)

npm

npm和前端工做息息相关, 通常是两种用法, 一个是使用依赖包, 一个是开发依赖包, 对于高级的前端开发人员, 我但愿他能够理解npm工做原理, 可以本身搭建私有npm仓库, 并基于此制定一系列包的使用规范, 了解npm常见问题, 对于依赖包的管理有必定看法

常规问题是:

• npm下载的包放在哪里, 若是是依赖的依赖包会放在哪里
• package-lock文件的做用
• 全局安装的包放在哪里, 如何查找
• npm cache机制
• 什么是npm link
• 什么是npx
• 如何开发npm包并上传
• 如何搭建私有npm
• 如何管理包的下载
• 如何检查依赖是否存在漏洞
• 如何处理循环依赖
• 什么是peerDependencies

docker

docker是如今最流行的容器引擎, 不管是前端仍是后端开发, 都应该对此有必定了解和使用经验, 一个积极主动的前端工程师应当主动探索这些流行的技术可以给前端开发带来什么帮助, 目前主要应用于node服务, 部署开源工具, 持续集成等方面

常规问题是:

• docker容器之间如何通讯
• 什么是docker-compose
• 如何清理无用镜像
• 什么是k8s
• 如何使用docker打包node服务

Linux

开发工具时会常常与Linux打交道, 开发node服务也会每天登陆服务器处理问题, Linux基础是前端工程师必备的能力, 面试中不会重点考察, 但会穿插在其余问题中间接提问, 若是对Linux基本操做不熟悉, 可能会致使前端项目编译时出现问题不知道如何解决, 甚至一些基本的软件安装, 环境配置都搞不定, 更差的状况还会误删文件, 搞坏服务器等

常规问题是:

• 什么是环境变量
• Linux中的文件系统
• 如何检查Linux服务器的负载状况
• 如何查找服务器上的大文件
• 磁盘是怎么挂载的
• 什么是TTY
• 简述Linux的帐户系统
• 开发命令行工具如何读取命令行参数
• shell脚本中如何处理字符串, 好比解析json
• ssh key验证机制

构建发布

这里主要考察自动化构建发布相关知识, 指望开发者能够了解自动化运维的工做流程, 或者能够自行搭建总体的持续集成, 持续交付体系, 但并不要求全部人都会这些, 简历提到必问

常规问题是:

• 什么是gitlab CI/CD
• 什么是jenkins
• 如何实现自动部署脚本
• 如何实现发布回滚机制
• 如何设计持续集成流程
• 如何保证编译服务器每次编译环境都一致
• 怎样利用缓存加快编译速度

5. 前端相关语言

这部分主要是前端常规的一些预处理器(sass/less) 或者一些js扩展语言 (ts/cs),一般开发者都应该掌握其中几种或所有, 来提高本身的开发效率, 同时也是考察面试者的技术广度和主动学习能力

TS

ts是当前时间点(2019年底), 全部前端程序员都须要会的技能, 若是你尚未开始学习ts, 那你已经落后于时代不少了, 一般我都会询问面试者是否会用ts, 若是是熟悉ts的开发, 我会把ts的熟练程度当作一个重点的加分项

常规问题是:

• 什么是d.ts, 如何生成它
• interface和type的区别
• 枚举的使用方法
• 何时使用类型断言
• 什么是双重断言
• 什么是Freshness
• readonly的使用场景
• 如何使用泛型
• 协变与逆变的区别
• 什么是双向协变
• 解释类型守卫机制

Scss/Less

css预处理方言不少, 这里通常选最多见的两种考察, 一般状况下会应用便可, 了解底层原理也会有必定加分

常规问题是:

• Scss/Less的区别
• mixin的使用场景
• 使用变量的好处

6. 计算机基础

其实这部分重要性本应该很高的, 排到这里主要是由于前端开发广泛对这块不重视, 不了解, 若是要求太高就会招不到人了, 很无奈只能将它的优先级定在这里. 但对于想要得到自我提高, 有很高追求的前端工程师, 这些也是必须很是很是熟练掌握的技能

数据结构

数据结构这个话题显得有些学院派, 和前端重视应用的场景格格不入, 实际上若是能够很是熟悉数据结构的知识, 能够帮助你写出性能更优的前端应用, 同时也是提高一我的编程思惟的重要途径, 我面试中通常会考察这些知识, 并做为很大的加分项

常规问题是:

• 什么是链表, 双向链表
• js中的堆和栈分别存储哪些数据
• 如何实现一个先入先出队列
• 散列表是怎样的数据结构, 如何实现
• js中的数组底层是用什么数据结构实现的
• js中字符串在底层是如何实现的

算法

算法也是很重要但不少人不会的技能, 目前前端面试考察算法的公司也愈来愈多了, 我面试时也会适当考察几个简单算法题目, 重点是看面试者的思惟能力, 分析和解决问题的能力

常规问题是:

• 排序算法
• 求一组数中的质数
• 推算时间复杂度
• 最小空间复杂度翻转数组
• 合并链表
• 前序遍历, 中序遍历, 后序遍历
• 翻转二叉树
• 求树的深度
• 编辑距离
• 动态规划

编译原理

面试问的很少, 通常是面试者提起或简历有提到才会问, 掌握编译原理的开发者能够经过更多的视角去看待编程问题, 思惟也更加缜密理性, 这种面试者会大大加分

常规问题是:

• 词法分析和语法分析
• 如何设计文法
• 解释什么是二义性文法
• 如何实现自编译
• 编译时如何作尾递归优化
• source map的原理
• js在编译的角度看还存在哪些缺陷

7. 服务端开发

任何一个合格的前端工程师, 他都不该当只是个前端, 掌握必定的服务端开发技能是一个工程师必须作到的, 常规状况下你们学node比较多, 也有一部分前端工程师掌握至少一门服务端开发语言, 一般状况下, 简历提到服务端相关的知识, 我都会详细询问, 这在必定程度上能够体现一个前端面试者的技术广度, 和学习的主动性, 同时了解服务端开发也能够在工做中更顺畅的与其余服务端开发合做, 或者承担一些前端组内工具服务的开发工做

node相关

任何前端工程师至少都应该掌握一些node技能, 不管是使用webpack dev server仍是本身开发我的网站, 开发工具, 都有很多的应用场景, 这里有一个误区须要说明, 会写js跑在node上面, 不表明会node开发

常规问题是:

• node中的模块加载机制
• stream模块的功能
• 如何实现node热更新
• 什么是子进程, 什么场景应该使用子进程, 什么是孤儿进程
• 父子进程通讯
• 如何实现守护进程
• pm2的工做原理

微服务

目前各大公司服务端都是微服务的架构, 对微服务有必定了解能够更好的与他人合做, 知识面足够的状况下还可以帮助其余服务端开发优化总体架构设计

常规问题是:

• 如何设计服务发现机制
• 什么是领域驱动设计
• 如何实现负载均衡
• 什么是幂等
• 常见的分布式框架

数据库

优秀的前端工程师应该对目前流行的pg mysql mongodb等数据库有必定的了解和实践, 一来能够学习另一个角度的编程思想, 二来能够理解服务端为何会和你说"这样格式的数据很差存/很差改", 从而你能够站在更高的角度看待问题, 同时前端团队内部工具的开发每每也会用到这些

常规问题是:

• 如何设计表结构
• mysql有哪些存储引擎, 差别是什么
• 何时使用外键
• 索引的工做原理
• 多点部署的服务如何保证数据一致性
• M/S工做原理
• 如何设计缓存
• 如何防止缓存雪崩

最后

若是上述问题满分算一百分，你以为本身怎么也有个七八十分，那哈啰出行-基础架构部门-前端研发团队欢迎你，base上海，咱们在招 资深前端工程师/前端技术专家，邮箱porcelainheart@qq.com投递简历