杭州xx智能 一面
杭州xx智能 一面
-
请你先做下自我介绍
姓名，前端几年，主要做什么业务，技术栈，npm社区贡献，开源等 -
看你webpack用得比较多，说下webpack插件吧
webpack插件怎么开发的？
为什么要开发这个插件，解决了什么问题?
你说的环境切换是指那个环境切换?
如果没有缓存怎么处理? -
看你简历上有webpack体积优化和速度以及二次速度优化，详细说一下怎么做的
体积优化： HtmlWebpackPlugin、SplitChunks 追问了下React路由懒加载与SplitChunks怎么分包
速度优化： Thread-loader TerserWebpackPlugin
二次速度优化： TerserWebpackPlugin cache -
webpack热更新原理
- nodejs文件系统监听文件修改
- socket双端通信
- js脚本运行与DOM替换
- 答的有点不流畅，后续再总结梳理一下答题模板
-
webpack整体打包流程
- 说了下输入npm run build 到 打包完成发生了什么
-
webpack5有什么新特性
- TerserWebpackPlugin 内置
- 模块联邦与微前端
-
webpack及其竞品构建打包技术分析
- 简单说了下vite/webpack/rollup的适用场景
- 你为什么说 vite\rollup 打包更干净？
- vite\rollup\webpack的打包产物在runtime上具体有什么区别? 干净是怎么体现的？
- 你刚刚说esm, 详细说下esm,cjs这些的区别吧，了解umd么？umd有什么优点？
-
用的react哪个版本? 用类组件还是hooks? 说下useEffect和useLayoutEffect的区别
- 源码，commit阶段，useLayoutEffect 在本次更新即将副作用全部处理掉， 与之对应的是useEffect的处理是再开启一次调度，由于浏览器渲染进程中ui渲染和js执行互斥，因此useEffect的副作用是在下一次调度后，这一次组件更新完了才会进行处理
- 简单来说，useLayoutEffect时效性更快，本次更新就处理掉，但是js的执行时间过长可能造成ui卡顿。 useEffect时效性慢，在下次调度更新时再处理，但是不会阻塞ui渲染，更流畅。 开发的时候选择性使用。
- 验证码组件，useEffect键盘闪烁问题，用useLayoutEffect解决
-
为什么hooks不能写在if条件语句中？
- 源码，hooks本质上是挂在fiber的memoizedState中，hooks之间通过next指针单向指向，顺序确定，而写在if语句中不能保证hooks的顺序
-
了解react hooks 闭包陷阱么？具体谈下怎么解决这个问题?
- 一般解决方案是添加deps，更新函数作用域获取最新数据
- React社区生态最新提案 useEvent
- 问不用useEvent怎么解决？ 说了下用useRef保持引用不变，属性可变来解决这个问题，以及useEvent的模拟实现也是这样做的
-
看你写了自定义hooks， 讲下虚拟列表怎么实现
- 一屏数量，limit = 容器高 / 元素高
- 起止索引： start = scrollTop / 元素高， end = start + limit
- 容器位移： transformY = start * 元素高
- 虚拟滚动白屏问题： 缓冲区预加载
- 虚拟滚动，不定高度怎么实现： 先给没有渲染出来的列表项设置一个预估高度，等到组件挂载完成的时候，再获取到他们的真实高度去覆盖原来设置的预估高度，然后计算的时候用真实高度计算即可
- 虚拟滚动优化，使用IntersectionObserver，只有在父子组件可视状态发生变化的时候才触发计算，避免重复计算
- https://juejin.cn/post/6844903982742110216#heading-4
-
Nodejs有哪些方面的实践？看你简历上写了命令行工具，简单说一下怎么开发的？
- package.json bin属性 与 nodejs shebang
- commanderjs
-
再问一个问题，说下Nodejs多线程吧，具体怎么在你项目里面怎么用的
- child_process模块spawn等， 还有一些api没记， 一般不记那么多api。 (这里说错了，child_process是进程，worker_threds才是线程模块)
- nodejs 多线程与多进程， terserWebpackPlugin源码，说了下node10之后才加入多线程，之前都是用多进程
-
业务开发中实际遇到过哪些困难？
- m3u8 video兼容性问题
- 阿里videoX方案与苹果HLS库调研与技术选型
- 为什么不是后端解决这个问题，而是前端来做？
-
你是用电脑打的电话么？最后手写一个hooks吧(我说没有环境目录。。。)， 那手写一道算法题吧，LeetCode 两数之和
时间复杂度和空间复杂度分析(空间复杂度是O(n)而不是O(1)，这个和面试官争论了一下，后面面试下来发现真是O(n)) -
你有什么想问我的？
- 团队人数和建设，未来方向
- 前端工程化和基建, cicd方向
- 年终奖几个月
- 委婉的问了下是否996
- 后面还有几轮面试
more:
12 业务开发中实际遇到过哪些困难？
- m3u8 video兼容性问题
- 阿里videoX方案与HLS库调研与技术选型
- 为什么不是后端解决这个问题，而是前端来做？
当时做的xx项目，在开发前向产品咨询了一下确认是MP4类型，结果最后从后端接口读取到的数据是既有MP4也有M3U8类型，而原生video标签是不支持m3u8类型，导致了video无法解析的问题
当时调研的时候考虑了阿里的videoX方案与苹果公司的hlsjs(HTTP LIVE Streaming)，最后发现videoX后面后续只在React上进行迭代，而我们部门技术栈比较多，最后还是选择了hls方案，它基于DOM，兼容好，框架无关性，通过判断dom上的src属性，识别是m3u8就进行处理。最后这个方案贡献到了部门的公共工具类中了。
为什么不是后端解决这个问题，而是前端来做？
我想想后端做的话要怎么处理，后端拿到的也是运营配置的数据，是一个cdn链接，他要做的话就要把这个链接的资源拿到，然后转成mp4再传到cdn, 再拿到对应MP4的链接，这个链路还是比较长的, 也比较消耗服务器资源
当时群里讨论时候，我去github和stackoverflow搜了一圈，发现这个问题是可以解决的，就支持了一下，它本质上就是多媒体的流转换，我们后面还是觉得这个在端侧做比较好
