LinMoQC

2024，野花做了一场玫瑰梦

Sun, 09 Feb 2025 00:00:00 GMT

其实上大学以后每年都有做年终总结的习惯，也是从上了大学以后我开始学着去记录生活，自从爷爷走后，我发现人的一生难免会有许多遗憾，或追忆，或懊悔，太多时候我们来不及说再见，有些话来不及说就再也说不说口了。

2023的年末我认识了一个女孩，其实说来话长又或许是缘分作祟，我在一个技术交流群中化名“林陌青川”（沿用至今），在一位群友的邀请下加入了他的技术交流群，也是在交流群中，我和她因为一场竞赛而相识，起初我们只是像正常的网友一样聊聊比赛和技术。当时我已经决定走前端路线，这与我高中开始接触PHP，WordPress有着一定关系，那时我大二下，她大三下，我们都准备开始找实习，大二下开学我用了一个月背八股文，也不知怎么的，近乎零基础的她在四月底找到了第一份实习快手，而我在五月中也拿到了人生的第一份大厂实习—携程，不知道是不是因为与她相遇，一向点背的我第一次被幸运女神眷顾，恰好那次携程招聘被我看见，就这样暑假暑期我去了上海而她去了北京。

故事的发展总是出乎意料，在携程实习期间我们互相分享实习期间的趣事，由QQ聊天转移到了微信聊天，我能否认为这是更进一步呢？ 20岁生日那天，我收到了她送的礼物，她说想吃我的生日蛋糕，于是我给她点了一份小蛋糕，上面写着“秋招顺利，上岸鹅厂”，好吧，现在看来只灵验了前一半哈哈哈哈。

在上海实习期间我用实习工资买了人生的第一部相机用来学习摄影，恰好她也喜欢摄影，于是我开始把自己拍的照片发给她看，说起来我只拍景不拍人，所以拍的照片总是少了几分韵味。

实习很快结束了，九月初我从上海回到了武汉，而她在九月底收到了上海字节的offer，就这样我们完美错开，其实到这我以为我们可能不会有见面的机会了。

十一月，渡过两个月学校生活后我开始找第二份大厂实习，有了第一次的经验，一开始还是挺顺利的，网易腾讯字节陆续与我约了面试，而这次幸运女神似乎不再光顾我，这三场面试无一例外全部挂掉，至此我已经有点心灰意冷了，那段时间在宿舍夜晚睡不着，无数次的怀疑自己，而她总是耐心的安慰我。

也许又是缘分作祟，一个周末我去了长春观拜了一下（顺便帮她也点了一支），随后下一周我的运气似乎好了起来，周一B站约面，仅仅用了三天我便拿到了offer，恰好地点在上海，同一周美团也进展到了二面，其实美团和B站之间我还是更倾向于美团的，美团在北京，一是我没有去北京看过，二自然是美团title大于B站，奇怪的是美团二面完在面试结束都让我鸽了B站接他们，晚上给我打来电话告诉我面试官对我很认可但是业务组没通过，好吧，还好我接了B站😅。

确定要来上海后，我们两约了我去B站第一周周末见面，第一次和女网友见面不激动是假的，我们都很好奇对方现实中是个怎么样的人，于是熬过第一周后，时间来到周末。

我们提前规划好了游玩路线，先吃饭然后citywalk再看电影。

站在地铁出站口，她身穿粉色外套，披着散发向我走来，好吧我承认那一刻我真的心动了。

第一次见面她给我带了一份见面礼——护手霜，好吧😑我还没回礼呢，走在路上我们有一搭没一搭的聊着，走到第一个饭店打卡，我发誓这绝对是我吃过最贵的甜品！68就一个玻璃杯大小，要是让我老头看到不得抽我两下。

第一次和女生单独吃饭，多少还是有点紧张，好在微信上聊了不少我很快熟络起来。吃完饭我们打车去了静安寺，其实这里我已经来了五六遍，但这次不同了，我的镜头前多了她。

那一瞬，盛大的静安寺在她面前似乎也黯然失色。

逛完静安寺我们去了下一个目的地—新天地，这一块我倒是还没来过，在她的带领下，我们穿过大街小巷，在浓郁的圣诞氛围中漫步着。

进入一处古色古香的阁楼，她举起手机喊我来了一张合照，这也许是我和女生第一次单独合照吧。

逛完新天地，我们去看了一场电影，因为晚上有人要看她的转租房，于是我送她回去，等事情解决完，我们又出来吃了晚饭。

吃完晚饭我们临走前绕着外滩逛了一圈，其实这应该是我第二十次来外滩了，与前十九次不同的是，这次有了汪小姐的陪伴。

