2020年中大厂前端面试总结

前言

本次面试面试了很多家公司，包括 360，美团，猿辅导，小米，腾讯地图，头条，新东方，快手，知乎等几家公司，刚开始去面试的时候那段时间状态不是很好（基本每天都加班到很晚，周六日也没有休息的那种，而且当时心态真的是差到爆，很多平时自己很会的东西，被问到居然答不上来），基本一面就挂的那种（360，美团，猿辅导），越面越失望，后来就直接不面试了，调整自己的状态，请假休息，好好睡了两天两夜之后，调整自己的心态，开始准备面试，接下来的面试就顺利的很多。

本篇面试题总结并没有按照公司那样分类而是按照知识点进行简单分类，很多面试题问的频率非常高，所以面试的时候如果第一次问完，没回答上来或者回答的不太好，一定要在面完的第一时间记录下来并且查找资料，否则就忘记了，或者之后再看就没有了当时迫切想知道具体答案的那种心情了（有迫切的想知道某些知识的心情的时候目标很明确，学东西也会印象深刻记得牢）。

下面给出的答案有的是自己总结的，有的是从网上找到写的很不错的相关文章，但是这些都仅供参考，不一定是最佳的答案，如果有很好的答案，欢迎留言一起讨论互相学习，有的还没有放上合适的链接，之后会不算补充进去，毕竟每道题涉及到的内容真的挺多的。

下面题目中标记有 【高频】 的至少被问过两次，标记有 【超高频】 的基本面试的每家公司都问到了。

笔试题

1. 【超高频】 写一个深拷贝，考虑 正则，Date这种类型的数据
2. 【高频】 Vue自定义指令懒加载

• https://mp.weixin.qq.com/s/36oBZMd-m-2k5EKPghfG3A

3. 判断DOM标签的合法性，标签的闭合，span里面不能有div，写一个匹配DOM标签的正则

• https://mp.weixin.qq.com/s/MtHUsWtGQ8k8mxl9oR8_xA

4. 替换日期格式，xxxx-yy-zz 替换成 xxx-zz-yy
   可以使用 正则的捕获组来实现

var reg = /(\d{2})\.(\d{2})\/(\d{4})/
var data = '10.24/2017'
data = data.replace(reg, '$3-$1-$2')
console.log(data)//2017-10-24

5. 【高频】 实现Promise.all, Promise.allSettled

6. 获取一段DOM节点中标签个数最多的标签

• https://mp.weixin.qq.com/s/MtHUsWtGQ8k8mxl9oR8_xA

7. 写一个简单的diff

• https://mp.weixin.qq.com/s/w2b9Wn7QWXhy2qf2JX3Kbw

8. 【高频】 手写节流

• https://mp.weixin.qq.com/s/fNrn94emmLMfuKN_Ukpi6A

9. 手写ES6的继承

10. 实现一个自定义hook - usePrevious

可以参考 usePrevious 这个的实现

import { useRef } from 'react';

export type compareFunction<T> = (prev: T | undefined, next: T) => boolean;

export default <T>(state: T, compare?: compareFunction<T>): T | undefined => {
  const prevRef = useRef<T>();
  const curRef = useRef<T>();

  const needUpdate = typeof compare === 'function' ? compare(curRef.current, state) : true;
  if (needUpdate) {
    prevRef.current = curRef.current;
    curRef.current = state;
  }

  return prevRef.current;
};

更多自定义hook的写法可以参考 hooks

11. 【超高频】 实现一个vue的双向绑定

• 简单通俗的理解Vue3.0中的Proxy

其他题目的答案之前做了整理，可以在 前端学习总结-手写代码系列中看到

笔试题中的算法题

1. 二叉树的最大深度

• 原题地址

2. 另一个树的子树

• 原题地址

3. 相同的树

• 原题地址

4. 翻转二叉树

• 原题地址

5. 【高频】 斐波那契数列

• 原题地址
• 相关题解

