前端开发一面面经

一面

一来介绍了一下面试流程，然后开始基于项目进行提问

1.接口请求策略，网络请求+离线计算双模式，代码逻辑是什么样的？

2.追问，既然能本地算，为什么要走网络请求？

3.追问，如果网络请求拿不到，走本地计算会有什么后果吗？

4.简单介绍一下这个项目的背景吧？给谁用的？用来干什么？

5.第二个项目是给谁用的？

6.如果不小心在考试过程中刷新了页面，你是怎么保证倒计时不重置，以及考试状态不丢失？

7.答存本地，刷新之后在重新获取。面试官追问，要是把缓存清掉不就没了？再答，那应该是存在后端会比较好

8.SSE和WebSocket的本质区别是啥？

9.追问，那你为什么在对接deepseek的时候选择了SSE？实时聊天的时候选择了WebSocket？

10.追问，我还是有点奇怪，用WebSocket去处理聊天，会不会造成很大的浪费？如果长时间不发信息。

11.回答也许可以在长时间没有发送信息的时候，进行一个断开，重新发送信息的时候再连接。面试官追问，当时做这个立项的时候就没有考虑短连接么？这里有没有什么调研，或者参考吗？

12.你这里提到WebSocket实现心跳保活和指数退避指南机制，那什么叫做指数退避呢？

13.为什么要使用指数退避，而不是固定时间呢？

接下来聊前端基础的问题

14.一个css的问题，直接口述一下表现就行

15.答child2向下偏移200px，其他两个不变，追问为什么不会改变？

16.追问，这三个元素没有样式是怎么表现？

17.js的null和undefined来介绍一下

18.Null==undefined为什么是相等的？

19.接下来让我把这六个输出写一下

20.再给了一个微任务和宏任务的题，写输出顺序

21.Promise有几种状态

22.微任务和宏任务是为了解决什么问题？

23.常见的跨域有哪些方式？

24.CORS是什么意思？

25.如果要在代码里面使用CORS，正常操作要怎么写？

26.有没有用过Canvas？知道是用来干什么的吗？

27.你介绍一下对虚拟DOM的看法？

28.听你刚刚说虚拟DOM是性能比较好，那除了性能比较好，还有别的优势吗？

29.虚拟DOM在什么场景不适用？

30.Diff算法有了解吗？

31.追问，是怎么去diff的？

32.你说的方法是vue的还是react的？有看过它的源码吗？

33.写一个算法题

34.平时写代码写的多吗？

35.你知道map吗？我其实挺好奇为啥你这没有先想到用map？（已哭）

36.再写了一个算法

37.你这个解题方法是什么？

反问面试表现

面试官先问了我之前面试过什么公司，怎么之前没想过直接投大厂，再额外问了一个问题，平时用不用ai？又额外问了vibe coding和spa ccoding的区别

面试官给了一些建议，可以培养ai能力，再回答了我的问题。觉得基础还不错，但深度可能还不够，可以后面再累积，有一些点可以提升的，一个是在过去的项目里面，要理解整体项目的架构，想清楚项目的细节，面试给他的感觉是写js代码没有那么熟练，整体来说基础是比较好的，但是可能一开始没想到往这个方向去走，所以给他的感觉应该是学习比较优秀的一个人。

再问了一下，前端基础这些是在哪学的？是自己学，还是学校课堂上讲的？

再提了一个建议的点，在聊过往经历和项目的时候，有时候我没get到面试官在问什么，在说自己知道的，要好好想一下问的是什么

配图 1

<div class="parent">
    <div class="child1">child1 content</div>
    <div class="child2">child2 content</div>
    <div class="child3">child3 content</div>
</div>

.child2{
    transform: translateY(200px)
}

配图 2

console.log(Boolean(null));
console.log(Boolean(undefined));

console.log(Number(null));
console.log(Number(undefined));

console.log(String(null));
console.log(String(undefined));

配图 3

async function async1() {
    console.log('async1 start');
    await async2();
    console.log('async1 end');
}
async function async2() {
    console.log('async2');
}

console.log('script start');
setTimeout(function() {
    console.log('setTimeout');
}, 0);
async1();
new Promise(function(resolve) {
    console.log('promise1');
    resolve();
}).then(function() {
    console.log('promise2');
});

console.log('script end');

配图 4

统计一个字符串中出现最多的字母：给出一段英文连续的英文字母串，找出里面出现次数最多的字母。

输入：afjghdfraaaasdenas

输出：a

配图 5

跳跃游戏：给定一个非负整数数组，你最初位于数组的第一个位置。数组中的每个元素代表你在该位置可以跳跃的最大长度。判断你是否能够到达最后一个位置。

示例1：

输入：[2,3,1,1,4]

输出：true

解释：我们可以先跳1步，从位置0到达位置1，然后再从位置1跳3步到达最后一个位置。

示例2：

输入：[3,2,1,0,4]

输出：false

解释：无论怎样，你总会到达索引为3的位置。但是该位置的最大跳跃长度是0，所以你永远不可能到达最后一个位置。