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 及 中间件