面试那些事

echozh
1,937 阅读5分钟

面试那些事

面了一圈发现问的问题都是大同小异，区别可能是问的问题深度的不同，在这里记录下，下面会把我觉得比较有意义的面试题罗列出现，目前不会给答案 因为我的答案也不是最完美的，找答案的过程是比较有意义的

刷过的怪

  • 58
  • 奇安信
  • 蚂蚁
  • 作业帮
  • 美菜
  • 好未来
  • 百度
  • 盒马
  • 快手
  • 字节

上面的除了字节没刷过，蚂蚁年限太短之外，其他的基本都过了。

正题

js 基础部分

  • 原型链
  • 作用域链
  • dom 文档模型
  • dom 文档模型的捕获和冒泡
  • 深拷贝
  • 继承（es6、es5都实现一遍，并说区别）
  • 异步（给出 setTimeout、promise 之类的让你说顺序，以及花费的总时间）
  • eventLoop
  • defer 和 async 加载的区别（最好说到 defer 是在 DOMContentLoaded 执行）
  • 给一些数组的题，让你用 array 的 api 来做一些排序之类的（filter、map、reduce等）
  • array push 的返回值
  • 实现 promise all 以及 promise finally
  • promise 实现原理
  • 装饰器
  • async await 实现原理
  • 如何检测对象类型
  • commonjs 和 esmodule 的区别（进而会衍生出 require 和 import 的区别）
  • requestAnimationFrame 实现 setTimeout

css 部分

  • class 权重值计算
  • BFC (进而会衍生出在横向会折叠吗，以及为什么出现 BFC)
  • flex （会问到 flex-grow flex-shrink 的拉伸和压缩系数计算）
  • 实现超出省略
  • 三列布局
  • position (绝对定位之类的)
  • 居中实现
  • 移动端适配
  • display: none 和 visibility: hidden 的区别（进而会衍生出重绘和回流）
  • 重绘和重排
  • 清除浮动

浏览器

  • html 解析过程
  • 渲染卡死的可能原因
  • 如何检查内存泄漏（以及解决方案）
  • 前端路由的实现方案

框架和库

vue
  • 双向绑定的原理实现
  • 为什么组件的 data 需要是一个函数
  • defineProperty 和 Proxy 的区别，以及他们的优缺点
  • vue 什么时候需要设置组件的 name
  • vue 是如何实现的批量更新 dom ，为什么不是每次值更改就去变更 dom （可以讲讲 nextTick 的实现）
  • vue 组件传值的方式
  • computed 如何实现缓存计算的
  • watch 和 computed 的区别以及实现原理
  • eventBus 的原理
  • keep alive 的实现原理
  • vue router 实现的原理（会拿他和 react router 作比较，以及会问他们都是利用什么来实现的）
  • vuex 的原理
  • vue 如何实现插件或者组件注册的
  • 实现发布订阅者
react(react 问的比较少，因为我写的最近一年都在用 vue)
  • react 的心智模型
  • 高阶组件
  • hook
qianduan （微前端相关的，简历里面写了）
  • 用 qiankun 解决了什么
  • qiankun 做了什么
  • qiankun 如何实现沙箱隔离的
  • 为什么不直接用 single-spa

http

  • 强缓存和协商缓存
  • 缓存命中顺序（from cache 、form disk 这些）
  • 控制缓存的头部有哪些以及作用
  • http1.0、http1.1、https、http2.0 的区别
  • http2.0 为什么能实现多路复用
  • http2.0 如何实现头部压缩
  • https 在 tcp 握手过程和 http 的区别
  • tcp 三次握手（会衍生出，第三次握手是否可以携带数据，以及会让你详细说过程）
  • 为什么需要 tcp 三次握手和四次挥手
  • 如何强制更新缓存
  • cookie 和 session
  • cookie 里面 domain 和 path 的作用，以及如何设置过期时间
  • 分布式如何保证 session 一致
  • pwa 和 service worker
  • 跨域(简单请求，复杂请求之类的)

webpack

  • webpack 执行过程
  • loader 和 plugin 的区别
  • plugin 实现原理
  • 打包或者编译优化的经验
  • 和 vite 以及 snowpack 的区别
  • 你是如何做大文件拆分的

前端优化

这个答案其实挺难说的，因为每个人情况不一样，可以把自己知道的说全就行。

code

  • 找出一个数组中连续出现最多的一个或多个数字
  • 给出二叉树子节点找出他们最近的公共父节点
  • 找出一个数组中出现次数最多的一个或多个值
  • 请将数组 [[1,2,4],[1,1,2,1], [1,2,3],[1,3,4],[1,3,2]] 排序成 [[1,2,3],[1,2,4],[1,3,2],[1,3,4],[1,1,2,1]]
  • 实现发布订阅者
  • 实现深拷贝（注意环和symbol的问题）
  • 实现三列布局
  • 现在有一个长度为 10000 的数组，找出数组中出现次数超过一半的值
  • 快排
  • 实现有效括号匹配{}({})() => true、{)}{()} => false
  • 实现一个简易的 xml 解析器 <list><item>1</item><item key="2key">2</item></list> => {tag: 'list', children: [{tag: 'item', children: 1}, {tag: 'item', children: 2, props: {key: '2key'}}]}
  • 实现 class 权重值计算函数，用例要通过：
compare('#container > .element', 'body > .element') === 990;
compare('body', '.element') === -90;
compare('.element + .element::last-child', '.element:hover') === 10;
compare('input[type=text]', 'li:hover') === 0;
场景
  • 统计用户在页面的每一次点击，实现方案
  • 虚拟列表实现方案
  • 错误监控实现方案
  • 服务端渲染
  • xss

个人经验

这次面试经历其实是没有准备过的，所以我这边搞了一个方案，先面试自己有把握的比如 58、奇安信、作业帮那些，面试官跟你之间的沟通其实也能给你很大的帮助，一定要会每次面试完后进行复盘，对自己不熟悉的点进行改进以及扩展，第二个就是刷算法题（永远的痛）。

avatar
文章
阅读
粉丝