走在回去的路上，我愈发期待第二天的见面。

一夜无眠，第二天早上起来洗漱完后我就赶去地铁站，今天我们选择在北外滩集合，刚出地铁就看见了她粉红色的外套，即使看过很多次，再看依然让我惊艳。就近吃完饭后，我们来到了绿地滨江公园。

我们互相为对方拍照，看到她坐在椅子上不经意中露出的微笑，我再次沉醉了，光线照在她的脸上为我带来了那一幅惊艳世界的瞬间。

逛完北外滩，我们顺着来到了陆家嘴，打卡了一张陆家嘴三件套，在这拍的那张live现在正是我手机的壁纸（希望不要找我交肖像费。打卡完后，我们选了一家密室逃脱。

密室逃脱内看着她认真思考的样子，我似乎忘记了大脑运转，很简单的一个机关却怎么也想不出来，只是定定的望着她，多希望那一刻即是永恒。

玩完密室逃脱后，我们去吃了她的家乡菜，挺辣的说实话….

美好的时光似乎总是很短暂，我们在地铁站分别，不知道为什么我的心很难受，短短两天的时间，我似乎迷恋上了这种感觉，那一刻我多希望多希望…

汪小姐来自名校，毕业就拿到了高薪资，我们之间的距离似乎越来越远。

汪小姐似乎总是有些悲观呢，为什么对自己不自信呢？你是很好很好很好的的汪小姐，自信点。

世界之大为何我们要相遇，难道是缘分？难道是天意？不管如何，感谢汪小姐带给我的2024。

有些人光是遇见就已经是上上签了。

谨以此文致敬2024

林陌青川

BiliBili·一面

Sun, 09 Feb 2025 00:00:00 GMT

