暂存

前言

先介绍下个人情况：本人本科2年前端开发经验，由于政策原因公司裁员，我从上一家公司离职。休息了一段时间之后，我开始投简历找工作。从8月22号到9月22号累计一个月的时间，最终通过面试的岗位有8个。

从这一个月的面试内容来看，大部分面试官都会根据你的简历内容来提问。我简历里写到了 React 、Vue 、Typescript 和 小程序 ，所以关于这几个部分的内容面试官都会问到。另外我简历里没写 Webpack 和 Node ，所以面试官没怎么问 Webpack 和 Node 相关的内容。

面经分类

从我的面试记录来看，可以把面试题分成这些类型：

  • JavaScript
  • CSS
  • 框架通识
  • Vue
  • React
  • Webpack
  • Typescript
  • 浏览器 & 网络
  • 小程序
  • 看代码说结果
  • 手撕代码 & 算法
  • 开放题

以下是我面试过程中遇到的所有的问题，供大家参考。下面的这些题目能搞定百分之七八十，搞定面试绝对没问题。

JavaScript

  • Map和Set的区别，Map和Object的区别

  • 数组的filter、every、flat的作用是什么

  • es6有哪些新特性

  • 说一下对Promise的了解

  • Promise的all和race有什么区别

  • 箭头函数和普通函数的区别

  • let、var和const的区别？如果希望const定义的对象的属性也不能被修改该怎么做？

  • 堆和栈的区别

  • 闭包的原理

  • instanceof的实现原理

  • new的实现原理

  • 数据类型有哪些？如何判断一个数据是否是数组

  • JQuery实现链式调用的原理是什么

  • 分别介绍一下原型、原型链、作用域和作用域链的含义和使用场景

CSS

框架通识

Vue

  • computed和watch的区别

  • watch能监听computed的属性吗

  • vue的响应式原理

  • vue的生命周期

  • mounted拿到数据可以后可以直接获取dom吗

  • nextTick原理

  • vue模板（template）里为什么不能使用多个头结点？

  • vuex为什么同时设计mutation和action？只设计一个行不行？

  • vue2和 vue3 在数据绑定这一块有什么区别？

  • vue挂载和卸载父子组件生命周期钩子执行顺序

  • vue的优化方案（等同于如何编写可读性高、易维护且高性能的vue代码）

  • keep-alive的原理，使用有什么问题？如何解决？

React

  • setState是同步还是异步的

  • fiber的实现原理

  • fiber的时间调度通过哪两个原生api实现的（requestAnimationFrame和requestIdleCallback？？？）

  • React合成事件是如何实现的

  • 使用Redux时需要注意的点

  • 如果Redux没返回新的数据会怎样

  • Redux是如何派发数据的？ connect原理？

  • 什么场景会触发重新渲染

  • setState返回一样的引用，render会执行吗

  • useEffect的使用方法？useEffect的return会在什么时候执行？useEffect原理是什么？

  • useMemo和useCallback的区别，它们的实现原理是什么？

  • useEffect、useMemo、useCallback是如何做依赖收集的

  • React Hooks有什么优势和劣势

  • context的实现原理是什么？如何做依赖收集？

  • React的生命周期

  • PureComponent和Component的区别

  • 如果在map循环中没有设置key值，那么从 A B C D 四个节点变成 B C D三个节点，它会以什么样的方式变化

  • React dom绑定事件和原生事件有什么区别

  • Hooks的实现原理

Webpack

  • 为什么webpack打包慢？为什么vite会比webpack快？如果想提高webpack速度，应该怎么做？

    *   [Webpack优化--将你的构建效率提速翻倍](https://juejin.cn/post/6844903924806189070 "https://juejin.cn/post/6844903924806189070")

  • 说说webpack编译打包的流程

  • 说一下对tree-shaking的了解，对CommonJS和ESM都可以用tree-shaking吗

  • webpack中plugin和laoder的区别，它们的执行时机，以及常用的plugin和loader

  • css-loader的作用是什么？不使用css-loader行不行

Typescript

  • Typescript相较于JavaScript有什么优势和劣势？

  • const func = (a, b) => a + b; 要求编写Typescript，要求a，b参数类型一致，都为number或者都为string

  • 实现ReturnType

  • 实现DeepReadOnly

  • 基于已有类型生成新类型：剔除类型中的width属性

    <span class="hljs-keyword">interface</span> A {

    content: string;
    width: number;
    height: number;
    }
    复制代码

浏览器 & 网络

小程序

看代码说结果

  • EventLoop

    <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
<span class="hljs-built_in">console</span>.log(<span class="hljs-number">1</span>);

    }, 0);
    new Promise(function executor(resolve) {
    console.log(2);
    for (var i = 0; i < 10000; i++) {
    resolve();
    }
    console.log(3);
    }).then(function() {
    console.log(4);
    });
    console.log(5);
    复制代码

  • 闭包。说结果，然后分别使用Promise和async改写成每隔1s打印1个数字的形式

    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">print</span>(<span class="hljs-params">n</span>)</span>{
