沐光

记录在前端之路的点点滴滴

2020 年大厂面试总结

前言

这次面试因为有比较明确的目标,想去 阿里、美团、快手、头条 等大公司提升提升自己,因此在准备了一番后,依次面了对应的公司。此处主要是总结一下当时面试遇到的一些问题,看看对于 2 年前端经验的人面试官们到底需要怎样的能力,以及部分问题的解体的思路。

注:面试一定得表现的自然,轻松自然、说话流畅自信会更容易通过面试!

CSS 部分

在我面试时,遇到的 CSS 相关问题很少,大概掌握两个问题即可。

更多 CSS 相关面试题可查阅: CSS 知识点整理

1. 水平居中布局

这个算是经典中的经典题了,之前我也总结过一篇 水平垂直居中 的文章,网上同样也有很多相关的题目,这里就不赘述了。

当然,这个问题问出来只能算是一个引子,于此引出的问题还包括:

  • flex 相关知识
  • translate 字体模糊问题

相关文章:

2. BFC 问题

该部分也是老生长谈的内容,可参考我之前总结的文章 浅谈 BFC,这里也不做赘述了。

面试出 CSS 的问题可以说基本上就这么俩,不会有过多其余的细节考察(除非校招生),重点还是在 JavaScript、算法和项目经验上。

JavaScript 部分

JS 部分面试也基本和网上的面经差异不大,除非像头条、阿里部分会考察一些偏原理性的问题外,其余的基本是 ES6 外加一两道 JS 题,大致有如下内容:

1. ES6~11 新特性

该部分的问题基本上和 ES6 入门教程 没太多出入,把网上那部分知识啃完,然后项目中多撸撸基本上没问题,比较重点的是这么几个:

  • 从 let、const 问到 闭包函数,最后到 作用域 相关内容
  • 原型链 与 Class
  • Promise 与 代码执行顺序
  • ES Module 与 CommonJs 差异
  • 箭头函数 与 this 相关问题

像 Proxy、解构、Set、Map、对象数组等的扩展 问题之类的,问的频率很小,我是没有被问到过。

相关文章:

2. bind 和 apply/call 的区别,实现一个 bind

根本区别是 bind 返回一个函数,绑定时不执行,调用时执行;后者直接执行。

参考面试题题解

3. 实现一个任务调度函数

这部分考察对 Promise 的理解,只要知道“当异步函数处理完获得了返回的结果后,再调用下一个任务”这个逻辑后,题目就很好解开了。

参考面试题题解

4. 实现一个 JSONP

这个问题我当时没写出来,但是和面试官说明了思路(刷题刷漏了)。JSONP 的思路是 script 脚本不受跨域限制,因此后端将返回内容通过 JSON 拼接到 script 链接函数内后,前端拿到 script 脚本就会触发全局函数执行(提请注册的一个 callback 函数)。

参考面试题题解

5. 实现 excel 的字符串坐标转数组

这个面试题是我觉得最简单的一个,主要是考察简单的正则以及进制转换。只要知道“10 进制转 N 进制”以及“N 进制转 10 进制”的逻辑,该题不难解。

参考面试题题解

大致都是一些不是特别难的手写代码的题目,更多手写代码的题目可参考 手写代码系列

6. 为什么提前调用 let 声明的变量会报错

这个得回答到 let 会创建一个局部块,因为从 ES6 之后就有了块级作用域了,作用域外的变量无法调用到作用域内的变量,因此在 JS 第一次解析代码的时候,这东西不会弄到全局环境中,在它之前调用时,通过 RHS 查询就无法查到,于是就报错了。

可参阅 let 和 var 的区别

Node

这部分我也遇到过一些,解释过只会很浅的使用,然后面到的问题主要为一下两个。Node 深挖也会挖出很多内容,比如:V8 和 Chrome 浏览器内核的 V8 有什么区别,事件循环的区别等等,最好准备准备。

1. 解释一下,什么是 Event Loop

其实这个只要答道 “异步非阻塞模式” 以及解释一下 宏任务、微任务、同步任务 的个人理解基本上能过,当然越标准越好,因为这个学习 Node 的最基本的知识。

可参阅

2. npm 的理解

该部分主要还是对 node_modules 的一些变化和问题进行考察,以及 lock 文件的理解,解释清除这个就没什么问题了。

3. npm 发布时版本号的问题

emmm,这部分解释一下项目不同程度的修改该怎么升级版本号即可,举个例子:

项目从 v1.0.0 升级版本

  • 改了个组件的小 bug: v1.0.1
  • 更新了一个组件的函数,新增了一些组件: v1.1.0
  • 组件库从支持 Vue 变为支持 React 了: v2.0.0

算法题

因为前端对算法不是很严,除了头条有些神经质以外,其余的只需要稍微刷刷 leetcode 上的简单算法题(主要刷刷 二叉树 的题),基本上没问题。

算法题的重点基本上在二叉树上,因为可以用数组来模拟,然后就是堆和动态规划。

推荐刷题思路为:

  • 基础排序算法
  • 数组相关算法
  • 二叉树的算法题
  • 堆和动态规划

一般刷简单的就行了。

leetcode 传送门

HTTP

HTTP 方便主要还是考察状态码、缓存和浏览器的渲染流程,稍微深一点的就是如为什么 TCP 慢、DNS 解析相关、首部压缩算法 等。

浏览器渲染(从输入url到页面渲染的完成过程)

这个题其实问的挺多的,简单描述一下整体流程:

  1. DNS 解析域名得到 IP;(浏览器缓存 -> 本地缓存 -> DNS服务器 -> 根服务器)
  2. 拿到服务器地址,与服务器建立连接,3 次握手;
  3. 获取并解析 html 文件,开始构建 CSSTree 和 DomTree;
  4. 合成 RenderTree 并在页面布局;
  5. 页面绘制;
  6. 离开页面,4 次挥手