个人介绍
- 简单介绍自己的背景、技能和实习经历。可以突出与面试职位相关的经验和技术栈。
讲一下 history 路由和 hash 路由
- History 路由：通过浏览器的 history.pushState() 和 history.replaceState() 进行路由切换，不会产生页面刷新。支持浏览器的前进、后退操作，URL 没有 #。
- Hash 路由：通过 URL 中的 # 来进行路由切换，改变的只是哈希值。每次跳转都会产生页面刷新，不支持浏览器前进、后退操作（需要自己管理）。
讲一下 TS？TS 和 JS 的区别
- TS (TypeScript) 是 JavaScript 的超集，添加了类型系统。TS 提供静态类型检查，可以在编译时捕获错误。JS 是动态语言，没有类型检查。
- TS 代码在编译时会转译成 JS 代码，JS 没有强制类型约束。
开发时埋点流程（实习时的）
- 确定需要埋点的事件（如用户行为、按钮点击、页面访问等）。
- 在合适的地方添加埋点代码（通常通过统一的埋点函数）。
- 后端接收数据并存储，前端发送请求到服务器。
- 数据分析后，生成报表，帮助产品和运营分析数据。
Lottie Web 怎么封装的和普通动画的区别
- Lottie Web：基于 JSON 文件的动画，通常由 After Effects 和 Bodymovin 插件生成。Lottie 可以通过 lottie-web 库来渲染动画。
- 和普通 CSS/JS 动画的区别在于，Lottie 动画是矢量图，质量较高，且不需要复杂的代码，容易集成。
开发时做过哪些优化
- 减少不必要的渲染，使用 React 的 shouldComponentUpdate 或 React.memo。
- 图片和文件资源的懒加载，减少页面初次加载时间。
- 使用 Webpack 进行打包优化（代码分割、压缩等）。
刮卡效果怎么做的（Canvas）
- 使用 Canvas 元素绘制覆盖层，通过监听鼠标事件（如 mousemove）擦除一部分覆盖层，展示底部内容。
- 用 clearRect() 方法清除指定区域，实现刮卡效果。
开发时有没有遇到过性能问题
- 常见性能问题：页面渲染卡顿，异步请求导致的 UI 阻塞，内存泄漏等。
- 解决方案：优化组件渲染，使用懒加载、减少 DOM 操作、异步请求优化等。
React 做过哪些优化
- 使用 React.memo 或 PureComponent 避免不必要的渲染。
- 使用懒加载和代码分割（React.lazy）。
- 使用 useCallback 和 useMemo 优化函数和数据的传递。
HTML 怎么做优化
- 压缩 HTML 文件，减少不必要的空格、注释等。
- 使用异步加载 JavaScript 和 CSS 文件。
- 使用图片压缩，避免大图片占用过多带宽。
事件循环机制
- JavaScript 是单线程的，事件循环机制保证了异步任务的执行顺序。
- 主线程执行栈、宏任务队列和微任务队列交替执行。微任务（如 Promise）会在每个宏任务执行后立即执行。
防抖节流以及应用场景
- 防抖：在事件触发后的延迟时间内如果有新的触发，则重新计时。适用于输入框搜索等场景。
- 节流：控制事件触发的频率，通常用于滚动、窗口大小调整等场景。
前端模块化
- 将代码分为多个模块，提高代码的复用性和可维护性。
- 常见的模块化方法：CommonJS、AMD、ES Modules（ES6）。
HTTP 和 HTTPS 它们的区别？
- HTTP 是明文传输，存在安全隐患。
- HTTPS 在 HTTP 上添加了 SSL/TLS 加密，确保数据传输的安全性。
HTTP 2.0 有哪些新特性
- 多路复用：在一个连接上发送多个请求和响应。
- 头部压缩：减少头部信息的冗余。
- 服务器推送：服务器可以主动推送资源到客户端。
HTTP 常用状态码
- 200：成功
- 404：未找到
- 500：服务器错误
- 301：永久重定向
- 403：禁止访问
强缓存和协商缓存
- 强缓存：浏览器根据缓存策略（如 Cache-Control、Expires）直接从缓存中获取资源，不发送请求。
- 协商缓存：浏览器发送请求到服务器，服务器判断缓存是否有效，若无变化返回 304。
移动端做过哪些优化
- 使用媒体查询做响应式设计，适配不同屏幕尺寸。
- 通过懒加载和图片压缩提升性能。
- 使用 Touch 事件代替传统的鼠标事件。
自适应怎么做的
- 使用百分比宽度、vh/vw 单位、媒体查询等手段实现页面自适应。
flex grow 和 flex shrink
- flex-grow：定义项目的放大比例。
- flex-shrink：定义项目的缩小比例。
CSS 选择器权重
- 权重由元素选择器、类选择器、ID选择器和内联样式决定，ID选择器的权重最大，内联样式权重最高。
元素垂直居中的方法
- 使用 Flexbox 或 Grid 布局。
- 通过 position: absolute 和 transform。
- line-height 与 height 相等的方法。
盒模型
- 盒模型包括：content、padding、border 和 margin，可以通过 box-sizing 属性控制是否包括 padding 和 border。
SASS 的编译流程
- SASS 文件通过 SASS 编译器编译为标准的 CSS 文件。
props 和 state 区别怎么修改 props
- props 是父组件传递给子组件的数据，不可修改。
- state 是组件内部的数据，可以通过 setState 修改。
常用 hooks
- useState：声明状态。
- useEffect：副作用处理。
- useContext：跨组件共享状态。
- useReducer：复杂状态管理。
useMemo 和 useCallback 什么时候使用
- useMemo：缓存计算结果，防止不必要的重复计算。
- useCallback：缓存函数，避免子组件不必要的重新渲染。
React 和 Vue 的区别
- React 更关注组件的构建和渲染，使用虚拟 DOM，灵活性较高。
- Vue 提供了更完整的解决方案，包括响应式数据绑定、指令等。React 从 15 到 16 的架构变化，主要是引入了 Fiber 算法。
hooks 的好处
- 可以在函数组件中使用状态和生命周期等功能，提升代码的复用性，避免组件嵌套。
git 常用指令开发过程中碰到同事修改文件怎么处理？ git rebase 是干什么的？
- git pull：拉取远程代码。
- git rebase：将本地提交移到最新的远程提交之上，避免生成额外的合并提交。
常用的设计模式（说了观察者模式）
- 观察者模式：允许对象在发生变化时通知其他依赖对象，常用于事件系统。
观察者模式应用案例
- 前端的事件订阅与发布、Vue 的响应式数据绑定。

上海折叠·终章

Sun, 09 Feb 2025 00:00:00 GMT

告别mentor，摘下工牌，最后一次站在国正大厦顶层，望着对面灯火通明的抖音大楼不禁恍了神。

命运总是在制造精密的时间差，我想那些看似错轨的瞬间，实际是上帝在调试名为人生的沙盒——那段我们共同编译的岁月，也许早已成为各自生命进程里不可替代的常量。相遇的意义在于照亮彼此，只要同行时是快乐的，就是最好的相遇。

如果有机会我想带你去看一看苏州河的黄昏，当波光将影子揉碎成十万片金箔，我们将听到这座城市用江水书写出的启示。

十二月的开卷铃声将比外滩跨年钟声更加洪亮，当试卷展开的刹那，洁白的卷面倒映出你我的过往，而所有未尽的遗憾，都将在下一个换乘站了却。