<span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>;i <n;i++){
    <span class="hljs-built_in">setTimeout</span>(<span class="hljs-built_in">console</span>.log, <span class="hljs-number">1000</span>, i);
}

    }
    print(10);
    复制代码

  • 作用域

    <span class="hljs-keyword">var</span> a = <span class="hljs-number">20</span>;

    function bar() {
    console.log(a);
    }
    function foo(fn) {
    var a = 10;
    fn();
    }
    foo(bar);
    复制代码

  • 作用域

    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">bar</span>(<span class="hljs-params"></span>) </span>{

    var a = 20;
    return function() {
    console.log(a);
    }
    }
    var foo = bar();
    var a = 10;
    foo(); // 20
    复制代码

  • 作用域

    <span class="hljs-keyword">var</span> a = <span class="hljs-number">20</span>;

    function bar() {
    console.log(a)
    var a = 10;
    console.log(n)
    }
    bar()
    复制代码

  • EventLoop

    <span class="hljs-keyword">const</span> promise = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve, reject</span>) =></span> {

    console.log(1);
    resolve(5);
    console.log(2);
    }).then((res) => {
    console.log(res);
    })
    promise.then(() => {
    console.log(3);
    })
    console.log(4)
    setTimeout(() => {
    console.log(6)
    })
    复制代码

  • EventLoop

    <span class="hljs-keyword">async</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">async1</span>(<span class="hljs-params"></span>) </span>{

    console.log(‘async1 start’);
    await async2();
    console.log(‘async1 end’);
    }
    async function async2() {
    console.log(‘async2 start’);
    }
    console.log(‘script start’);
    setTimeout(function() {
    console.log(‘setTimeout’);
    }, 0);
    async1();
    new Promise(function(resolve) {
    console.log(‘promise1’);
    resolve();
    }).then(function() {
    console.log(‘promise2’);
    }).then(function() {
    console.log(‘promise3’);
    });
    console.log(‘script end’);
    复制代码

  • 原型链

    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">foo</span>(<span class="hljs-params"></span>) </span>{

    }
    const bar = new foo()
    console.log(bar.proto)
    console.log(bar.proto.proto)
    console.log(bar.proto.proto.proto)
    console.log(bar.proto.proto.proto.proto)
    console.log(foo.prototype)
    console.log(foo.prototype.prototype)
    console.log(foo.prototype.prototype.prototype)
    复制代码

手撕代码 & 算法

  • 手写快排
  • 手写深拷贝
  • 手写节流和防抖
  • 手写call / apply
  • 手写Promise.all / Promise.race / Promise.allSettled
  • 手写限制并发数量
  • 手写括号匹配
  • 手写红包算法（注意均衡分配和浮点数计算精度问题）
  • 数组去重
  • 将奇数排在前面，偶数排在后面。要求时间复杂度O(n)。空间复杂度O(1)（不能用splice）
  • 数组转树结构
  • 解析出URL中所有的部分
  • 实现一个compare函数，比较两个对象是否相同
  • 螺旋矩阵
  • 大数相加
  • 找出出现次数最多的英语单词
  • 节点倒序（将ul.id=list，将ul节点下的10000个li节点倒序。考虑性能。）
  • 实现一个函数计算 “1+12-31+100-93”
  • 判断链表是否有环
  • 手写useReducer
  • 手写useDidMount
  • 手写useDidUpdate，模拟componentDidUpdate
  • 手写usePrevious
  • 爬楼梯
  • 删除单向链表中的某个节点
  • 柯里化
  • 中划线转大写
  • 千位分割
  • 使用es5实现es6的let关键字

