乐趣区

关于前端:2020年中大厂前端面试总结

jiezi

前言

本次面试面试了很多家公司，包含 360，美团，猿辅导，小米，腾讯地图，头条，新东方，快手，知乎等几家公司，刚开始去面试的时候那段时间状态不是很好（根本每天都加班到很晚，周六日也没有劳动的那种，而且过后心态真的是差到爆，很多平时本人很会的货色，被问到竟然答不上来），根本一面就挂的那种（360，美团，猿辅导），越面越悲观，起初就间接不面试了，调整本人的状态，销假劳动，好好睡了两天两夜之后，调整本人的心态，开始筹备面试，接下来的面试就顺利的很多。

本篇面试题总结并没有依照公司那样分类而是依照知识点进行简略分类，很多面试题问的频率十分高，所以面试的时候如果第一次问完，没答复上来或者答复的不太好，肯定要在面完的第一工夫记录下来并且查找材料，否则就遗记了，或者之后再看就没有了过后迫切想晓得具体答案的那种情绪了（有迫切的想晓得某些常识的情绪的时候指标很明确，学货色也会印象粗浅记得牢）。

本文链接地址较多，倡议查看原文，浏览体验会好一些。上面给出的答案有的是本人总结的，有的是从网上找到写的很不错的相干文章，然而这些都仅供参考，不肯定是最佳的答案，如果有很好的答案，欢送留言一起探讨互相学习，有的还没有放上适合的链接，之后会不算补充进去，毕竟每道题波及到的内容真的挺多的。

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

口试题

  1. 【超高频】 写一个深拷贝，思考 正则，Date 这种类型的数据
  2. 【高频】 Vue 自定义指令懒加载
  • https://mp.weixin.qq.com/s/36oBZMd-m-2k5EKPghfG3A
  1. 判断 DOM 标签的合法性，标签的闭合，span 外面不能有 div，写一个匹配 DOM 标签的正则
  • https://mp.weixin.qq.com/s/MtHUsWtGQ8k8mxl9oR8_xA
  1. 替换日期格局，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
  1. 【高频】 实现 Promise.all, Promise.allSettled
  2. 获取一段 DOM 节点中标签个数最多的标签
  • https://mp.weixin.qq.com/s/MtHUsWtGQ8k8mxl9oR8_xA
  1. 写一个简略的 diff
  • https://mp.weixin.qq.com/s/w2b9Wn7QWXhy2qf2JX3Kbw
  1. 【高频】 手写节流
  • https://mp.weixin.qq.com/s/fNrn94emmLMfuKN_Ukpi6A
  1. 手写 ES6 的继承
  2. 实现一个自定义 hook – 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

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

其余题目的答案之前做了整顿，能够在 前端学习总结 - 手写代码系列中看到

口试题中的算法题

  1. 二叉树的最大深度
  • 原题地址
  1. 另一个树的子树
  • 原题地址
  1. 雷同的树
  • 原题地址
  1. 翻转二叉树
  • 原题地址
  1. 【高频】 斐波那契数列
  • 原题地址
  • 相干题解
  1. 【高频】 合并两个有序数组
  • 原题地址
  1. 【高频】 打乱数组
  • 原题地址
  • 相干题解
  1. 数组区间

webpack 和 babel 相干的问题

  1. babel 的缓存是怎么实现的

  2. webapck 的 HMR，怎么配置：

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

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

  1. 本人有没有写过 ast, webpack 通过什么把公共的局部抽出来的，属性配置是什么
  2. webpack 怎么配置 mock 转发代理，mock 的服务，怎么拦挡转换的
  3. webapck 的 plugin 和 loader 的编写，webapck plugin 和 loader 的程序
  4. webpack 的打包构建优化，体积和速度
  5. DLLPlugin 原理，为什么不间接应用压缩版本的 js

HTTP

  1. 【超高频】 缓存（强缓存），如何设置缓存
  • 图解 HTTP 缓存
  • 深入浅出浏览器缓存机制
  1. 【高频】 HTTP2，HTTP2 的性能优化方面，真的优化很如许?
  2. 【高频】 简略申请和简单申请
  • 阮一峰 - 跨域资源共享 CORS 详解
  • CORS 原理及 @koa/cors 源码解析
  1. 【高频】 HTTPS 的整个具体过程
  • HTTPS 是如何保障平安的
  • 深刻了解 HTTPS 工作原理
  1. 301 和 302 的区别
  • https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status
  1. 怎么用 get 实现 post，就是应用 get 办法然而参数放到 request body 中
  2. TCP 和 UDP 的区别
  • TCP 和 UDP 比拟
  • TCP 和 UDP 的区别