人生南北多歧路，君向潇湘我向秦。

当今互联网，计算机专业该如何自处？

Sun, 09 Feb 2025 00:00:00 GMT

1.目前的形式

首先不管互联网如何颓势，计算机专业依然是最热门的专业之一，随着高考报考计算机专业的人越来越多，每年计算机专业应届生高达几十万人，但是市场却不能提供这么多的就业岗位，这也就导致了优胜劣汰是必然的，其实说到这也还好，毕竟哪一个行业又不是优胜劣汰呢？

但是，随着2022年ChatGPT的火爆彻底将人工智能的发展推向高潮，想必很多同学都用过这款AI工具来生成代码，其效率不言而喻，我们不难预见也许是五年后，也许是十年后，随着AI技术的迭代，底层程序员将被彻底替代。这绝不是危言耸听，大部分程序员的工作都只是重复写业务代码，这些对于AI来说只要训练到位，是完全可以替代的。

2.高考选择专业

对于很多高中生来说也许电脑都没摸过多少次，更别提学习编程了，就比如我，直到上大学我才知道NOI（高中生的信息竞赛），参与NOI的高中生往往从初中甚至小学就开始准备，到了高中进入校队参加NOIP省选，一等奖进入省队参加集训，然后参加NOI，如果获得金牌，甚至进入国家集训队，他们甚至可以保送清华北大。这就是我对于计算机专业的第一个核心观点——“信息差”。

我来举一个例子，小林在高中时期是一个很好学的学生，上课认真听讲，认真做笔记，高考也不负众望考的也十分理想，小林听说计算机专业毕业后十分赚钱，虽然小林在大学之前没有多少接触过计算机，但还是选择了这个专业，进入大学以后，小林依然刻苦努力，认真学习，包括专业课像Java程序设计，Cpp程序设计等，每次考试都取得了不错的成绩，一直到临近毕业，小林周围的朋友都拿到了大厂Offer，小林却连面试机会也没有，于是小林找到一位学长问这是为什么，为什么自己在大学期间每门课都考的很好却连面试机会都没有，学长笑了笑，给小林看了看他的简历，在大学期间，这位学长一共有三段实习，包括竞赛也是拿到手软，其中的ICPC小林甚至听都没听过。

学计算机永远不要只跟着学校里面的老师学，大部分老师甚至没有开发经验，对于企业上的一些常用技术，学校甚至不会教，比如学校可能会教你前端三件套(HTM,CSS,JavaScript)，当然，也许会教你老掉牙的Jquery，现在企业对于这套技术都已经不知道淘汰多久了。打破信息差，想要正式进入开发，就课下自己花时间去学习目前流行的技术。

3.竞赛与考证

对于大学生竞赛，大部分的比赛水分偏大，导致企业认可度也不高，比如位置比较尴尬的蓝桥杯，也叫“暴力杯”，打了就有奖，其实对于大学生竞赛我还是觉得有意义的，我在这两年期间也参加过许多比赛，也拿过很多奖，但大部分都是一些含金量不高的奖项，对于竞赛永远不要抱有我一定要拿奖的心态，比如ICPC，大部分参加ICPC的人可能高中时期就参加过NOI，甚至拿过牌，除非你自身天赋过人，否则想要在他们手中抢下牌子，无疑是非常难的，我比较认可的程序设计类除了ICPC还有CCPC和GPLT，其余比赛例如蓝桥杯，除非拿到国奖，否则写在简历中只会扣分，其他的比赛中电赛和华为ICT也是非常有含金量的，但是比赛是否能获奖，其实因素非常多，大部分比赛都是团队赛，除了你自身水平，还需要兼顾队友的水平。

计算机四级要不要考？这玩意对于计算机专业学生来说，没有啥用，倒是非计算机专业学生可能需要考，计算机专业更多参加的是软件等级考试，也是我们常说的软考，但其实软考的作用也不大，至少对于想要去私企的同学来说，对于事业单位，软考证书倒是可以评职称。

计算机考证书，如果是想走网络工程方向，那么首选就是考御三家的认证，分别是华为，新华三，还有思科，博主有新华三的SE证书，对于认证体系可能叫法不同，但是对于三家的最高认证都是IE，比如HCIE，H3CIE，另外想要考网络工程师认证不建议先考思科，思科目前在国内市场不大，首选华为。网络工程师认证只有一点不好，那就是贵。一套下来加上培训费估计得两万多吧。

