「前端」字节前端一面

这已经是复活面了,之前一面完直接秒挂,这次至少目前还活着。

先是个人介绍,这个面试官比较直接,在我介绍到第一个项目的时候就开始问问题了,后面就直接开始拷打项目了,没让我接着往下讲。不得不说,这个面试官的风格就是极具侵略性,会对着你的一个失误猛攻,有些人可能会慌,我的经验就是平常心对待,反正我就是个正常人,我又不是超人,犯错是很正常的事情罢了。

  1. Vue-Router的几种路由方式
    1. hash模式和history模式
  2. SPA是什么,和MPA的区别,有什么缺点?怎么优化?
    1. 单页面应用/切功能不需要跳页面/首屏速度慢/SSR
  3. 为什么SSR可以优化,别的不可以吗?
    1. SPA慢是因为渲染需要js参与,SSR通过服务器直接渲染拿到html,从而加速了访问
    2. SSR是针对SPA做的优化,别的当然也可以,比如CDN/减少静态资源大小/雪碧图/减少CSS和JS对DOM构建的阻塞
  4. 还有什么优化的释放,比如我首屏不需要的东西可以不可以异步加载?
    1. 懒加载,Vue-Router 直接在component后面写箭头回调import;React直接用一个lazy包一个import回调
  5. 你提到了尽可能减少对DOM的阻塞,什么会阻塞DOM构建?
    1. CSS 和没有 defer/async 标签的 JS
  6. 向后端发请求的时候,经常会遇到先选一个选项发请求,这个请求可能有一段时间才能相应,然后又选了另一个选项,你怎么保证我的数据是正确的?
    1. 请求是可以打断的,比如fetch可以通过AbortController中断请求,然后去发最新的请求就行了
  7. 有了解过他是怎么实现的吗?
    1. 就是跟拿到timeoutId去clearTiemout类似,拿到一个句柄,就可以给他发信号让他切断
    2. "AbortController 的工作原理是通过创建一个控制器和信号 (AbortSignal) 来实现。你可以将这个信号传递给 fetch 请求或其他支持中断的异步操作。当你调用 AbortController.abort() 时,传递的 AbortSignal 会触发中断信号,导致异步操作立即停止,并通常会抛出一个 AbortError 异常。"
  8. 如果不用 axios,只让你用HTTP Request,你如何实现?
    1. 用 Promise 封装一下,http request正常返回的时候就resolve,然后有异常就reject
  9. 看到你移动端布局使用了tailwindCSS,为什么要用这个?
    1. 写起来比较简单,不用想类名,然后写起来读起来都比较清晰,开发效率会更高
  10. 没有缺点吗?
    1. 从性能上,他最坏不会坏过原生的 CSS,加上他本身是一个 css 的预处理器,可以获得很多预处理器带来的性能提升,比如自动移除未使用的类,打包后更小的css文件体积等
    2. 从人为因素上来讲,tailwindCSS 可能会间接地让部分开发者写很长的classname,从而降低代码的可读性
  11. 你的布局里用了flex和grid,为什么用这些?
    1. grid 主要用来实现一些异形卡片布局,比如我可能要12,21,2*2的卡片,这样的布局用grid写起来会非常方便
    2. flex 作为现代的弹性布局方式,在对齐、多列布局方面非常方便
    3. 配合css的媒体查询去做移动端的响应式布局
  12. 有没有了解过其他的响应式布局方式?
    1. 还可以通过UA来判断用户设备,然后返回不同的布局
  13. 那这个布局是如何转换的?
    1. 聊了一些vw、vh、rem之类的方式
  14. 下面是无聊的八股部分
    1. css如何局中一个元素
    2. 定位/浮动/BFC
  15. 为什么从今年的1月份到现在做了这么多项目?
    1. 因为要学习,要找工作😅
  16. CDN解决什么问题?
    1. 静态资源加载缓慢
  17. 浏览器渲染网页的过程
    1. 八股复读
  18. js的代码输出题,常规的宏任务/微任务事件循环考察
  19. async await 背后的具体实现有了解过吗?
    1. 就是Promise的语法糖,可以等价的转化为Promise.then之类的,但是面试官对这个答案不是很满意,说你这个是用法,不是原理
    2. 我猜他想听:async 函数是返回一个 Promise 的函数。即使函数内部没有显式地返回 Promise,也会自动将返回值包装成 Promiseawait 会暂停 async 函数的执行,直到 Promise 被解析(即变为成功或失败),然后恢复函数的执行,并返回 Promise 的结果。如果 Promise 被拒绝,await 表达式会抛出异常,这可以通过 try/catch 块来捕获。
  20. 手撕:最长公共前缀
  21. 继续八股:
    1. 常见的数据结构/特性/用法/场景
    2. js里的数据类型/复杂类型和简单类型的区别
    3. 值传递和引用传递的区别
    4. 事件冒泡/可以用这个机制实现什么?(事件代理)
  22. 看你这里手写了一个进度条,如果需要你将其封装成一个通用的组件,你怎么写?
    1. 一开始说了自定义hooks,后来聊下来发现其实介绍一个prop作为百分比然后更新就行了
  23. 然后面试官就开始拷打,说你为什么一上来就说自定义hooks?
    1. 我就花了不到3s思考这个问题,难免有不周到的地方,实际开发过程中肯定有更充足的思考时间(这个面试官问的非常有侵略性,但我还是努力在反驳,我觉得几秒钟的考虑时间有点失误也很正常吧)
  24. 继续延伸,如果你想让这个组件支持自定义样式,你该如何实现?
    1. 拿一个属性去接受className就行了
  25. 然后又开始跟我纠结为什么不是style而是className,我怎么知道用户一定就用tailwindCSS?
    1. 反正你拿两个属性都接受不就完了吗,支持tailwindCSS是个额外的feature,大不了你不用呗
  26. 当你封装一个组件的时候,最重要的是什么?
    1. 高内聚,低耦合(面试官觉得太虚了,让我细说)根据Vue官方文档的推荐,你的组件应该提供详细的props的类型定义甚至validator,因为你的props的定义其实就是你的组件的使用文档
  27. 你的项目上提了一些性能指标,都是什么意思,什么问题会导致某个指标高,如何优化?
    1. 八股复读
  28. 那这些优化你有实现过吗?
    1. 我写的这些网页都比较简单,所以没有做过具体的性能优化
  29. 那你为什么要写这个性能指标?
    1. 因为我care性能
  30. 你care性能为什么不去优化他,那你关心他干嘛?
    1. 因为我不去优化是因为我认为他足够好,而不是我不知道性能可以优化
  31. 你如何做性能分析?
    1. lighthouse/performace
  32. JS 里捕获异常的方式有哪些呢?
    1. try/catch Promise.catch之类的
  33. 你说的都是局部的,我不可能每个地方都try/catch吧
    1. 我一开始说的高阶组件,面试官又问说那我不用框架呢
    2. 那你最上层try/catch呗
    3. 可以用一些全局异常捕获的api,比如window.onerror, window.onunhandledrejection
  34. 推荐了《高级程序设计》这本书