开放题

  • Antd栅格布局的实现

  • 劫持所有的a标签，点击时不发生跳转，而是弹出提示框提示即将跳转到某个网址，点击确认则跳转，点击取消则无操作

  • 两个promise，分别实现串行和并行形式，只有两个promise都返回结果时打印success，否则打印fail

  • 长列表的优化方案有哪些？如何设计一个虚拟列表

    *   [应用性能前端监控，字节跳动这些年经验都在这了](https://link.juejin.cn?target=https%3A%2F%2Fmp.weixin.qq.com%2Fs%3F__biz%3DMzg2NTYyMjYxNg%3D%3D%26mid%3D2247484919%26idx%3D1%26sn%3D4448d108c35e5bc8dec063d32d80966a "https://mp.weixin.qq.com/s?__biz=Mzg2NTYyMjYxNg==&mid=2247484919&idx=1&sn=4448d108c35e5bc8dec063d32d80966a")

  • 埋点是如何拦截和上报的

  • 如何实现一个无埋点数据上报

  • 使用hash路由时，怎么能再刷新后时候自动滚动到页面上次的锚点位置？

  • 做过哪些性能优化方面的工作

    *   [前端性能优化24条建议（2020）](https://link.juejin.cn?target=https%3A%2F%2Fsegmentfault.com%2Fa%2F1190000022205291 "https://segmentfault.com/a/1190000022205291")

  • 实现一个多级菜单，菜单层级不定

  • 如何监控和排查内存泄漏问题

  • 模拟实现Java中的sleep函数

  • 实现一个数组的splice方法（说思路）

  • A页面跳转到B页面，在B页面做的操作传输给A页面的方法

  • Sentry是如何实现错误监控的

    *   [解析Sentry源码(二)｜ Sentry如何处理错误数据](https://juejin.cn/post/6918408073774104584 "https://juejin.cn/post/6918408073774104584")

  • 将一个GIF绘制到canvas上是否可行？如果可行，说说你的实现方法。

  • 如果让你搭建一个项目，你会使用哪些技术方案进行组合？

  • 如何做技术选型？

    *   [精读《12 个评估 JS 库你需要关心的事》](https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fascoders%2Fweekly%2Fblob%2Fmaster%2F%25E5%2589%258D%25E6%25B2%25BF%25E6%258A%2580%25E6%259C%25AF%2F74.%25E7%25B2%25BE%25E8%25AF%25BB%25E3%2580%258A12%2520%25E4%25B8%25AA%25E8%25AF%2584%25E4%25BC%25B0%2520JS%2520%25E5%25BA%2593%25E4%25BD%25A0%25E9%259C%2580%25E8%25A6%2581%25E5%2585%25B3%25E5%25BF%2583%25E7%259A%2584%25E4%25BA%258B%25E3%2580%258B.md "https://github.com/ascoders/weekly/blob/master/%E5%89%8D%E6%B2%BF%E6%8A%80%E6%9C%AF/74.%E7%B2%BE%E8%AF%BB%E3%80%8A12%20%E4%B8%AA%E8%AF%84%E4%BC%B0%20JS%20%E5%BA%93%E4%BD%A0%E9%9C%80%E8%A6%81%E5%85%B3%E5%BF%83%E7%9A%84%E4%BA%8B%E3%80%8B.md")

  • 手写实现一个图片懒加载

    1、到指定高度加载图片

    2、考虑重排和重绘

    3、考虑性能

    4、先加载缩略图，再加载完整的图

    5、注意图片加载容错情况

  • 编写一个函数，传入一个promise和数字n，n(s)内promise没有返回结果，直接reject

  • 了解SSR吗

    *   [谈谈我对服务端渲染(SSR)的理解](https://juejin.cn/post/6890810591968477191 "https://juejin.cn/post/6890810591968477191")

  • 说一下深拷贝要注意的点

  • 前端发展方向设想

  • 如何设计一个类似于elementui这样的可以单包发布，也可以多包发布的框架

  • 如果让你设计一个单测框架，你怎么设计？

  • 如何实现模块懒加载？import语法是如何做的

  • 如何设计一个单点登录方案？

  • 用过哪些设计模式？分别说说它们的使用场景和应用案例？你觉得使用设计模式给你带来了什么好处？

  • 从A页面跳转到B页面，再返回A页面时，如何让A页面保持上一次的状态

  • 了解Vue3和React18吗

  • Nginx和node中间件代理的区别

  • Node中间件主要是解决什么问题

  • 说一下你做过的最有收获的项目。描述一下系统所承载的功能、目标以及这个系统能解决什么问题？

  • 你怎么看待Typescript中大量存在any的现象？面对这样的场景你将有什么样的想法和行动？