2020年中大厂前端面试总结

时间  2020-08-28
标签 2020年 大厂 前端 面试 总结 栏目 快乐工作 繁體版
原文   原文链接

前言

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

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

本文连接地址较多，建议查看原文，阅读体验会好一些。下面给出的答案有的是本身总结的，有的是从网上找到写的很不错的相关文章，可是这些都仅供参考，不必定是最佳的答案，若是有很好的答案，欢迎留言一块儿讨论互相学习，有的尚未放上合适的连接，以后会不算补充进去，毕竟每道题涉及到的内容真的挺多的。

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

笔试题

  1. 【超高频】 写一个深拷贝，考虑 正则，Date这种类型的数据
  2. 【高频】 Vue自定义指令懒加载
  1. 判断DOM标签的合法性，标签的闭合，span里面不能有div，写一个匹配DOM标签的正则
  1. 替换日期格式，xxxx-yy-zz 替换成 xxx-zz-yy

可使用 正则的捕获组来实现vue

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节点中标签个数最多的标签
  1. 写一个简单的diff
  1. 【高频】 手写节流
  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，怎么配置：react

    • 浏览器是如何更新的
    • 如何作到页面不刷新也就就自动更新的
    • 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. 【超高频】 缓存（强缓存），如何设置缓存
  1. 【高频】 HTTP2， HTTP2的性能优化方面，真的优化不少么?
  2. 【高频】 简单请求和复杂请求
  1. 【高频】 HTTPS的整个详细过程
  1. 301和302的区别
  1. 怎么用get实现post，就是使用get方法可是参数放到request body中
  2. TCP和UDP的区别
更多能够查看 【面试题】HTTP知识点整理(附答案)

CSS

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

    • 说一下flex
    • flex: 1具体表明什么, 有什么应用场景
    • flex-basic 是什么含义

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

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

  5. CSS的实现git

  6. 【高频】 实现固定宽高比(width: height = 4: 3)的div，怎么设置
  7. 【高频】 伪类和伪元素
更多能够查看 【面试题】CSS知识点整理(附答案)

JavaScript

  1. 单例的应用
  2. 【超高频】 什么是闭包，闭包的应用场景
  1. 如何判断 当前浏览器是否支持webp
  2. proxy除了拦截它的getter和setter外，还能作什么
  3. 同步阻塞，异步非阻塞
  4. 弱引用，WeakMap和Map的区别
  5. 【高频】 安全相关 XSS的反射型是什么，怎么避免
  1. 【超高频】 事件循环
  1. 【超高频】 promise相关的问题， 说一下你对Promise的了解
  1. 【超高频】 浏览器渲染（从输入url到页面渲染的完成过程）
  2. 【超高频】 首屏加载优化， 经过哪些指标去衡量性能优化的
  3. canvas和svg分别是干什么的
  1. 牛客网如何监听你调到了其余页面

document.hidden，监听 docuemnt.vibibleChange事件es6

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 了解多少？
  1. 实现复杂数据(去重元素是对象，数组)的数组去重 (* 3)
  2. 基本数据类型有哪些， 为何symbol是一个函数， BigInt为何能够用来存储大整数
  3. 什么是依赖注入

  4. JS类型转换github

    • 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直接打电话过来让面试的，当时就抱着试试的态度，就直接面试了，面试的过程当中感受可能都不太合适（因此面试的时候要问一下公司部门的具体工做内容），换工做的时候尽可能找相关部门的人内推，首先内推的部门你确定会提早有所了解，并且还能够帮忙看看进度啥的，面试过了说不定还能成为好朋友，哈哈（因此平时要多结交一些大佬，通常大佬的人脉都很普遍，并且他们很能够给你内推，甚至能够把他们本身的经验分享给你）。

老是要想好本身如今出现什么问题了，为何打算离职，下一份工做想要什么样儿的，毕竟一份工做要干很长时间。

面试准备

推荐一些很好的文章：

好文章真的太多了，哈哈，这里就不所有放出来了，关于面试，我也准备作了一些总结，能够查看 我的博客

算法

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

其余的一些想法，以前也写了一篇文章 关于面试的一点心得，感兴趣的也能够看一下。也很是欢迎你们关注个人公众号 【牧码的星星】以及加我微信进行交流，公众号也会偶尔分享一些学习的一些心得。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程