这里面也会细扣一些内容,比如DNS 怎么解析的3 次握手 和 4 次挥手分别做了什么

304 与缓存

该部分网上查阅资料即可。

参阅 https://juejin.im/post/6844903512946507790

HTTP、HTTPS、HTTP2、HTTP3 和 WebSocket

这些知识基本上是一套走的,多查阅文章即可。因为我掌握的也不是很多,仅是浅浅谈了一些内容以及部分实现,这些网上基本都能找到,想和面试官谈笑风生的话最好还是研究研究。

我遇到的问题包括:

  • HTTP 和 HTTPS 有什么不同
  • HTTP2 有哪些新特性,与 HTTP1.1 相比有什么优势
  • HTTP2 的加密流程能描述一下吗
  • HTTP3 你有了解吗,与 HTTP2 相比有什么优势
  • 卡尼项目中有用到 Websocket,你能说说它有什么好处吗

参阅

Nginx

  • 正向代理和反向代理
  • 负载均衡和实现方式,优缺点
  • gzip 首部压缩

Webpack

这部分内容在前端面试时也是加分项,开发点基础插件,了解下 Webpack 编译后的内容和源码相关的内容,开发点简单的包,基础扎实巩固。

更多 Webpack
问题可参阅:关于webpack的面试题

1. webpack 主要是用来解决什么问题的

核心思路:

  • JS 的模块化开发
  • 打包构建为一个整体

其实抓住“模块化”来回答即可,可以简单说一下 webpack 的由来原因,但主要还是因为 JS 的模块化开发方式。

2. plugins 和 loader 的区别

  • Loader: 主要用于使 Webpack 将非 JS 文件转化为 JS 文件
  • Plugins: 主要用于解决 Loader 无法解决的事,用于辅助,如:压缩、打包 等

3. Webpack 的 Loader 和 Plugins 的开发思想

这部分我没回答上来,没开发过,可参考一下对应文章。

4. 了解过 Webpack 原理吗,能简单介绍一下吗

同样没回答上来。

5. 做过哪些 Webpack 的性能优化

因为了解过 Vue Plugins 部分的编写,也做过一点点 DllPlugins 的编写,将这些给面试官说了

  • DllPlugins 预打包
  • 部分 ES6 模块的 TreeShaking
  • 分析包体积,然后部分插件按需引用

6. 有做过包的开发吗,能描述一下开发思路

介绍了一下当初写 npm 包时的一些思想:

  • Library 打包和按需打包
  • 类似 Element-ui 的项目结构的划分
  • 文档的一些设计和建设思路
  • 组件的一些编写思路

TypeScript

这部分也是加分项,以前有过 Java 基础这部分应该问题不大,熟读官网,学习下装饰器的编写,一般也没什么太难的内容。

更多内容可以参阅 Typescript 面试问题

1. interface 和 type 有什么区别,它们能互相继承吗

  • interface 不能声明基本类型,type 可以;
  • type 无法 extends,但能通过交叉继承(&)来实现继承;
  • interface 能够合并声明;

interface 能 extends type,type 也能交叉继承(&) interface,它们也能自己继承自己。

可参阅: interface VS type

2. namespace 和 module 区别

简单来说,namespace 相当于包名,module 相当于文件,官方不推荐用 module 了。主要解决多文件命名冲突问题,目前我在项目内仅 vuex 部分使用,一处声明,多处使用。

3. TypeScript 优缺点

这部分仁者见仁,智者见智,我总结的一些:

  • 前期开发时间成本大,后期维护方便
  • 合作开发方便,规范性强
  • 组件潜在问题前期容易暴露出来,隐藏错误少
  • 装饰器开发模式很便捷

这里不会装饰器的尽量不要谈这方面的内容,但这部分算是 TS 的重点部分,建议补补。

框架相关

框架因为我这边是学习 Vue 相关的内容,了解部分源码的知识,这部分深挖一点准没错,基本问题网上能找到,这里就列举一些:

  • Vue 的 数组 是怎么监听变化的?(原生方法重写)
  • 简单的 Observer 函数能实现一个吗?(Object.defineProperty)
  • 如果不用 Vue 组件能实现 EventBus 吗?(可以,观察者模式)
  • Vue 组件通讯的方式?($emit、prop、provider、eventbus、vuex 等)
  • watch 和 computed 区别?(是否偏计算属性,是否缓存值)
  • Vue 生命周期是什么?(官网图有)
  • Vue3 有哪些新特性?(proxy、函数式风格等)
  • Diff 算法?(动态规划找节点树、patch 补丁判断是否更新节点、更新)

项目相关

其实面试题在整个面试环节中仅仅在一面碰的较多,二面会稍微提到一部分(一般是算法),后面基本上都是问项目相关的内容了。这部分不太好描述,大概的一些问题如下:

  • 简单解释一下你的项目?(描述需要精简、流畅、项目间是否有关联、项目开发的目的)
  • 项目中遇到最难的问题,你是怎么解决的?(有把握的,最好是可以体现自身在解决问题时能凸显价值的)
  • 你对 xxx 项目的理解,怎么设计的?(最好近期开发的项目拿来说,比较熟,需要熟知整体流畅)
  • 开发哪个项目时是你感觉收获最大的,为什么?(能凸显个人能力的项目)
  • 你为什么要换工作?(自己思考清除原因,一定得清晰)
  • 你有什么个人的职业规划吗?(自己之后的发展思路,提前想明白)
  • 你觉得你的优势是什么?(很关键,千万不要说什么有潜力之类的话,基本差评,得凸显自己的价值:能独立开发项目、能带团队、善于沟通等等)

当然面试时结结巴巴的就不要说自己善于沟通了……