关于其他的字节面试文章已经更新得差不多了,希望能够帮助到各位
字节面试题:webpack的loader和plugin有什么区别? - 掘金 (juejin.cn)
字节面试题:为什么vite更快 - 掘金 (juejin.cn)
手撕深拷贝?这一篇就够了! - 掘金 (juejin.cn)
前言:
在高铁站接到字节HR打来的电话时,我整个人都是蒙的,我当时的想法是:我?字节?我吗?HR小姐姐略带高冷的声音很快把我拉回了现实,问我什么时候可以面试,我回了个下周,于是面试就定在了周一。当时心想:一周的复习时间,应该差不多够了吧?抱着这种莫名自信的想法,和看了一周的面经以及基础八股(因为大家都说大厂考基础),我很快就迎来了自己的“挨打”时间。
正文:
视频会议接通的那一刻,我仿佛一下子就回到了当年的高考考场,真是紧张又刺激。反反复复念叨了好几次的自我介绍也说得磕磕巴巴。面试官的第一个问题是:从输入URL到出现页面都发生了什么?越详细越好。这个问题要是只有前半句的话,那简直就是往枪口上撞,妥妥的送分题,可以说是正中我的下怀。我之前写过一篇文章就是介绍这个大家有兴趣可以看看:总的来说就几个步骤:
-
检验URL是否合法
-
查看本地是否有该页面的缓存,有的话就不发送请求,否则发送(说这个纯属给我自己挖坑)
-
Dns解析ip地址
-
Tcp三次握手建立tcp链接
-
发送http请求
-
服务器响应数据
-
浏览器渲染页面
-
Tcp四次挥手断开连接
第一步没啥好说的,第二步纯属是八股文看来的,结果面试官一细问,我立马被按在地上摩擦。
面试官:你说会查看本地是否会有该页面的缓存,那请问页面的缓存是缓存在什么地方?
我: 呃...这个...这个没有详细了解过,所以...所以不是非常了解。
(面试官微微一笑)
正确答案:页面的缓存有以下三种情况:
-
浏览器缓存
-
代理服务器缓存
-
CDN(内容分发网络)缓存
通常情况下,第一种是用的最多的也是最常见的情况。浏览器缓存是最直接的一种缓存形式,浏览器会在用户的设备上(通常是硬盘或SSD)保存最近访问过的网页的部分或全部内容,包括HTML、CSS、JavaScript文件以及图片等资源。浏览器使用缓存可以显著提高加载速度,并减轻服务器的负担。
当浏览器需要确定是否使用缓存时,它会根据HTTP响应头中的缓存控制信息(如Cache-Control和Expires头)来决定缓存的有效期。如果缓存有效,浏览器将直接使用缓存的内容;如果缓存过期或者没有缓存,则会向服务器发送新的请求。这涉及到浏览器的强缓存与弱缓存的机制,我会单独出一篇文章详细给各位读者姥爷讲一讲。
需要注意的是,浏览器缓存并不是永久性的,它会根据设置的缓存策略自动更新或清除。此外,用户也可以手动清理浏览器缓存。
到这里,面试官的下马威算是给到了,如果说刚刚我还是个刚上战场的菜鸟新兵的话,那么此时此刻我已经被吓破胆的败军了。
面试官:那你详细讲一下session和cookie的区别吧
我:(说好的面试不会一直问不会的吗?这真不是在追着我打?)
其实说实话,这部分内容我是看过的,但可惜时间有点久远,而且还没复习,加上紧张得一批,脑子一团浆糊,各种debuff算是叠满了。慌不择路的我竟答成了sessionStorage和cookie的区别,但也只是擦到点边,完全没说明白关键点。不仅如此,这个问题在后来盛趣游戏的面试中也遇到了,所以我认为很有必要给各位看官讲清楚。
Session (服务器端)
定义:Session是一种服务器端技术,用于跟踪用户的会话状态。当用户与Web应用程序交互时,服务器会创建一个唯一的会话ID,并将其存储在服务器上。这个会话ID通常通过cookie发送给客户端,以便后续请求能够识别用户。
作用:维护用户的登录状态、购物车内容等信息。
生命周期:通常在一个用户会话期间持续有效,直到用户关闭浏览器或服务器端会话超时。
2. sessionStorage (客户端)
定义:sessionStorage是Web Storage API的一部分,用于在浏览器的一个会话(即从打开浏览器到关闭浏览器的期间)内存储数据。
-
作用:存储临时数据,如表单数据、用户偏好设置等。
-
应用场景:
-
表单数据暂存:当用户填写表单时,可以暂时保存数据以防意外丢失。
-
用户界面状态:保存用户界面的状态,如折叠菜单、滚动位置等。
-
游戏进度:在单个会话中保存游戏进度或分数。
-
-
生命周期:数据只在同一个窗口或标签页内共享,并且在窗口或标签页关闭后会被清除。
3. localStorage (客户端)
-
定义:localStorage同样是Web Storage API的一部分,用于持久性地存储数据。
-
作用:存储长期数据,如应用配置、用户设置等。
-
应用场景:
-
用户偏好设置:存储用户的偏好设置,如主题选择、字体大小等。
-
离线应用数据:对于离线可用的应用程序,可以将必要的数据存储在localStorage中。
-
缓存数据:缓存经常使用的数据,减少服务器请求,提高性能。
-
-
生命周期:除非被主动删除,否则会一直保留。
4. Cookies (客户端)
-
定义:Cookies是一种小型文本文件,用于在客户端和服务器之间传递信息。
-
作用:用于跟踪用户状态、实现身份验证等功能。
-
应用场景:
-
用户身份验证:保存用户的登录状态,例如记住用户名和密码。
-
会话管理:存储会话ID,用于服务器端跟踪用户会话。
-
个性化设置:保存用户的偏好设置,如主题选择、语言偏好等。
-
跟踪统计:收集用户行为数据,用于分析和改进网站。
-
-
生命周期:可以设置为会话级别(默认)或具有明确的过期时间。
-
大小限制:每个域名下的cookies总大小通常限制在4KB左右。
5. IndexedDB (客户端)****
-
定义:IndexedDB是一个低级API,提供了客户端侧的数据存储功能,支持复杂的结构化数据和事务处理。
-
作用:适用于需要更复杂数据结构的应用程序,如离线应用或需要大量数据存储的应用。
-
应用场景:
-
离线应用:存储大量数据,使得应用能够在离线状态下继续运行。
-
大型数据集:存储大量结构化的数据,如用户上传的照片、视频等。
-
实时应用:对于需要实时更新的应用程序,如聊天应用或协作编辑工具,可以利用IndexedDB来存储和同步数据。
-
-
生命周期:持久性存储,除非被显式删除。
在此之后,又问了一些类似于“webpack的loader和plugin的区别”,“为什么相比于webpack,vite的打包速度更快”“如果没有koa的cors,你该如何处理跨域问题”和“vue响应式原理”等问题。这部分的内容我会单独写,尽可能去讲清楚。
算法
大数字相加
问题:
大家都知道在js中数字的最大值不能超过2^53,但是某些情况下可能不得不去进行一些操作导致数字大于这个值,请问在这种情况下该怎么将他们相加(不允许使用bigInt类型)
解答:
这道题能做的前提是给出的参数必须是字符串类型,否则哪怕就是读取也会出错。之后的解题思路是先把短的数字补0,直到和长数字一样长,这样做的目的是为了方便后续的遍历。
之后就是从尾到头遍历两个字符串,并相加,把结果拼成字符串并返回。需要注意的是返回前检查进位是否还有数字,有的话需要加上去,我当时就忘了,多亏面试官提醒
function addLargeNumbers(num1, num2) {
let carry = 0; // 进位
let result = ""; // 结果字符串
// 获取最长的字符串长度
const maxLength = Math.max(num1.length, num2.length);
// 补零,确保两个数字字符串长度相同
num1 = num1.padStart(maxLength, "0");
num2 = num2.padStart(maxLength, "0");
// 从最低位开始逐位相加
for (let i = maxLength - 1; i >= 0; i--) {
let sum = parseInt(num1[i], 10) + parseInt(num2[i], 10) + carry;
carry = Math.floor(sum / 10); // 更新进位
result = (sum % 10) + result; // 添加到结果字符串
}
// 如果最后还有进位,需要添加到结果字符串开头
if (carry > 0) {
result = carry + result;
}
return result;
}
版本号排序
问题:
给你一个数组,每个元素都是字符串类型的版本号,需要把版本号从小到大排序后返回。需要注意的是,“1.45”指的是第一代的第45版,所以“1.8”要比“1.45”小(这么说来13.11确实比13.8更大了)。
解答:
这题的解题思路应该是有挺多的,我提供一个我使用的比较简单的方法,首先遍历给的数组,把每个元素拆分成一个数组,暂且称之为子数组,子数组的每个元素都是版本号的一位数,如图:
然后拿着父数组遍历。其实面试的时候只给了两个元素,但其实只需要把函数作为参数传给sort就可以对整个数组实现排序了,这里我给出一份完整的代码
function versionSort(arr) {
// 自定义比较函数
function compareVersions(a, b) {
const partsA = a.split(".").map(Number);
const partsB = b.split(".").map(Number);
// 比较每个部分
for (let i = 0; i < partsA.length; i++) {
if (partsA[i] !== partsB[i]) {
return partsA[i] - partsB[i];
}
}
// 如果所有部分都相等,则认为版本号相等
return 0;
}
// 使用自定义比较函数对数组进行排序
return arr.sort(compareVersions);
}
总结:
虽然此次面试肯定是没戏唱了,但也从中收获到了很多东西,最重要的一点就是让我看清了自己和一线大厂之间的差距,面试官说:“其实你的表现还是可以的,反应很快,但是你太紧张了,而且很多东西都只是用过,而不清楚具体的原理,这对于我们来说是不够的,在工作中,你用到的框架可能就是我或者某个同事做的,我们希望的是能够了解原理,理解这个地方为什么要这样写,这样你才能去把框架的功能完全发挥出来。而不仅仅是‘我用过’,我们更希望你能知其所以然”。
我相信有很多和我一样平时只在意coding的技能,xx功能怎么用代码实现,或则xx算法通过什么代码才能更快解出来
,而对于浏览器,工程化等问题不屑一顾,甚至觉得这不过是旁门左道,面试的时候或许不会问,但是实际上大厂对于网络,浏览器,工程化等内容有着极高的要求。反而对于一些代码方面的考的比较少,就算是考察这部分内容也会更倾向于框架源码或者“手撕promise”等问题。
至少在我的大厂面试经历中没有遇到过诸如于“如何把字符串变数组”或者“怎么让元素垂直水平居中”之类的问题。或许当我在高铁站接到面试通知电话的那一刻,已经默认我完全掌握了这部分内容了。
后续文章我也会尽快更新出来,希望大家能够从我的面试经历中汲取经验,也祝愿大家早日上岸!