如果想考研的同学，可以了解一下CCF认证，CCF是中国计算机学会，CCF认证在考研复试有些学学校是可以免去机试的，比如杭电对于CCF300分以上就有这个政策。还有PAT认证也是不错的选择，PAT在浙江那边认可度比较高，好像浙大复试可以免去机试（不记得是不是有这个规定）。

4.考研与就业

对于本科生来说，毕业以后无非就两个选择，考研继续读三年，或者直接就业，但不管是本科还是研究生阶段，最后大部分肯定都是出来就业的，能够去做研究的，不仅仅是自身需要极高的天赋，也要很好的资源。而且现在学历贬值也有点严重，讲个我在网上看到的案例，小林的本科阶段收到了腾讯，网易的Offer，但是为了考研他拒接了这些Offer，一直到研究生毕业，小林再去应聘，却再也没有收到腾讯和网易的Offer。出现这种情况，也研究生阶段的产出以及那一年的就业形势都有关，我的观点是如果能在本科阶段拿到一份大厂Offer，并且自身也没有搞学术研究的想法，还是果断润了吧。毕竟谁也不知道三年后是什么样的。所以一定要结合自身情况，不要盲目听从别人的想法，考研并不适合所有人。这就是我对于计算机专业的第二个核心观点——主观性。

并且现在计算机考研也是卷到飞起，例如11408上的三座大山——北大软微，中科大科软，浙大浙计，对于计算机考研人，这三座大山无疑是充满诱惑的，但是他的分数线也是一年比一年高。计算机考研你不仅要面对同专业的竞争对手，跨专业报考计算机的也是比比皆是。2024年科软初试第一高达452分，要知道考研总分也才500分，同时他的先进学院代号11408有一位410分的大神被刷，这位大神是文转计算机，考了四年，但是复试的时候就暴露了自己的专业水平，毕竟研究生招进去是做研究的，不是做题的。

5.学习方向与实习

关于计算机专业的学习方向我大致分为了三类，分别是研发岗，开发岗以及运维岗。

研发岗：算法工程师，云计算工程师，大数据工程师
开发岗：前端工程师，后端工程师，硬件工程师（嵌入式，单片机）
运维岗：测试工程师，网络工程师

研发岗对于学历门槛比较高，通常是双九硕士，例如算法工程师，大部分中小企业并没有这个岗位，也就是只有像腾讯，阿里等互联网大厂才需要算法工程师，平均40-50w年包是常态，对于双非的学生来说，大部分都是选择开发岗或者运维岗，就今年的就业行情来看，学前端比学后端更好进大厂一点，也许这是未来几年前端最好的一年了。

实习大致可以分为日常实习和暑期实习，主要区分在能否转正上，日常实习对于大几没有要求，如果技术够强，甚至可以在大一下暑假就去实习，暑期实习针对大三也就是下一届应届生，但是一般暑期实习的面试难度会更大。关于大几去实习，我的回答肯定是越早越好。但也不要光想着进大厂实习，有时候大厂实习可能没有选择中小厂学到的多。

6.寄语

很多同学刚刚学习计算机，可能会恐惧，会迷茫，这都是正常的，我比较喜欢翁恺老师的一句话“计算机都是人搞出来的，计算机里面没有黑魔法，也许我现在搞不明白，但是终有一天我会搞明白的。”

网易数智·一面

Sun, 09 Feb 2025 00:00:00 GMT

