Skip to main content

面试题总结

小红书​

  • 自己自定义过hook吗 useOnClickOutSide

  • class和hook的差异及hook的弊端，hook什么时候容易出bug

    hook更加利于逻辑复用，class要使用HOC hook逻辑更加聚合，class逻辑分散在各个声明周期

  • 算法题：getValueByKeyPath(obj , 'a.b')，lodash.get

  • ts声明问题

    interface Person {
      name: Number;
      [key: string]: String;
    }

    String 是 js 的包装类型， string 是 ts 的类型

  • ts声明函数

    const fn = userId => `${userId}123`;

    const fn: (userId: string) => string = userId => `${userId}123`

  • 宏任务微任务题目

    const a = new Promise(resolve => {
      console.log(1);
      resolve(2);
      console.log(3);
    });

    a.then(value => {
      console.log(value);

      setTimeout(() => {
        console.log(4)
      })
    });

    setTimeout(() => {
      console.log(5);
    }, 100);

    setTimeout(() => {
      console.log(6);
    }, 0);

    console.log(7);

    // 1372645

  • js 转 css 引出性能优化，从哪些角度去分析，排查以及优化。轮播图的宽度，移动端和pc端的像素清晰度

    自适应图片：picture和img srcset。分析：借助性能检测工具(pageSpeed lightHouse)

  • rem问题，假设页面根是33rem，如何处理，用loader还是plugin处理

  • 有没有手写过loader

  • loader是从左到右还是从右到左

    从右到左，使用reduceRight

  • 设计模式，以及代码中使用过什么去优化过代码，发布订阅和观察者模式区别 https://juejin.cn/post/6844904138707337229

    • 装饰器模式：React HOC
    • 适配器模式：将不同数据结构转化成统一数据接口，例如admin重构时的数据结构转化
    • 代理模式：事件委托
    • 发布订阅模式：消息通过广播，订阅者可以获取到消息，一对多。Form组件，有中间方
    • 观察者模式：无中间方

  • node.js，koa，koa compose，洋葱模型

  • React遍历是深度遍历还是广度遍历，两者有什么区别

    深度遍历

  • useState为什么不能放在if中

    React hook 底层是依靠 hook 定义的顺序来执行的，如果声明在 if 中，会打乱顺序，链表存放

  • 100个网络请求，当次至多发10，如果设计让100个请求尽快执行下去。Promise.all有问题，比如第一批取10个，9个1s，剩下1个100s，这样会浪费99s

    接口并发请求

  • 低代码，100个input，输入一个input，如何优化100个都不render

  • Vue中的data为什么是一个函数

  • 手写节流、bind

  • 原型链的题（简单）

  • 比较有难度、收获比较大的项目、上传组件困扰的问题

XTransfer​

  • flex：1 的含义

  • 垂直居中

  • 用css画一个三角形

    div {
      width: 0;
      height: 0;
      border: 40px solid;
      border-color: transparent transparent red;
    }

  • http2 多路复用原理

  • 输入 url 后发生了什么，着重问了 DOM 树的构建

  • 浏览器缓存

  • 浏览器为什么有跨域问题以及如何解决跨域

  • esm 和 cjs 区别

  • rollup 和 webpack 区别

  • webpack Tree Shaking 以及实现原理

  • webpack 相关的优化有没有做过

  • 性能优化：首屏加载速度，从哪些角度入手优化

  • 是否做过埋点或者性能监控

  • React diff 算法，深度优先遍历的过程以及算法复杂度

  • 遇到的最难的项目

  • React Redux connect 原理

  • React Fiber 架构

  • hook 为什么不能在 if 中使用 React 底层依赖于 hooks 的顺序 文档

  • 手写函数柯里化

  • 手写 Promise.all

  • banner 图加载模糊如何处理

    • 渐进式jpeg（模糊加载）
    • 非渐进式（上下加载）
    • 准备一张缩览图

  • 对于加班的看法

  • 闭包及使用场景

黑湖​

  • 遇到的最难的问题

  • hook 和 class 直观的区别

  • react 性能优化，PureComponent、memo

  • 长列表优化

  • webpack loader 和 plugin 的区别

  • 做过什么 webpack 层面的优化

  • js 垃圾回收机制

  • promise resolve 和 reject 都没有触发有问题吗

  • 小程序偏底层

  • react diff 算法

  • Fiber 解决了什么问题

  • 埋点，错误收集

  • margin 重叠，BFC

  • 编程题

    const data = [4,1,5,2];

    {value: 1, next: {value: 2, next: {value: 4, next: {value: 5}}}}

  • 写一个 react 登录框

  • 做客户端，黑湖智造部门，维护组件库，效率后台工具，目前重构3.0

ebay 外包​

  • http 方法及返回状态码
  • restful api，什么时候用什么 http 方法
  • cookie、setCookie、cookie属性
  • 登录权限验证、页面和组件级别的权限校验
  • 介绍 ssr，ssr 开发组件时要注意什么
  • ssr 中服务端如何处理 css、svg、img
    • 服务端不处理，使用 ignore-loader
    • react-loadable collectChunks 自动处理？然后通过 chunkExtractor.getCssString 来实现？
    • client 和 server 的 bundle 配置不同
  • 打包为什么用 rollup 不用 webpack，如何测试服务端渲染时不会出问题
  • 介绍单元测试
  • class component 和 function component 的区别
  • hook 能不能写在条件分支里
  • 组件重新渲染的问题
  • memo 引用对象对比的问题
    • 可以利用 React.memo 的第二个自定义比较函数进行深层比较
    • 或者使用 shouldComponent 自定义比较
    • 扩展：deep equal Immutable
  • 线上错误的追踪，错误监控系统的设计，source-map及映射原理
  • koa 及 中间件