中大厂面试总结

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

笔试题

  1. 【超高频】手写深拷贝，考虑 正则 、Date
  2. 【高频】实现一个 Vue 自定义指令懒加载
  3. 判断 DOM 标签的合法性，标签的闭合，span 里面不能有 div，写一个匹配 DOM 标签的正则
  4. 替换日期格式，xxxx-yy-zz 替换成 xxx-zz-yy，可以使用正则捕获组来实现
    var reg = /(\d{2})\.(\d{2})\/(\d{4})/
    var date = '10.24/2017'
    date = date.replace(reg, '$3-$1-$2')
    console.log(date) // 2017-10-24

5.【高频】实现 Promise.all、Promise.allSettled

  1. 获取一段 DOM 节点中标签个数最多的标签

  2. 写一个简单的 diff

  3. 【高频】手写节流

  4. 手写 es6 继承

  5. 实现一个自定义hook -- usePrevious

可以参考 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
    }
  1. 【高频】实现一个 vue 的双向绑定

算法题

  1. 二叉树的最大深度
  2. 另一棵树的子树
  3. 相同的树
  4. 翻转二叉树
  5. 【高频】斐波那契数列
  6. 【高频】合并两个有序数组
  7. 【高频】打乱数组

webpack、babel

  1. babel 的缓存是怎么实现的
  2. webpack 的 HMR 怎么配置：
  • 浏览器是如何更新的
  • 如何做到页面不刷新就能自动更新
  • webpack-dev-server webpack-dev-middleware
  1. 有没有写过 ast，webpack 通过什么把公共部分抽出来，属性配置是什么
  2. webpack 怎么配置 mock 转发代理，mock的服务，怎么拦截转换的
  3. webpack 的 plugin 和 loader 的编写，调用顺序
  4. webpack 的打包构建优化，体积和速度
  5. DLLPlugin 原理，为什么不直接使用压缩版本的 js

HTTP

  1. 【超高频】缓存（强缓存），如何设置缓存
  2. 【高频】HTTP2，HTTP2的性能优化方面，真的优化很多吗
  3. 【高频】简单请求和复杂请求
  4. 【高频】HTTPS的整个详细过程
  5. 301 和 302 的区别
  6. 怎么用 get 实现 post，就是使用 get 方法但是参数放到 body 里面
  7. TCP 和 UDP 的区别

CSS

  1. 【超高频】flex
  • 说一下 flex
  • flex：1 具体代表什么，有什么应用场景
  • flex-basic 是什么含义
  1. css var 自定义变量的兼容性
  2. 行内元素和块级元素的区别
  3. position 有哪些值，分别是什么还以
  4. 盒模型
  5. CSS 实现
  • 淘宝购物车添加商品到购物车的动画（CSS 实现抛物线运动效果）
  • tooTip 的实现
  1. 【高频】实现固定宽高比的 div
  2. 【高频】伪类和伪元素

js

  1. 单例应用

  2. 【超高频】什么是闭包，闭包的应用场景

  3. 如何判断当前浏览器是否支持 webp

  4. Vue3 和 Vue2 实现双向绑定的区别，然后手写两种方式，proxy 除了拦截 getter setter 之外还能做什么

  5. 若一下你对同步阻塞，异步非阻塞的理解

  6. 弱引用，WeakMap 和 Map 的区别

  7. 【高频】XSS 反射型是什么，如何避免

  8. 【超高频】事件循环

  9. 【超高频】说一下你对 promise 的理解

  10. 【超高频】浏览器渲染（从输入 url 到页面渲染完成的整个过程）

  11. 【超高频】首屏加载优化，通过哪些指标去衡量性能优化

  12. canvas 和 svg 区别？优缺点？

  13. 牛客网如何监听你调用了其他页面

    document.addEventListener('visibilitychange', function() {
      console.log(document.hidden)
    })
  1. js 原生 3种绑定事件
    <!-- 第一种 直接在标签里绑定 -->
    <button id="btn" onclick="handleClick()">
      自定义函数
    </button>
    
    <script>
    // 利用 DOM0 进行绑定
      var btn = document.getElementById('btn')
      btn.onclick = handleClick()
      
      // 利用 DOM3 进行绑定
      btn.addEventListener('click', handleClick)
    </script>
  1. 说一下 websocket
  2. 【超高频】实现复杂数据去重
  3. 基本数据类型有哪些，为什么 symbol 是一个函数，BigInt 为什么可以用来存储大整数
  4. 什么是依赖注入
  5. js类型转换
  6. 富文本编辑器相关的 js 知识
  7. cli 工具的一些实现逻辑

Vue

  1. 【高频】vue3 新特性，比较 composition 和 hooks 的区别
  2. new Vue 做了什么
  3. 双向绑定原理
  4. vue 组件通信方法

React

  1. 【高频】hooks 相关
  • 为什么引入，什么原理
  • 如何监听响应，内部是如何做到只有数据修改时才执行函数
  • 依赖的值发生变化，需要不停的绑定和监听事件
  • render props 和 hoc 相比的优缺点
  • 和 mixin，hoc区别在哪
  1. 创建 ref 的几种方法
  2. context 怎么使用，内部原理怎么做到
  3. 【超高频】生命周期
  4. redux
  • 使用方法，为什么 action 要返回一个函数，返回一个对象可以吗
  • state 为什么要设计成不可变

阅读全文

Last Updated:
Contributors: leeguooooo