6. 【高频】 合并两个有序数组

• 原题地址

7. 【高频】 打乱数组

• 原题地址
• 相关题解

8. 数组区间

webpack 和babel相关的问题

1. babel的缓存是怎么实现的
2. 【超高频】 webapck的HMR，怎么配置：

• 浏览器是如何更新的
• 如何做到页面不刷新也就就自动更新的
• webpack-dev-server webapck-dev-middleware

相关文章：Webpack Hot Module Replacement 的原理解析

3. 自己有没有写过ast, webpack通过什么把公共的部分抽出来的，属性配置是什么

4. webpack怎么配置mock转发代理，mock的服务，怎么拦截转换的

5. webapck的plugin和loader的编写， webapck plugin和loader的顺序

6. webpack的打包构建优化，体积和速度

7. DLLPlugin原理，为什么不直接使用压缩版本的js

HTTP

1. 【超高频】 缓存（强缓存），如何设置缓存

• 图解 HTTP 缓存
• 深入浅出浏览器缓存机制

2. 【高频】 HTTP2， HTTP2的性能优化方面，真的优化很多么?

3. 【高频】 简单请求和复杂请求

• 阮一峰-跨域资源共享 CORS 详解
• CORS原理及@koa/cors源码解析

4. 【高频】 HTTPS的整个详细过程

• HTTPS是如何保证安全的
• 深入理解HTTPS工作原理

5. 301和302的区别

• https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status

6. 怎么用get实现post，就是使用get方法但是参数放到request body中

7. TCP和UDP的区别

• TCP和UDP比较
• TCP和UDP的区别

更多可以查看 【面试题】HTTP知识点整理(附答案)

CSS

1. 【超高频】 flex相关的问题

   • 说一下flex
   • flex: 1具体代表什么, 有什么应用场景
   • flex-basic 是什么含义
     相关文章：Flex 布局教程：语法篇

2. css var 自定义变量的兼容性

3. 行内元素和块级元素的区别

4. position有哪些值，分别是什么含义

5. 盒模型

