待做的

  • 面试题准备
  • 关于1，2，3面，各自问哪些问题
  • 关于前端可视化部分，面试题的准备
  • 一些【待准备】题目，自己进行准备
  • 再重新回顾下自己的思路，面试的宽度是否够？以及编程题目是否好？
  • 再重新回顾下，如果基础答出来，如何往深度问题，

面试题准备

大厂面试-字节跳动 - SegmentFault 思否 👍👍 作者总结了几点内容
小前端如何从外包进入字节跳动架构组 - ssh_晨曦时梦见兮的个人空间 - 👍👍

OSCHINA - 中文开源技术交流社区 问题还挺多的，不少有深度问题，字节，快手
写给初中级前端的高级进阶指南。 - 知乎 👍👍 还有很多我不知道的

最好的面试或经验

  • 开源项目
  • 好的项目经验

注重很多源码等背后实现，思考


一些手写的题目

手写代码

node

Node.js 的面试题是怎么样的？ - 知乎
jimuyouyou/node-interview-questions: Node.js面试题，侧重后端应用与对Node核心的理解

  • pm2内部机制了解吗
  • node单线程容易崩溃,怎么维护服务的
  • 你对node还有什么想分享的吗,觉得用起来爽的部分
  • 有没有考虑过高并发场景
  • 内存碎片怎么产生 v8
  • node的进程守护怎么做的,发现非预期故障怎么排查
  • 项目中为什么选择用nodejs
  • 你觉得node的适用场景是什么
  • 手写一个koa2的compose
  • 手写一个Scheduler类,实现并发控制
  • 说一下进程线程,如何通信?

  • node服务的性能监测有没有了解过?

  • node如何实现一个带压缩和缓存的http-server？

各方面的问题准备

  • 怎么面试一个候选人
  • 前端基础，js基础
  • vue方面的
  • webpack方面，cli，工程化
  • react方面的
  • nodejs方面
  • 编码能力
  • 开放问题方面

前端基础问题

  • 网络相关 & 浏览器相关
    • 数据存储
    • 浏览器缓存
    • 安全相关
    • 输入url后发生了什么？
  • js相关
    • 对象比较 对象深拷贝
    • 原型和继承，
    • 事件循环机制 微任务 宏任务 如果实现一个任务队列
    • es6的语法，let const，decorator，set和map，iterator，for of，for in
    • 箭头函数的特点
    • 函数式编程，composition，reduce，compose，
    • promise和async，
    • 数组操作，去重，扁平化，
    • 防抖和
  • css相关
    • css in js
  • ts相关
    • 函数重载，多态，

关于问题

  • 开放问题，关于什么的看法，有什么想分享的吗？
    • 关于webpack你还有什么想分享的吗 (哪些优缺点，哪些设计巧妙的地方等)
  • 是否看过源码，如何架构，有哪些设计模式，哪些印象最深的
  • 对于顶层的设计看法，vue和react的看法，

vue方面的

最全的 Vue 面试题+详解答案

响应式原理

  • reactivity的原理， ref 和 reactivity ，生命周期 life cycle 绑定，以及对象某个属性的响应式，为什么会失去响应式. 为什么用 .value 访问。总是用错怎么办？
  • watch，effect，computed等API。

  • setup和react hooks 有哪些特色和不同，为什么会有这种差异性？(是否了解react和vue背后机制差别)。

    • setup代码块过多，过长，怎么优化？

  • vue3哪些升级？

    • 性能
      • 编译时compiler优化，reac可以吗？vue模板的优点，静态节点(怎么实现的，属性标记)，静态节点提升，cacheHandler，block的概念
      • 源码体积优化，模块的拆分，使用依赖的差别，tree-shaking的应用
      • Proxy数据劫持，性能更好，
    • typescript支持，为什么过去不行？
  • vue3 proxy的理解
  • vue-router原理，异步加载组件，挂载到实例上的
  • 简单实现vue双向绑定，vue的双向绑定原理

  • 指令背后的实现， v-if ， v-for ， v-show v-model 等如何编译的？
  • vue的vnode，vue的渲染过程，vnode对比的算法，为什么需要vnode? 以及h函数。(现在vue被编译后，也是render一个vnode，组件级的对比)
  • vuex
  • vue的自定义指令，过滤器，插件，
  • v-for 中key的作用
  • vue-loader的实现

Vue3 源码解析(1)：先导，了解Vue3 的优化点 · 语雀
Vue3.0 性能优化及新特性深度解析__Vue.js - VueClub

其他包

  • axios 源码整体架构
  • git reset和rebase差别

React相关的

React 代码共享最佳实践方式

  • react生命周期
  • 如何阻止冒泡，关于合成事件，
  • 未预期的更新，怎么处理？
  • redux 引入哪几个包
    • react-redux做了什么？
    • 粗粒度的更新？有无优化
  • 有哪些性能优化手段
  • 源码看过吗？
  • 为什么不要在循环、条件语句或者嵌套方法中调用Hooks
  • 说一下为什么要用hooks,解决了什么问题，背后的原理
  • react函数组件和类组件触发更新的方式有哪些
  • react的强制更新有了解吗？
  • 类组件如何实现逻复用？
  • 使用过哪些hooks?
  • hooks为什么有顺序，为什么不能用if? hooks哪些坑，为什么？
  • hooks解决什么问题？hooks之前有哪些解决方案？hoc和render props，作用和弊端？
  • 介绍下常用hooks api，以及作用

大厂面经—-详解react hooks面试题(含高阶组件)_kellywong的博客-CSDN博客

hooks面试题

高阶组件，

hooks的坑的一些原因，if或者，顺序的原因，没有回答出来

ts的泛型，主要是解决什么问题，没有回答出来