更多能够查看【面试题】HTTP 知识点整顿(附答案)

CSS

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

    • 说一下 flex
    • flex: 1 具体代表什么, 有什么利用场景
    • flex-basic 是什么含意

相干文章：Flex 布局教程：语法篇

  1. css var 自定义变量的兼容性
  2. 行内元素和块级元素的区别
  3. position 有哪些值，别离是什么含意
  4. 盒模型

  5. CSS 的实现

    • 淘宝购物车增加商品到购物车的动画（这回试试应用 CSS 实现抛物线静止成果）
    • toolTip 的实现 (https://www.jianshu.com/p/fdf…
  6. 【高频】 实现固定宽高比 (width: height = 4: 3) 的 div，怎么设置
  7. 【高频】 伪类和伪元素

更多能够查看【面试题】CSS 知识点整顿(附答案)

JavaScript

  1. 单例的利用
  2. 【超高频】 什么是闭包，闭包的利用场景
  • 深刻了解 JavaScript 闭包之什么是闭包
  • 深刻了解 JavaScript 闭包之闭包的应用场景
  1. 如何判断 以后浏览器是否反对 webp
  2. proxy 除了拦挡它的 getter 和 setter 外，还能做什么
  3. 同步阻塞，异步非阻塞
  4. 弱援用，WeakMap 和 Map 的区别
  5. 【高频】 平安相干 XSS 的反射型是什么，怎么防止
  • web 平安之 XSS 实例解析
  • Web 平安之 CSRF 实例解析
  1. 【超高频】 事件循环
  • JavaScript 中的 Event Loop（事件循环）机制
  1. 【超高频】 promise 相干的问题，说一下你对 Promise 的理解
  • ECMAScript 6 入门之 Promise 对象
  • 手写一个 Promose
  1. 【超高频】 浏览器渲染（从输出 url 到页面渲染的实现过程）
  2. 【超高频】 首屏加载优化，通过哪些指标去掂量性能优化的
  3. canvas 和 svg 别离是干什么的
  • SVG 与 HTML5 的 canvas 各有什么长处，哪个更有前途？
  1. 牛客网如何监听你调到了其余页面

document.hidden，监听 docuemnt.vibibleChange事件

document.addEventListener("visibilitychange", function() {console.log( document.hidden);
});
  1. 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);
  1. 简略说一下你对 websocket 理解多少？
  • WebSocket 是什么原理？为什么能够实现长久连贯？
  1. 实现简单数据 (去重元素是对象，数组) 的数组去重 (* 3)
  2. 根本数据类型有哪些，为什么 symbol 是一个函数，BigInt 为什么能够用来存储大整数
  3. 什么是依赖注入

  4. JS 类型转换

    • String([]) 为 ’‘，String({})后果是什么什么? 答案是：'[object object]'
    • 其余一些很经典的类型转换考查，过后没记那么分明，大家能够去网上看一下
  5. 富文本编辑器相干的 js 常识
  • 富文本原理理解一下？
  • 富文本编辑器初探
  • 编辑器初体验
  1. cli 工具的一些实现逻辑

Vue

  1. 【高频】 vue3.0 的新个性，理解 compose api 和 react hooks 的区别
  2. new Vue 做了什么
  3. 双向绑定原理
  4. vue 组件通信办法

React

  1. 【高频】 React hooks 相干的问题
  • 为什么引入，什么原理
  • hooks 如何监听响应的，外部是如何做到只有数据批改的时候才执行函数
  • 依赖的值发生变化，须要不停地监听和绑定事件
  • render props 和 HOC 相比的优缺点
  • 和 mixin，hoc 区别在哪儿
  1. 创立 ref 的几种办法
  2. context 怎么应用，外部原理怎么做到的
  3. 【超高频】 React 新的生命周期，为什么 getDrivedStatefromProps 是动态的
  4. react 中 TS 的申明
  5. redux 相干的问题
  • redux 应用办法，为什么 action 要返回一个函数，返回一个对象能够么
  • state 为什么要设计成不可变的

相干文章 为什么 redux 要返回一个新的 state 引发的血案，阮一峰 -Redux 入门教程（一）：根本用法

  1. 【高频】 diff 算法
  2. 【高频】 key 的作用
  3. immer 和 imutable 的区别
  4. 【高频】 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 依照怎么的程序来刷题比拟好？

其余的一些想法，之前也写了一篇文章 对于面试的一点心得，感兴趣的也能够看一下。也十分欢送大家关注我的公众号【牧码的星星】以及加我微信进行交换，公众号也会偶然分享一些学习的一些心得。

退出移动版