自我介绍
自己介绍一个深刻的项目（GitHub 自己写的项目）
- 可以分享一个具有挑战性或让你最有成就感的项目。说明项目的背景、技术栈、难点以及你在其中的贡献。
问实习（开发一个需求的流程，代码怎么开发到上线的）
- 项目的需求分析与设计。
- 开发阶段，如何实现需求，代码编写、测试等。
- 部署与上线，可能涉及 CI/CD 流程。
React useEffect 中设置一个 setTimeout 里面有一个变量能不能去修改？为什么？
- 这个变量是可以被修改的，但会受到 useEffect 中闭包的影响。setTimeout 是异步执行的，如果 useEffect 在 setTimeout 执行之前重新运行，闭包会捕获到旧的值。因此，变量的修改可能不会立即反映在 setTimeout 中。
React 除了 useState 还有哪些 hooks 可以设置状态变量？（useReducer）
- useReducer：通常用于复杂状态逻辑的管理，类似于 Redux 的 reducer。
- useState：适用于简单的状态管理。
React 子传父
- 子组件通过 props 将数据传递给父组件。父组件可以通过回调函数将数据传递到子组件。
Webpack 和 Vite 的区别
- 热更新：Vite 相较于 Webpack 具有更快的热更新速度，Vite 使用原生的 ES 模块加载，更高效。
- 打包方式：Webpack 是打包工具，Vite 是开发工具，Vite 通过开发时的 ES 模块实现即时更新，而 Webpack 需要先编译打包。
Webpack 的 loader 和 plugin 区别？用过哪些？
- Loader：用于转换源代码，比如将 ES6 转为 ES5，或将 SASS 转为 CSS。
- Plugin：用于打包时执行更复杂的任务，比如压缩文件、提取公共模块等。
- 用过的 Loader：babel-loader、css-loader、style-loader、file-loader。
- 用过的 Plugin：HtmlWebpackPlugin、MiniCssExtractPlugin、UglifyJsPlugin。
Webpack 怎么做的打包优化？
- 代码分割：通过 SplitChunksPlugin 将代码拆分成多个包，按需加载。
- 缓存优化：使用文件哈希（contenthash）来缓存文件，避免不必要的缓存失效。
- 压缩代码：使用 TerserPlugin 压缩 JavaScript，减少文件体积。
- Tree Shaking：删除无用代码，减少打包后的代码体积。
如果使用 Ant Design 组件库需要覆盖掉样式怎么做？
- 可以通过以下几种方式覆盖 Ant Design 样式：
  - 使用 style 属性进行局部覆盖。
  - 使用 CSS 覆盖（需要保证 CSS 的选择器优先级更高）。
  - 使用 @import 或 less 配置进行全局主题定制，覆盖 Ant Design 的默认主题。
  - 使用 CSS Modules 或 styled-components 定制特定组件的样式。

腾讯WXG·一面

Sun, 09 Feb 2025 00:00:00 GMT

手撕五道

括号匹配问题
给一个数组查看有没有重复值，要求算法复杂度 O(n)，空间复杂度不能为 O(n)
解决方法：可以利用位图（bitset）或者数值范围限制来做。
二叉树深度遍历求是否有一条路径为给定值
深度优先搜索（DFS），递归地遍历二叉树并累加路径上的节点值。
最长子序列
使用动态规划算法（例如 LCS 算法）来寻找最长递增子序列或最长公共子序列。
LRU（只有 set 和 get）
使用哈希表和双向链表实现，确保 O(1) 时间复杂度。

八股

浏览器缓存
浏览器缓存的主要作用是提高访问速度。常见的缓存机制包括 HTTP 缓存（如 Cache-Control）、本地存储（LocalStorage、SessionStorage）和服务工作者（Service Workers）。浏览器缓存分为强缓存和协商缓存，强缓存通过缓存的有效期控制，协商缓存则通过与服务器的对比来决定是否更新缓存。

反问

部门是做 toB 还是 toC？
部门作息时间？
例如 10:30 - 22:30。
多久会给反馈？
还有哪些需要学习的地方？

字节跳动抖音直播·一面

Sun, 09 Feb 2025 00:00:00 GMT

面试题

自我介绍
移动端做过哪些优化？
- 图片懒加载，减少不必要的图片加载。
- CSS 动画的硬件加速（使用 transform 和 opacity）。
- 合理使用缓存，减少网络请求。
- 使用 requestIdleCallback 来优化空闲时间的性能。
- 减少重绘和回流，避免频繁的 DOM 操作。
隐藏一个元素有哪些方法？有什么不同？
- display: none;：完全从页面中移除，页面布局会重新计算。
- visibility: hidden;：元素不可见，但仍占据空间。
- opacity: 0;：元素不可见，仍占据空间且可接收事件。
- position: absolute; left: -9999px;：将元素移出视口，不占据正常布局空间。
Sass是什么？和CSS比有什么优势？Sass是怎么编译成CSS的？
- Sass 是一个 CSS 预处理器，增加了变量、嵌套、混合等功能。
- 优势：
  - 支持变量，减少重复代码。
  - 支持嵌套，提升代码可读性。
  - 支持继承，避免冗余样式。
- 编译过程：Sass 文件通过 Sass 编译器（如 node-sass）转化为标准的 CSS 文件。
JS 是一门怎么样的语言？
- JS 是一门解释型的、基于事件驱动、非阻塞 I/O 的编程语言，广泛应用于 Web 开发，支持面向对象编程、函数式编程等。
说一下对闭包的理解
- 闭包是函数和声明该函数的词法作用域的组合。它使得函数能够记住并访问创建时的作用域，即使函数在外部被调用时，仍能访问到函数内的变量。
一个闭包的输出题
这里需要具体题目才能解答。
说一下异步编程有哪些解决方案
- 回调函数
- Promise
- Async/Await
- 事件驱动编程（Node.js 中的事件循环）
Promise.all 的实现口述，reject 的错误是什么
- Promise.all 会将多个 promise 按照给定顺序执行，返回一个新的 promise。
- 如果所有 promise 都成功，则返回结果数组；如果任何一个 promise 被拒绝，则直接 reject 并返回第一个错误。
浏览器打开一个 tab 的有哪些进程

