• 欢迎光临~

面试复盘

开发技术 开发技术 2022-08-05 次浏览

杭州xx智能 一面

  1. 请你先做下自我介绍
    姓名,前端几年,主要做什么业务,技术栈,npm社区贡献,开源等

  2. 看你webpack用得比较多,说下webpack插件吧
    webpack插件怎么开发的?
    为什么要开发这个插件,解决了什么问题?
    你说的环境切换是指那个环境切换?
    如果没有缓存怎么处理?

  3. 看你简历上有webpack体积优化和速度以及二次速度优化,详细说一下怎么做的
    体积优化: HtmlWebpackPlugin、SplitChunks 追问了下React路由懒加载与SplitChunks怎么分包
    速度优化: Thread-loader TerserWebpackPlugin
    二次速度优化: TerserWebpackPlugin cache

  4. webpack热更新原理

    • nodejs文件系统监听文件修改
    • socket双端通信
    • js脚本运行与DOM替换
    • 答的有点不流畅,后续再总结梳理一下答题模板
  5. webpack整体打包流程

    • 说了下输入npm run build 到 打包完成发生了什么
  6. webpack5有什么新特性

    • TerserWebpackPlugin 内置
    • 模块联邦与微前端
  7. webpack及其竞品构建打包技术分析

    • 简单说了下vite/webpack/rollup的适用场景
    • 你为什么说 viterollup 打包更干净?
    • viterollupwebpack的打包产物在runtime上具体有什么区别? 干净是怎么体现的?
    • 你刚刚说esm, 详细说下esm,cjs这些的区别吧,了解umd么?umd有什么优点?
  8. 用的react哪个版本? 用类组件还是hooks? 说下useEffect和useLayoutEffect的区别

    • 源码,commit阶段,useLayoutEffect 在本次更新即将副作用全部处理掉, 与之对应的是useEffect的处理是再开启一次调度,由于浏览器渲染进程中ui渲染和js执行互斥,因此useEffect的副作用是在下一次调度后,这一次组件更新完了才会进行处理
    • 简单来说,useLayoutEffect时效性更快,本次更新就处理掉,但是js的执行时间过长可能造成ui卡顿。 useEffect时效性慢,在下次调度更新时再处理,但是不会阻塞ui渲染,更流畅。 开发的时候选择性使用。
    • 验证码组件,useEffect键盘闪烁问题,用useLayoutEffect解决
  9. 为什么hooks不能写在if条件语句中?

    • 源码,hooks本质上是挂在fiber的memoizedState中,hooks之间通过next指针单向指向,顺序确定,而写在if语句中不能保证hooks的顺序
  10. 了解react hooks 闭包陷阱么?具体谈下怎么解决这个问题?

    • 一般解决方案是添加deps,更新函数作用域获取最新数据
    • React社区生态最新提案 useEvent
    • 问不用useEvent怎么解决? 说了下用useRef保持引用不变,属性可变来解决这个问题,以及useEvent的模拟实现也是这样做的
  11. 看你写了自定义hooks, 讲下虚拟列表怎么实现

    • 一屏数量,limit = 容器高 / 元素高
    • 起止索引: start = scrollTop / 元素高, end = start + limit
    • 容器位移: transformY = start * 元素高
    • 虚拟滚动白屏问题: 缓冲区预加载
    • 虚拟滚动,不定高度怎么实现: 先给没有渲染出来的列表项设置一个预估高度,等到这些数据渲染成真实dom元素了之后,再获取到他们的真实高度去更新原来设置的预估高度
  12. Nodejs有哪些方面的实践?看你简历上写了命令行工具,简单说一下怎么开发的?

    • package.json bin属性 与 nodejs shebang
    • commanderjs
  13. 再问一个问题,说下Nodejs多线程吧,具体怎么在你项目里面怎么用的

    • child_process模块spawn等, 还有一些api没记, 一般不记那么多api。 (这里说错了,child_process是进程,worker_threds才是线程模块)
    • nodejs 多线程与多进程, terserWebpackPlugin源码,说了下node10之后才加入多线程,之前都是用多进程
  14. 业务开发中实际遇到过哪些困难?

    • m3u8 video兼容性问题
    • 阿里videoX方案与苹果HLS库调研与技术选型
    • 为什么不是后端解决这个问题,而是前端来做?
  15. 你是用电脑打的电话么?最后手写一个hooks吧(我说没有环境目录。。。), 那手写一道算法题吧,LeetCode 两数之和
    时间复杂度和空间复杂度分析(空间复杂度是O(n)而不是O(1),这个和面试官争论了一下,后面面试下来发现真是O(n))

  16. 你有什么想问我的?

    • 团队人数和建设,未来方向
    • 前端工程化和基建, 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搜了一圈,发现这个问题是可以解决的,就支持了一下,它本质上就是多媒体的流转换,我们后面还是觉得这个在端侧做比较好

程序员灯塔
转载请注明原文链接:面试复盘
喜欢 (0)