6. CSS的实现

   • 淘宝购物车添加商品到购物车的动画（这回试试使用CSS实现抛物线运动效果）
   • toolTip的实现 (https://www.jianshu.com/p/fdfa8058a015)

7. 【高频】 实现固定宽高比(width: height = 4: 3)的div，怎么设置

8. 【高频】 伪类和伪元素

更多可以查看【面试题】CSS知识点整理(附答案)

JavaScript

1. 单例的应用

2. 【超高频】 什么是闭包，闭包的应用场景

• 深入理解JavaScript闭包之什么是闭包
• 深入理解JavaScript闭包之闭包的使用场景

3. 如何判断 当前浏览器是否支持webp

4. 【超高频】 Vue3.0和Vue2.0 实现双向绑定的原理和区别是什么，然后提到了 proxy, 然后又接着让写出分别使用Object.defineProperty()和proxy写一个简单的双向绑定，最后问了一下 proxy除了拦截它的getter和setter外，还能做什么

5. 说说你对同步阻塞，异步非阻塞的理解

• 怎样理解阻塞非阻塞与同步异步的区别？

6. 弱引用，WeakMap和Map的区别

• ECMAScript 6 入门之Set 和 Map 数据结构

7. 【高频】 安全相关 XSS的反射型是什么，怎么避免

• web安全之XSS实例解析
• Web安全之CSRF实例解析

8. 【超高频】 事件循环

• JavaScript中的Event Loop（事件循环）机制

9. 【超高频】 promise相关的问题， 说一下你对Promise的了解

• ECMAScript 6 入门之Promise对象
• 手写一个Promose

10. 【超高频】 浏览器渲染（从输入url到页面渲染的完成过程）

11. 【超高频】 首屏加载优化， 通过哪些指标去衡量性能优化的

12. canvas和svg分别是干什么的

• SVG 与 HTML5 的 canvas 各有什么优点，哪个更有前途？

13. 牛客网如何监听你调到了其他页面
    document.hidden，监听 docuemnt.vibibleChange事件

document.addEventListener("visibilitychange", function() {
  console.log( document.hidden );
});

14. JS原生3种绑定事件

// 1. 在标签中直接绑定
<button onclick="handleClick()" >自定义函数</button>

// 2. 在js事件中获取dom事件绑定

<button id="btn" onclick="handleClick()" >dom事件绑定</button>
document.getElementById('btn').onclick=handleClick();

// 3. 事件监听addEventListener
elementDOM.addEventListener(eventName,handle,useCapture);

15. 简单说一下你对 websocket 了解多少？

• WebSocket 是什么原理？为什么可以实现持久连接？

16. 【超高频】 实现复杂数据(去重元素是对象，数组)的数组去重

17. 基本数据类型有哪些， 为什么symbol是一个函数， BigInt为什么可以用来存储大整数

18. 什么是依赖注入

19. JS类型转换

    • String([]) 为 ’‘， String({})结果是什么什么? 答案是：'[object object]'
    • 其他一些很经典的类型转换考察，当时没记那么清楚，大家可以去网上看一下

20. 富文本编辑器相关的js知识

• 富文本原理了解一下？
• 富文本编辑器初探
• 编辑器初体验

21. cli工具的一些实现逻辑

Vue

1. 【高频】 vue3.0的新特性，了解 composition-api 和react hooks的区别

• Vue3 究竟好在哪里？（和 React Hook 的详细对比）

2. new Vue做了什么

• new Vue 发生了什么

3. 【超高频】 双向绑定原理（Vue2.x和Vue3.x）

• 深入响应式原理

4. vue组件通信方法

• vue中8种组件通信方式, 值得收藏!

React

1. 【高频】 React hooks 相关的问题

• 为什么引入，什么原理
• hooks如何监听响应的，内部是如何做到只有数据修改的时候才执行函数
• 依赖的值发生变化，需要不停地监听和绑定事件
• render props 和HOC相比的优缺点
• 和mixin，hoc区别在哪儿

2. 创建ref的几种方法

3. context怎么使用，内部原理怎么做到的

4. 【超高频】 React新的生命周期，为什么 getDrivedStatefromProps是静态的

• React v16.3之后的组件生命周期函数
• React新生命周期--getDerivedStateFromProps
• What is getSnapshotBeforeUpdate() in React?

5. react中TS的声明

其实就是想了解一下对TS的使用熟练程度，现在基本项目中开发都使用了TS，所以要赶紧学习起来才行，推荐几篇我认为不错的文章：

• 你不知道的 TypeScript 泛型（万字长文，建议收藏）
• TypeScript 高级技巧

6. redux相关的问题

• redux使用方法，为什么action要返回一个函数，返回一个对象可以么
• state为什么要设计成不可变的

相关文章

• 为什么redux要返回一个新的state引发的血案
• 阮一峰-Redux 入门教程（一）：基本用法

8. 【高频】 diff算法

9. 【高频】 key的作用

• 为什么使用v-for时必须添加唯一的key?

10. immer和imutable的区别

• 怎么评价 immer.js?
• Immutable 详解及 React 中实践

11. 【高频】 react性能优化, fiber架构

• React Fiber架构
• 如何理解 React Fiber 架构？

更多可以查看 【面试题】React知识点整理(附答案)

面试结果

大概说一下本人的大概情况，本科三年左右工作经验，非计算机专业，大三下学习决定转行学习前端，过程反正挺艰辛的，一直到现在还在恶补计算机的一些知识。毕业半年左右，一个偶然的机会，进入阿里文娱（哈哈，当时面试的时候也写过面经，感兴趣的可以看一下 当时写的面经 2017面末面试总结），现在因为个人原因，决定考虑新的机会。

面试差不多最开始是中3月中旬开始准备的，中间停了差不多小一个月又开始重新面试的，到最后拿到offer差不多5月底左右，历时近3个月吧，最近抽时间把这些题目总结了一下，算是给自己一个交代吧，上面很多题目自己回答的其实很多都不是很全面，标有 【高频】 及 【超高频】 刚开始回答的不好，后来认真学习总结了一下，之后再被问到，基本都回答得差不多

一般提到面试，肯定都会想问一下面试结果，我就大概的说一下面试结果，哈哈，其实不太想说，因为挺惨的，并没有像很多大佬一样已拿字节阿里腾讯各大厂offer”，但是毕竟是自己的经历，无论结果如何都要坦然接受，之前没好好学习，那之后多学习就是。360，美团，猿辅导最开始的一面挂，小米二面的时候面试官告知说要求招5年以上工作经验的，所以就直接告知不符合（哈哈，可能就是跟小米没有缘分吧，刚毕业的时候面试，终面被拒说要3年以上工作经验的，现在够3年工作经验了，却又要求5年工作年限），腾讯地图和头条都是hr直接找过来的，自己并没有投递，就顺便面了一下，二面面完之后，以为挂了，后来过了一周多（可能是作为备胎把），又打电话过来约面试，其实之前面试大概了解了一下部门相关的情况，感觉不是自己想去的，并不是说部门不好，可能做的事情跟现在的情况太像了，所以想做出一些改变。当时家里面又有好多事情处理，也没有太多的时间，就直接拒绝了，这件事儿也给自己以后提个醒，投简历之前要先想明白自己想要什么样的，可以列一些目标，而不是因为急于找工作，猎头和hr直接打电话过来就直接面试。

心得

面试公司的选择

本次面试有几家公司（腾讯地图，头条，360教育，新东方等）全部都是猎头和hr直接打电话过来让面试的，当时就抱着试试的态度，就直接面试了，面试的过程中感觉可能都不太合适（面试的时候问了一下公司部门的具体工作内容），换工作的时候尽量找相关部门的人内推，首先内推的部门你肯定会提前有所了解，而且帮忙内推的人还可以帮忙看看进度啥的，面试过了说不定还能成为好朋友，哈哈（所以平时要多结交一些大佬，一般大佬的人脉都很广泛，而且他们很可以给你内推，甚至可以把他们自己的经验分享给你）。

总之要想好自己现在出现什么问题了，为什么打算离职，下一份工作想要什么样儿的，毕竟一份工作要干很长时间。

面试准备

推荐一些很好的文章：

• 在阿里我是如何当面试官的
• 阿里前端攻城狮们写了一份前端面试题答案，请查收
• 大厂面试中遇到的几十道 webpack 与 react 面试题
• 三年前端，面试思考（头条蚂蚁美团offer）
• 大厂面试复盘(微信/阿里/头条，均拿offer)
• 霖呆呆的近期面试128题汇总
• 一年半，三本，收到30K+的offer，你也可以
• 蚂蚁、字节、滴滴面试经历总结
• 一年半经验前端社招7家大厂&独角兽全过经历 | 掘金技术征文

好文章真的太多了，哈哈，这里就不全部放出来了，关于面试，我也准备做了一些总结，可以查看 个人博客

算法

基本每家公司多多少少都会问很多算法题，算法题对于我这种基本没什么基础的人来说，碰到了就很恐惧，但是没有其他的办法，就是两个字 “多练”，这里推荐我看过的几篇文章：

• 天生不聪明
• 写给前端的算法进阶指南，我是如何两个月零基础刷200题：
• 前端该如何准备数据结构和算法？
• 前端算法渣的救赎之路
• 我接触过的前端数据结构与算法
• 作为前端，我是如何在Leetcode 算法比赛中进入前100的？
• LeetCode 按照怎样的顺序来刷题比较好？

其他的一些想法，之前也写了一篇文章 关于面试的一点心得，感兴趣的也可以看一下。也非常欢迎大家关注我的公众号 【牧码的星星】以及加我微信进行交流。