浏览器主进程（负责 UI 渲染和管理浏览器的状态）
渲染进程（每个标签页会有一个渲染进程，用来渲染网页内容）
网络进程（负责 HTTP 请求和响应）
GPU 进程（用于图形渲染）

HTTP 的请求方法有哪些，详细讲一下

GET：请求资源，不带请求体。
POST：提交数据，通常带有请求体。
PUT：更新资源，带有请求体。
DELETE：删除资源。
PATCH：部分更新资源。
OPTIONS：查询支持的 HTTP 方法。

常见的状态码

200：请求成功。
301：永久重定向。
404：未找到资源。
500：服务器错误。

HTTP 有哪些版本，各有什么特性，HTTP2.0 的头部压缩怎么实现的

HTTP/1.x：每次请求和响应都建立独立连接。
HTTP/2：支持多路复用，减少延迟，头部压缩（使用 HPACK 编码）。

讲一下 HTTPS SSL 证书是怎么验证的

SSL 证书通过公钥和私钥对实现加密通信，浏览器验证证书的有效性（颁发机构、有效期、域名匹配）。

说一下 CDN 的作用和原理

CDN（内容分发网络）通过在全球布置多个缓存节点，将静态资源缓存到离用户更近的地方，提升加载速度和减轻服务器负担。

浏览器安全怎么保证的（记不清了，好像只说了一个密码加密），网络攻击有哪些，服务区攻击缓存

安全保障：加密传输（如 HTTPS）、跨域资源共享（CORS）、内容安全策略（CSP）等。
网络攻击：常见攻击包括 DDoS、SQL 注入、XSS、CSRF 等。
服务端缓存攻击：攻击者通过滥用缓存或缓存泄露来绕过安全控制。

用过哪些框架，为什么选择 React

用过 Vue、Angular 等，选择 React 因为它的组件化、单向数据流和灵活性，适用于构建大型应用。

讲一下 React（直接说 React 架构和 React 设计原理）

React 是一个声明式的、组件化的 JavaScript 库，用于构建 UI。
其核心概念包括：虚拟 DOM、组件生命周期、状态管理和 JSX。

React 16 中的时间切片是怎么实现的（requestIdleCallback），时间切片怎么存储的

React 16 引入时间切片以优化性能。利用 requestIdleCallback 在浏览器空闲时分配任务，时间切片通过调度器实现，存储为队列。

useState 怎么保证上个状态的

useState 是异步更新的，React 会合并更新队列，确保状态更新基于上一个状态。

hooks 使用有哪些限制

只能在函数组件或自定义 Hook 中使用。
不能在循环、条件语句中使用。

useMemo 和 useCallback 区别

useMemo 用于缓存计算结果，避免不必要的重复计算。
useCallback 用于缓存函数，避免在每次渲染时重新创建函数。

React 项目做过哪些优化

代码拆分，懒加载。
组件优化，使用 React.memo 和 useMemo。
路由懒加载。
性能监控与调试工具（如 React Profiler）。

SSR 的原理和优点，SSR 造成服务器压力怎么解决（讲了一下 RSC）

SSR（服务端渲染）是将 HTML 页面在服务器端渲染好，直接返回给客户端，提升 SEO 和首屏加载速度。
解决服务器压力可以使用静态生成（Static Generation）或增量静态再生（ISR）。

手撕题：给一个递增数组 [0,1,2,4,5,7,11,13,14] 输出成 ['0->2','4->5','7','11','13->14']

const arr = [0,1,2,4,5,7,11,13,14];
const result = [];
let start = arr[0];
for (let i = 1; i <= arr.length; i++) {
  if (arr[i] !== arr[i - 1] + 1) {
    if (start === arr[i - 1]) {
      result.push(`${start}`);
    } else {
      result.push(`${start}->${arr[i - 1]}`);
    }
    if (i < arr.length) start = arr[i];
  }
}
console.log(result);  // ['0->2', '4->5', '7', '11', '13->14']

反问

部门作息
部门是做 toB 还是 toC？
有没有需要提升的地方？

BiliBili·二面

Sun, 09 Feb 2025 00:00:00 GMT

