面试那些事

[EchoZhaoH]

面试那些事

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

刷过的怪

• 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、奇安信、作业帮那些，面试官跟你之间的沟通其实也能给你很大的帮助，一定要会每次面试完后进行复盘，对自己不熟悉的点进行改进以及扩展，第二个就是刷算法题（永远的痛）。