webpack方面，cli，工程化

webpack

  • loader和plugin
  • 优化方案
  • 关于chunk的了解
  • vue-cli背后的webpack的
  • less如何被编译的？

工程化方面

几个方面的内容

  • 稳定性 & 性能
    • 性能优化
    • 稳定性保障
    • 容灾等
  • 工程化 & 规范
    • cli
    • 项目模板 template
  • 研发效率
    • 组件化 & 逻辑复用 & 物料
    • 表单 & 表格 解决方案
    • 低代码 & 搭建系统

考察编程能力

算法 & 编程题 & 手写题目

  • 所有标签是否都正确的闭合了，
  • 获取页面上所有的xx标签
  • 统计字符串中次数最多字母 [需准备]
  • 一个优先级队列 p-queue
  • 使用事件循环的方式，多次重复的handler，只会触发一次 [需准备]
  • koa-compose实现
  • 实现一个组件，或日历组件，或什么，需要考虑哪些点？[需准备]
  • 如果让你实现 style-loader ，你打算怎么做？
  • axios 背后的实现

「面试必会」手写35道JS面试高频题(二)
「面试必会」手写35道JS面试高频题(一)
字节跳动面试官：请用JS实现Ajax并发请求控制 - SegmentFault 思否
面试官：“你能手写一个 Promise 吗”

软技能

  • 协作，业务伙伴，接口方案，技术方案
  • 如果老板觉得不好，你又觉得正确？
  • 个人药性，拿结果能力，破局能力，工作态度，学习工作热情
  • 自我拷问，自驱力，对自己的思考，定位，目标，短板，计划。从哪里来，到哪里去，怎么到那里去。
  • 掌握思维模式，黄金圈思维，
  • 做业务能力，业务思考，

数据可视化面试

如何考察候选人的『数据可视化库』的设计水平？ - 知乎
如何考察一个候选人的前端数据可视化水平? - 知乎
G2Plot 2.0 全新来袭 · 语雀
前端面试 · 数据可视化相关

数据标签遮挡的时候，会如何处理？遇到大数据量渲染性能问题时，如何解决？

了解熟悉多少可视化库等

开放问题方面

  • 项目有哪些不足(技术设计，或开发过程问题，或)，哪些经验，如果再重新开始会怎么设计？怎么做？
  • 过去比较有成就感的事情，解决什么难题？
  • 对个人的思考，未来的规划是什么，在未来2~3年要提升自己什么？
  • STAR面试法，背景(什么问题，挑战)，任务，行动(怎么做的)，结果()。
  • 为什么选择我们公司，我们团队？对此怎么看的？

  • 过去几年成长了什么？平时都在做些什么？

  • 为什么离职？

  • 期待的业务场景，或者工作环境

面试思路 流程设计

总结以下几点：1、重视源码以及原理的分析与深入探讨；2、对于原理要做到全面掌握，给出的答案较为简单，面试官会不断的提出问题，引向问题的深入；3、问的题目虽然都比较常见，但面试官希望能够通过问题问出问题的深度，也就是你的底层基础有多少，能把多少内容串起来；4、大厂招聘需要的是能够“造轮子”的工程师，所以需要对原理和底层会进行细剖，致力于大厂的同学需要把源码好好解读，对特别重要的模块做到手写；5、不同面试官有不同的风格，但是大厂对底层的掌握要求都是一致的，精确、完整、无懈可击，呈现给面试官的不仅仅是深度还有广度。以上

大厂面试-字节跳动 - SegmentFault 思否 👍👍 作者总结了几点内容

  • 基础扎实 追求技术细节，追求极致的技术品格
  • 独特亮点 (有一个能做到即可)
    • 对代码的深度认识，底层原理，了解内部的实现
    • 广度上，了解后端知识，形成知识体系网，技术视野，先进性
    • 细分领域，自己的专长
    • 业务思考，找到业务痛点，针对性的解决
  • 热情上进
    • 除技术之外，喜欢钻研或折腾一些东西
  • 要性
    • 追求极致的心态，职业能力，做事方法和做事态度。做事前思考清楚为什么要做这些事情，why，what，how和result

相信这也是大多数的面试官的一个常用方法。通过跟候选人聊聊最近印象最深刻的一个项目，从这个项目入手，考察候选人对于这个项目的业务目标是不是了解的比较清楚；在设计项目架构过程当中，你的方案选型背后有没有能够逻辑自洽的思考；实施过程当中，对技术细节的研究是不是比较深入，同时也可能对一些基础知识的做一些抽样的考察；最后这个项目的最终结果是什么，去考察候选人拿结果的能力，结果是否有可量化的成绩。比如我们在做性能优化项目，最后的结果是否有明确的数据能证明你的优化价值。然后，在整个聊天的过程当中，也会去充分的去看候选人的思辨能力、职业能力、学习方法、成长性，这些方面在聊天时都会有一些反映。最后会得出一个综合的结论。

前端搞面试 | 完颜 - 如何考察候选人的能力与潜力 - 知乎 👍👍 一二三四面怎么排布

所以最后的面试思路

  • 开场的自我介绍，项目介绍，技能的介绍
  • 围绕着项目的经验，star面试法，了解候选人做事能力和可以深入问的技术点
  • 技术的基础能力
  • 一两道手写的，算法&编程题目的提问
  • 如果好的话，再问一些高阶的技术基础能力

借鉴

如何面试

进大厂连载 5/15：如何考察候选人的能力与潜力

前端搞面试 | 贵重 - 如何考察候选人的能力与潜力 - 知乎 👍👍
前端搞面试 | 完颜 - 如何考察候选人的能力与潜力 - 知乎 👍👍

提升 & 带人成长方法

优秀面经