苦尽甘来,下一站,上岸(船)

前端下午茶

共 5251字,需浏览 11分钟

 ·

2024-05-28 07:51

作者:金色的暴发户
原文:https://juejin.cn/post/7363556508604219404

已经很久没有写文章了,上一篇文章还是海马体的面经,上次面完海马体之后就开启了我的闭关之旅,在这一个多月的闭关时间里一共面了两家公司,一个是百度,还有一个是字节,百度和字节的面试时间非常相近,都是相邻的两天,但是最终还是以字节为主,准备的也是字节的面经,中途顺便面了一下百度,百度也面了二面,但是最后还是去了字节。

微信图片_20240503212701.png

作为一个双非的大三学生来说,这个offer已经是顶天了,相当于考研上了c9,于我而言,这既是偶然性同样也是必然性,在这一个月里,每天早八晚十,除了吃饭睡觉,其余时间都在看面经和之前自己整理的所有知识点,牛客网上的面经已经从四月份看到了去年的十二月份,许多文章上面的考题和知识点也过了一遍。我老师说进大厂是具有偶然性的,是需要运气的,但我觉得很多的偶然其实是具有必然性的。我每天躺在床上也都在看别人写的文章,看完刷十几分钟手机再睡觉,这样的生活持续了一个月,在字节面试的前三天更是加大强度,每天晚上看到凌晨一两点才睡觉,甚至有一次在班上趴桌子上睡了一个晚上。看上去这次的成功是一次偶然,因为面试官比较和蔼,问的也不难,但从另一个角度去看,这是我努力后的必然结果,否则面试官就算问的再简单也不见得就能答上来。

具体的面试题我也记不全,有些忘了,本来是三轮技术面和一轮hr面,可能前两轮面评比较好,上午刚约好28号三面下午就打电话来说三面不用了,直接换成第二天hr面。

我尽量直接放别人的文章作为面经的答案,因为我回答的所有答案都是别人文章里看来的,而且别人总结的也会比我更全面一些。

一面

一面所有的题目都是从我的项目里衍生出来的,大厂不像小厂一样直接问八股,而是从你的项目里找知识点,看看你对自己项目的掌握程度以及对项目里所运用到的知识点的掌握程度。

聊聊你最熟悉的大模型

因为在自我介绍和简历里都提到了AI大模型的使用,AI也是大势所趋,技术是一直在不断迭代更新的,所以面试官也对我的这个AI使用的经历比较感兴趣,我这个部门也是做AI智能业务的,所以问了这个问题。因为我寒假学了些langchain,所以就把langchain说了一下,具体的可以看wtf学院GitHub开源课程的readme部分,这个项目我也做了constructor,指出了一些版本回退和模型弃用的问题。
GitHub - sugarforever/wtf-langchain[1]

跨域

前端跨域问题解决方案(基于node与nginx)[2]

webpack和vite

面试官:”Vite为什么快?“ - 掘金 (juejin.cn)[3]

vue的生命周期

这已经是个老生常谈的问题了,我就不写了,里面还问了一个setup是在vue实例化之前还是实例化之后执行的,我就直接放图了。

微信图片_20240503220624.png

jwt鉴权和token验证

JWT | 一分钟掌握JWT | 概念及实例[4]

代码题

考了一个数组扁平化有效括号匹配,这个力扣上都有我就不写了

二面

二面是部门交叉面,晚上八点面试的,问的也不难,但是题目也忘得差不多了

为什么在vue里数组有时候响应式监听不了

这里就需要你去了解vue2的响应式原理了,文章的第21、22、28和29题有答案
「自我检验」熬夜总结50个Vue知识点,全都会你就是神!!![5]
这里我顺便说了一下在vue3里不会出现这样的问题,因为vue3的响应式是用proxy实现的

文件的断点下载

断点下载与断点续传类似,但是是在文件下载过程中实现中断后恢复下载。以下是实现断点下载的一般步骤:

  1. 请求文件信息:在开始下载文件之前,首先请求文件的元数据信息,如文件大小等。

  2. 设置请求头:在发起文件下载请求时,设置请求头 Range,指定需要下载的文件范围。例如,Range: bytes=0-499 表示下载文件的第 500 字节之前的内容。

  3. 接收部分内容:服务器会返回指定范围的文件内容,前端接收并保存这部分内容。

  4. 记录下载状态:记录已下载的文件范围,以便在中断后能够恢复下载状态。

  5. 恢复下载:如果下载中断,用户可以选择继续下载文件。前端根据记录的下载状态,请求剩余部分的文件内容,并继续保存。

  6. 合并文件:在所有部分下载完成后,前端可以将这些部分文件内容合并成完整的文件。