#字节求职进展汇总##前端##秋招#
全部评论
性能分析那块给我看笑了哈哈哈
9 回复 分享
发布于 08-25 18:29 浙江
看面经就感觉压力大😓 async await原理应该是generator yield吧
2 回复 分享
发布于 08-26 10:42 辽宁
好贴
1 回复 分享
发布于 08-26 09:33 北京
广告业务组么,我被问了一个半小时
1 回复 分享
发布于 08-31 08:57 上海
你每次都录音吗佬,感觉你每一篇都回忆的好细
点赞 回复 分享
发布于 08-25 19:08 四川
学到了好多
点赞 回复 分享
发布于 08-25 19:46 北京
太***了,说实话,大佬
点赞 回复 分享
发布于 08-25 21:18 山西
async原理是生成器函数
点赞 回复 分享
发布于 08-25 22:55 江苏
关注了 爱看
点赞 回复 分享
发布于 08-25 23:59 上海
我的妈呀 问了好多
点赞 回复 分享
发布于 08-26 13:04 浙江
“可以用一些全局异常捕获的api,比如window.onerror, window.onunhandledrejection”,大佬,这个会细问吗
点赞 回复 分享
发布于 08-26 14:03 浙江
太强了佬
点赞 回复 分享
发布于 08-26 14:58 重庆
async await的底层原理要答到Generator吧
点赞 回复 分享
发布于 08-26 16:40 上海
第一次听AbortController,不过好在其他的都常规八股
点赞 回复 分享
发布于 08-26 17:11 北京
css解析不会阻塞dom构建
点赞 回复 分享
发布于 08-27 01:43 北京
优质面经
点赞 回复 分享
发布于 08-27 12:01 广东
一面完多久通知呀
点赞 回复 分享
发布于 08-28 14:04 浙江
楼主是面的哪个部门
点赞 回复 分享
发布于 08-29 20:01 四川