浏览器从输入到显示页面的全过程
- DNS 解析：浏览器通过 DNS 解析域名，获得服务器的 IP 地址。
- TCP 连接：浏览器与服务器建立 TCP 连接（三次握手）。
- 发送 HTTP 请求：浏览器向服务器发送 HTTP 请求。
- 服务器处理请求并返回响应：服务器返回 HTML、CSS、JS 等文件。
- 浏览器解析并渲染：浏览器根据 HTML、CSS、JS 渲染页面，执行 JS 脚本，展示最终页面。
TCP 三次握手过程
- 第一次握手：客户端发送 SYN 包到服务器，表示客户端请求建立连接。
- 第二次握手：服务器收到 SYN 包后，返回一个 SYN-ACK 包，表示同意建立连接。
- 第三次握手：客户端收到 SYN-ACK 包后，再发送一个 ACK 包，连接建立成功。
为什么要 TCP 四次挥手
- 在数据传输完成后，双方需要各自确认关闭连接，确保数据完整传输。四次挥手可以避免未完全传输的数据丢失。
- 第一次和第二次挥手是主动关闭方请求关闭连接，第三次和第四次是被动关闭方确认关闭。
浏览器缓存策略
- 强缓存：Cache-Control、Expires 等控制缓存是否直接使用本地缓存。
- 协商缓存：Last-Modified、ETag 等用于比较本地缓存和服务器资源的有效性。
- 缓存控制方法：如 max-age、no-cache、private、public。
讲一下 HOC（高阶组件）
- HOC 是一个函数，它接受一个组件并返回一个新的组件。可以用来复用组件逻辑，比如权限控制、状态管理等。
- 例子：withAuth 高阶组件可以在组件加载时检查用户是否登录。
登录权限判断逻辑
- 前端路由控制：根据用户登录状态判断是否可以访问某些页面，未登录则跳转到登录页面。
- Token 验证：通过 LocalStorage 或 Cookie 存储登录凭证，在每次请求时通过 Header 发送 Token，后端验证 Token。
Token 为什么要存在 LocalStorage 而不是 Cookie
- LocalStorage：更易于使用，存储容量较大，不会随请求自动发送，减少 CSRF 攻击。
- Cookie：每次请求都会自动带上，容易受到 XSS 攻击，存储大小有限。
React 动态路由怎么实现的
- 使用 React Router 的 Route 和 Switch 配合状态管理动态添加路由。
- 根据不同的状态或权限条件，通过 useEffect 或路由守卫判断动态加载页面。
Suspense 的实现原理
- Suspense 让 React 组件在等待数据时可以挂起渲染，直到数据加载完成后再显示内容。
- 通过 React.lazy 实现动态加载，使用 Suspense 组件包裹懒加载的组件。
首屏加载优化做了哪些
- 代码拆分：使用 Webpack 或 React 的动态导入，实现首屏只加载必要的代码。
- 图片懒加载：非首屏的图片使用懒加载技术。
- CSS 和 JS 异步加载：确保不影响页面渲染。

手撕题

事件总线（eventBus）
- 创建一个事件管理中心，允许不同的模块或组件进行通信。
- 实现：使用一个对象存储所有事件的回调函数，提供 on、emit 和 off 方法来注册、触发和注销事件。

   class EventBus {
     constructor() {
       this.events = {};
     }

     on(event, callback) {
       if (!this.events[event]) {
         this.events[event] = [];
       }
       this.events[event].push(callback);
     }

     emit(event, data) {
       if (this.events[event]) {
         this.events[event].forEach(callback => callback(data));
       }
     }

     off(event, callback) {
       if (this.events[event]) {
         this.events[event] = this.events[event].filter(cb => cb !== callback);
       }
     }
   }

版本号排序
- 版本号通常由主版本号、次版本号和修订号组成。比较时逐个比较这些数字。

function compareVersion(version1, version2) {
  const v1 = version1.split('.');
  const v2 = version2.split('.');
  for (let i = 0; i < Math.max(v1.length, v2.length); i++) {
    const num1 = parseInt(v1[i] || '0');
    const num2 = parseInt(v2[i] || '0');
    if (num1 > num2) return 1;
    if (num1 < num2) return -1;
  }
  return 0;
}

版本号排序 plus（预发布版本）

function compareVersionWithPreRelease(version1, version2) {
  const v1 = version1.split('-');
  const v2 = version2.split('-');
  
  // 比较主版本号、次版本号和修订号
  let result = compareVersion(v1[0], v2[0]);
  if (result !== 0) return result;

  // 比较预发布版本
  const preRelease1 = v1[1] || '';
  const preRelease2 = v2[1] || '';
  if (preRelease1 === preRelease2) return 0;
  return preRelease1 < preRelease2 ? -1 : 1;
}