断点下载技术可以提高大文件下载的稳定性和用户体验,特别是在网络不稳定或下载大文件时。在实际开发中,可以根据需要选择合适的库或工具来简化断点下载的实现,例如使用 Axios 库来发送带有 Range 头的请求,或者使用专门的断点下载库来处理文件的分片下载和合并。

如何实现吸顶

我最开始说的是可以直接设置positionstacky,就可以实现粘性定位,然后面试官说用原生的js要怎么实现,我说可以监听滚动事件,当元素到达屏幕顶部的时候给它设置固定定位,面试官说这个方法也行

js
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>吸顶效果</title>
<style>
  .sticky {
    background-color: #f1f1f1; /* 吸顶时的背景颜色 */
    padding: 10px;
    font-size: 20px;
  }
</style>
</head>
<body>

<p>这是一些文本,用来模拟页面滚动效果。</p>

<div id="stickyElement" class="sticky">我会在滚动时吸顶</div>

<p>这是更多的文本,用来撑长页面。</p>

<script>
// 获取需要吸顶的元素
var stickyElement = document.getElementById('stickyElement');

// 获取元素初始位置
var stickyElementTop = stickyElement.offsetTop;

// 监听页面滚动事件
window.onscroll = function() {
  // 如果滚动位置超过了元素初始位置,则将元素定位设为 fixed
  if (window.pageYOffset >= stickyElementTop) {
    stickyElement.style.position = 'fixed';
    stickyElement.style.top = '0';
  } else {
    // 否则恢复元素的初始定位
    stickyElement.style.position = 'static';
  }
};
</script>

</body>
</html>

现在让你实现一个滚动列表的组件,你会考虑哪些东西

我从性能优化和用户体验两个角度去说的,我假设这个列表也包含图片,所以性能优化说了图片懒加载和事件委托,用户体验说了下拉刷新和上拉加载

下拉刷新和上拉加载怎么实现

手把手教学:Vue下拉刷新、上拉加载组件插件(超详细)[6]

最近有没有在学其它的技术

我说最近在学react,然后把学的一些心得和问题告诉了面试官,然后还玩了点AI的一些模型,把里面的一些疑问告诉了面试官,面试官很开心的给我解答然后跟我交流,整个面试体验非常好

代码题

一个场景题,求两个数组的交集和并集,然后问我优化方法

结语

金三银四已经结束了,过程很累很辛苦,但是结果是满意的,可能节后会有一波春招补录,还没有心仪offer的五一闭个关,争取节后拿下

参考资料
[1]

https://github.com/sugarforever/wtf-langchain: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fsugarforever%2Fwtf-langchain

[2]

https://juejin.cn/post/6844903758409760775?searchId=20240503215754E3920962C487F8780C56: https://juejin.cn/post/6844903758409760775?searchId=20240503215754E3920962C487F8780C56

[3]

https://juejin.cn/post/7280747221510144054: https://juejin.cn/post/7280747221510144054

[4]

https://juejin.cn/post/7232550589964140602?searchId=20240503221006D24BD5B7368ABF6F88F5: https://juejin.cn/post/7232550589964140602?searchId=20240503221006D24BD5B7368ABF6F88F5

[5]

https://juejin.cn/post/6984210440276410399#heading-32: https://juejin.cn/post/6984210440276410399#heading-32

[6]

https://juejin.cn/post/6883373475843538951?searchId=20240503222822615153B09C38BB7221AF: https://juejin.cn/post/6883373475843538951?searchId=20240503222822615153B09C38BB7221AF

最后

如果你觉得这篇内容对你挺有启发,我想邀请你帮我个小忙:

  1. 点个「喜欢」或「在看」,让更多的人也能看到这篇内容

  2. 我组建了个氛围非常好的前端群,里面有很多前端小伙伴,欢迎加我微信「sherlocked_93」拉你加群,一起交流和学习

  3. 关注公众号「前端下午茶」,持续为你推送精选好文,也可以加我为好友,随时聊骚。

点个喜欢支持我吧,在看就更好了


浏览 44
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报