相关推荐

        顺丰二面面经续集。1.monorepo的各个子应用是独立打包的吗?        有在字节实习的uu应该都接触过monorepo。我是进去之后才知道这个东西,但对他的原理也不明白,今天跟大家一块了解一下。        首先什么是monorepo。我个人理解monorepo是一个将不同项目的代码放在同一个代码仓库中组织起来的一种方式。可以想象github中的一个仓库中有很多小项目的代码文件。这些项目虽然有可能是相关的,但通常在逻辑上是独立的,并由不同的团队维护。像我之前实习时的项目仓库使用monorepo,仓库中既有web前端的代码,也有小程序前端的代码。        monorepo有什么好处?1.多个项目之间需要共享代码、组件或者工具库时,monorepo比较简便。使用monorepo就不需要将想要共享的部分发布npm包再去别的项目中安装,而是有一个share目录,专门放置共享的组件或方法等。2.统一依赖版本管理时更好的确保一致性。3.根目录下有一个package.json,每个项目也有自己的package.json,通过在根目录下npm install,它会自动安装所有子项目的依赖。4.在开发的时候,省去了在多个代码仓库之间切换的麻烦。还有很多优点,比如统一的CI/CD,统一的构建流程......        再谈谈不好的点。从我自己的使用角度来说,刚开始最常见的问题就是更新依赖时很容易改变了其他子项目的依赖,在全局npm install或者一些api update的时候,会给所有子项目都更新,但是可能版本更新会给别的项目带来不可预见的问题,这也是为什么需要code review,把这些不是你应该改动的东西要改回去。除此之外,打包构建需要专门优化,否则会出现打包时间过长。        那么回到monorepo的子项目是否是独立打包这个问题。要知道monorepo的每个子项目都是可以独立开发、部署、构建...试想如果只有其中一个子项目fix了一个线上bug,但是整个项目都要重新打包发布那么整个流程岂不是太过冗杂了,所以一定是可以独立打包独立安装才有足够灵活性的。但是能独立打包并不意味着你的项目中的子项目都是独立打包的,具体还要看是否在子项目package.json中配置了打包脚本。2.setState是同步还是异步        拷打完项目就开始拷打原理了。这个问题当时没记住啊,恨自己没多看两篇文章。        首先要知道这个同步和异步跟我们所谓的js同步任务异步任务不一样,是指调用setState后能否马上得到更新后的值,即是否立即调用render 函数渲染视图。        在react18之前,在react 可调度范围内的setState 就是异步的,反之,则为同步。什么是可调度范围?react 合成事件内同步执行的setState 就是可调度范围。什么是react 可调度范围外呢?宏任务:setTimeout ,微任务:.then ,或直接在DOM元素上绑定的事件等都是react 可调度范围外。        在react18中多了批处理功能(当 React 在一个单独的重渲染事件中批量处理多个状态更新以此实现优化性能),这意味着之前没办法批处理的情况都可以批处理了。在每次setstate时会产生一个优先级标志lane,对于相同优先级的多次更新任务,react实际只会复用第一个调度任务,在一次批量更新结束后才会更新实际变量的值。相同优先级的setState是异步执行的,而不同优先级则是同步的。        需要注意的是,由于js的闭包特性,同一份代码在类组件和函数组件中的执行结果是有差异的。        详细源码理解推荐以下链接(彻底搞懂setState到底是同步还是异步1,2,3):        https://blog.csdn.net/y_ang_1/article/details/136941891?spm=1001.2014.3001.5502        https://blog.csdn.net/y_ang_1/article/details/137151783?spm=1001.2014.3001.5502        https://blog.csdn.net/y_ang_1/article/details/137151803?spm=1001.2014.3001.55023.react的任务优先级策略,以及哪些任务优先级比较高?        这么多场面试,这是唯一一个问了这个问题的面试官,不得不说是有水平和经验的。东西太多了,我水平也不够,帖个帖子:https://juejin.cn/post/7207406497508114489        涉及原理的内容确实很难理解和掌握,多看点帖子多看点源码吧。        如果大家觉得对自己有帮助,感谢大家点赞收藏送花评论!希望大家意向多多offer多多!#软件开发##软件开发2024笔面经##前端##顺丰#
查看3道真题和解析 软件开发2024笔面经
点赞 评论 收藏
分享
32 116 评论
分享
牛客网
牛客企业服务