2024-09 面试总结/复盘（四）一个五年前端，面试被问懵了，面试官最后都不想问了，赶紧结束了面试面试采用的是视频面

一个五年前端，面试被问懵了，面试官最后都不想问了，赶紧结束了面试

面试采用的是视频面试

自我介绍

巴拉巴了说了一些，大体是工作了几年，工作做过些什么内容，上家公司做了些什么...

项目介绍（要说最熟悉的项目）

xxx随访系统这个系统分为pc端和小程序端，有toB和toC两大块，toB的后台管理系统，主要为面向医院的，主要用户群里有医护人员和健管师，可以在系统中对患者进行一个管理，核心功能涉及患者档案管理，日程管理，管理计划设置，异常指标监控，在线沟通，等等小程序端也分为医护端和患者端，主要功能就是患者可以在小程序端进行日程的操作，查看宣教文章，消息提醒，随访表单提交，和医生进行一个在线沟通这样。这个系统的主要目的就是，方便医生为患者提供一个管理服务，提醒患者按时随访，按时用药，控制病情，也是帮助医院提高患者一个粘性和复诊率，从而提高医院方面的收入。

为什么最近一份工作这么短，离职原因（老生常谈）

因为我所在小组负责的项目刚好结束，后续也没有新的项目进来，老的项目回款周期慢，公司内部进行了业务重组，因为我们组的业务比较偏向定制化开发的一个方向，公司觉得这个方向不太适合公司的发展，想要做一些标准化相关的产品。所以我们组整体就被砍了。。。

两年多，为什么只有两年时间（老生常谈）

在原公司所负责的工作内容比较单一且重复性比较高，无法满足我个人的职业发展需求。我想找一个更有挑战性、并且更有成长空间的工作。（其实是快要发不出工资了）

做这个项目过程中比较有挑战的事情

方向错了，我回答业务中没遇到什么挑战，有些不懂得业务功能，通过学习也都能够解决。于是我就是了性能优化...结果就不不可控了。不应该去说vite的打包优化，因为实在没什么可说的。。。应该说说webpack的构建优化，打包优化。但是也不是什么很有挑战的内容。

我说到的性能优化... 然后就不可控制如果要说性能优化就要说清楚，说出个所以然

http缓存，涉及哪些请求头

Cache-Control // 控制缓存行为
- 它的值有private、public、no-cache、no-store、max-age、s-maxage等
  1. no-cache：表示客户端可以缓存资源，但是每次使用缓存资源之前，都需要向服务器发送请求，验证资源是否更新。
  2. no-store：表示不允许缓存资源。
  3. max-age：表示资源在客户端缓存的最大时间，单位是秒。
  4. s-maxage：表示资源在代理服务器缓存的最大时间，单位是秒。
  5. public：表示资源可以在客户端和代理服务器之间共享缓存。
  6. private：表示资源只能被单个用户缓存，不能被代理服务器缓存。
Expires // 资源过期时间，是一个HTTP日期，表示资源在服务器上的过期时间。缺点是，如果客户端和服务器的时钟不同步，那么这个时间可能会不准确。
Last-Modified // 资源最后修改时间，是一个HTTP日期，表示资源在服务器上的最后修改时间。
ETag // 资源的唯一标识符，是一个字符串，表示资源的版本号或者摘要。

处理gzip压缩，还有什么压缩方式

brotli？不知道是不是i这个，面试的时候有点印象，但是说不上来是哪个名字了。。。

if (compressList.includes('gzip')) {
  plugin.push(
    compression(),
  )
}
if (compressList.includes('brotli')) {
  plugin.push(
    compression({
      exclude: [/\.(br)$/, /\.(gz)$/],
      algorithm: 'brotliCompress',
    }),
  )
}

http code 400-404

400：客户端请求的语法错误，服务器无法理解，需要修改请求的内容后再次发送请求 401：请求要求用户的身份认证，比如token过期 403：服务器理解请求客户端的请求，但是拒绝执行，一般是权限问题 404：请求的资源不存在，服务器找不到请求的资源 405：一般是请求方式错误，比如请求一个get接口，但是用post请求

http code 500-505 代表的含义

500：服务器内部错误，无法完成请求 501：服务器不支持请求的功能，无法完成请求 502：作为网关或者代理工作的服务器尝试执行请求时，从上游服务器接收到无效的响应 503：由于临时的服务器维护或者过载，服务器当前无法处理请求

除了在vite中配置分包之外，还有其他的分包方式吗

没想过

代码不规范会导致页面加载慢

回答不上来

其他原因导致页面加载很慢

面试官问我有没有研究过，回答说没有...

vue中 watch props 和 onMounted 谁先执行

onMounted 先执行生命周期中 watch 是在 onMounted 之后执行的，而 onMounted 是在组件挂载之后执行的

vue3.0 有哪些生命周期钩子

onBeforeMount：在组件挂载之前调用。

onMounted：组件挂载之后调用。

onBeforeUpdate：在组件更新之前调用。

onUpdated：组件更新之后调用。

onBeforeUnmount：在组件卸载之前调用。

onUnmounted：组件卸载之后调用。

onActivated：在 keep-alive 组件激活时调用。

onDeactivated：在 keep-alive 组件停用时调用。

onErrorCaptured：当捕获一个来自子孙组件的错误时被调用。

定义了枚举之，想把key值提取出来并作为联合类型（也没回答上）

enum Status {
  Pending = 'pending',
  Success = 'success',
  Error = 'error',
}

type StatusKey = keyof typeof Status;

const status: StatusKey = 'Pending'; // 正确
const status2: StatusKey = 'pending'; // 错误

块级作用域，怎么实现的，他的原理，在一些浏览器支持es5 不支持es6，为什么（我没搞懂面试官，想要问的是什么）

事实上我回答的是：我只知道，通过let和const定义的变量，在定义之前是不可访问的，但是不知道具体的实现原理。。。

下面是我百度的答案，也不知道是否对题

块级作用域是通过词法环境（Lexical Environment）和词法绑定（Lexical Binding）来实现的。在ES6中，使用let和const关键字声明的变量和函数，它们的声明会被提升到块级作用域的顶部，而不是全局作用域的顶部。这意味着在块级作用域中，变量和函数的声明会被限制在块级作用域内，不会影响到块级作用域外的代码。

你有什么想问我的吗（看出来面试官，问不下去了，一问一个答不上来）

公司工作业务方向和工作内容是怎么样的
目前团队是怎么样的一个规模

以上就是本次面试的过程，最后也是草草了事，又浪费了一次宝贵的面试机会。

2024-09 面试总结/复盘（四）