9 月的第二家面试，是一家做 sass 系统的公司，约的是上午 10 点钟的面试。
进公司后，hr 让我去一个会议室等候，一直等候了 6 分钟左右吧，面试官拿着电脑走了进来，坐下。然后开口说话：
我对两个方面比较感兴趣
你做过业务比较复杂，业务比较复杂的，你可以深入给我介绍一下。
第二就是，在工程化或者对源码有一定的了解，展开给我介绍一下。
他的话说出来之后，我就知道面试已经结束了，因为事先并没有准备，之前做过的项目，大多都是一些常规的管理系统，小程序，h5，也没有深入学习过工程化或者源码相关的一些知识。
9 月第三家，是一家做海外棋牌游戏的公司，
进公司先填一份两页的表，填写基本信息，以及答题。。。总共花了我 10 多分钟
然后就一位可能是做前端的面试官，拉我进一个会议室一对一面试
问的都是一些八股文相关的问题，面试官比较随和，聊得也还可以,下面是问到的一些问题
自我介绍
上一家的离职原因
回答是被裁员
项目主要负责的占比是多少
回答占了 70-80%
有用到 ts 吗，你觉得项目中 ts 的规范，或者文件规范怎么规定
有些模糊，还好面试官给了个方向，回答不太清楚，
一般来说可以按模块统一归纳，比方说将 interface 的定义放到一个单独的文件夹，按各个模块，编写到对应的 ts 文件中，并导出这些 interface。
你对 vue2,vue3 有什么区别
从几个方面来说：
-
响应式原理不同，vue3 使用 es6 新增的 proxy 方法，vue2 使用 object.definepropiety,想必 vue2 的实现，vue3 性能要更好，并且能够监听对象属性的新增和删除，数组下标的修改。
-
生命周期的不同，vue3 使用 setup 函数替代了 vue2 的 beforeCreated 和 created 阶段，使用 onBeforeunmount，onUnmounted 替代了 beforeDestryed,destroyed。并在一些生命周期名称之前增加 On
-
vue3 采用组合式 api, vue2 采用 options api , 组合式 api 带来的好处是：
- 可以更好的组织代码，增强代码可读性，
- 更好的逻辑复用，
- TS 支持更友好，
- 按需引入，减少冗余代码
-
vue3 使用 hooks 替代了 vue2 的 mixins, 删除了一些方法，如 filter, minxs
-
虚拟 DOM 和 Diff 算法
Vue3 在虚拟 DOM 上进行了优化，引入了 patchFlag 字段，帮助区分静态节点和不同类型的动态节点，减少了不必要的 DOM 操作。 -
其他的比如，Teleport，多根节点支持
vue3 中的 ref 和 reactive
在使用方法上，ref 定义的变量通常使用.value 进行取值和赋值，ref 可以定义基本类型和引用类型数据，react 只能定义对象类型
原理上，ref 的实现是返回了一个 RefImpl 类，其内部定义类 get value 和 set value 方法，所以使用时，需要.value, 这个类中还判断了 数据类型，如实数据类型是对象类型，则返回 使用 reactive 进行处理。
在 vue3 中定义一个对象，对这个对象结构的话，是否还具有响应式呢，为什么？
不能，因为解构的话，相当于去重新定义变量，这个变量既没有使用 ref 也没有使用 reactive，所以不具有响应性。
比如说在组件传递了一个 props，通过解构，将属性提出了，是否还具备响应式
不具备，同上
pinia,是用 setup 的写法还是 option 写法
这个问题没有反应过来，其实面试官是想问，是用组合式写法还是选项式写法定义 store 其实我们项目中 组合式和选项式都有使用过
nextTick 是做什么的，知道它底层吗？
获取 dom 时使用，一般是数据更新后，获取最新的 dom，或者初始化渲染时，确保 dom 已经加载完成。 nextTick 的核心是利用了如 Promise、MutationObserver、setImmediate、setTimeout 等原生 JavaScript 方法来模拟对应的微/宏任务的实现，本质是为了利用 JavaScript 的这些异步回调任务队列来实现 Vue 框架中自己的异步回调队列。
平时在项目中的使用场景
比方说在使用 echart 绘制图表，需要先获取到 dom,在进行操作，就会放到 nextick 中。 比方说对 elementui 的表格进行一些选中操作，也会用到
项目有线上沟通，信息群发，怎么实现的
项目中使用的技术是 websocket
websocket 怎么用的
封装 websocket 工具，在需要使用的地方应用，并初始化创建 socket 连接，在回调函数中，对数据进行处理，websocket 包含
你觉得 websocket 和 http 有什么区别吗
-
含义不同
websocket 是一种在单个 TCP 连接上进行全双工通信的协议
http：超文本传输协议，是一个简单的请求-响应协议，它通常运行在 TCP 上，是单向的通信协议
-
连接方式不同
websocket 是需要浏览器和服务器握手进行建立连接的
http：是浏览器发起向服务器的连接，服务器预先并不知道这个连接
-
连接长度不同
websocket：是持久连接
http：http 是短连接（http 是可以通过 Ajax 一直发送请求和长轮循保持一段时间内的连接），但本质上还是短连接
-
连接状态不同
websocket 是有状态的双向连接
http：http 对应的是 http / https
-
相同点：
都是基于 TCP 协议
websocket 是基于 http 的，他们的兼容性都很好
在连接的建立过程中，对错误的处理方式相同
都使用 Request/Response 模型进行连接的建立
都可以在网络中传输数据
websocket 会提供一些方法，能具体说说吗
WebSocket.send() 方法用于向服务器发送数据。它接受一个参数，表示要发送的数据。数据可以是字符串、Blob 对象或 ArrayBuffer 对象
ws.send('Hello, server!')
WebSocket.onopen 事件在 WebSocket 连接成功建立时触发
ws.onopen = function() {
console.log('WebSocket 连接已经建立。');
};)
WebSocket.onmessage 事件在接收到服务器发送的消息时触发。它的 event 对象包含一个 data 属性，表示接收到的数据。
ws.onmessage = function (event) {
console.log('收到服务器消息：', event.data)
}
WebSocket.onerror 事件在 WebSocket 连接出现错误时触发
ws.onerror = function (event) {
console.error('WebSocket 连接出现错误：', event)
}
WebSocket.onclose 事件在 WebSocket 连接被关闭时触发.
ws.onclose = function () {
console.log('WebSocket 连接已经关闭。')
}
readyState 四个值 0-3，有了解吗
connecting (0)：表示还没建立连接；
open (1)： 已经建立连接，可以进行通讯；
closing (2)：通过关闭握手，正在关闭连接；
closed (3)：连接已经关闭或无法打开；
websocket 的状态是只读的，无法修改。
做过心跳检测吗
一般来说封装 websocket 都需要心跳检测，为了保持连接一直持续，通常服务端会对在一定时间内没有通讯的 websockt 服务，进行断连，所以我们设计心跳检测的时间要比这个时间要短。 心跳检测可以在前端来做，也可以在后端来做，客户端原理就是定时发送一个空包或者内容较少的信息，服务端在收到信息后，进行一个回复，这个样就可以一直保持连接的新鲜度。
如果断开网络，怎么处理?
一般短时间的断开网络，通过心跳机制，设置一个最大重连次数，可以将服务重新回复。如断网时间比较长，一般通过监听 offline 和 online 在 online 方法中重新进行连接。
js 的原型和原型链你是怎么理解
每个实例化出来的对象都有其原型属性proto,只想其构造函数或者类的 prototype，通常在访问该对象的某个属性或者方法是，如果对象中没有该属性或方法，js 就会去他的原型对象中查找，找到就执行，否则就返回 null。这种层层向上查找的方式，就被称之为原型链。 原型链的作用和优势在于：
- 提高代码的复用性（避免重复创建和占用内存），
- 提高代码的性能，避免重复定义和创建对象，减少内存占用和执行时间
- 实现继承机制，减少重复的代码
es6 的 Class 有使用过吗，怎么使用
Class 知识拓展：详解 ES6 中的 Class
Class 的 静态属性
不需要 new 就可以拿到的属性, 例如
class Animal {
static height
static name
static say() {
console.log(`Animal say`)
}
}
Animals.height
Animals.say()
es6 promise 介绍一下
then 有几个属性，参数
promise 有几个状态
本身是同步还是异步的
then,catch 是异步的吧，是宏任务还是微任务
浏览器的 http 请求，强缓存和协商缓存
强缓存：强制缓存网站资源，后续访问不再向服务器发起请求。初次请求，会在请求头的 cach-control 中携带缓存时间 max-age: --, 后续访问该资源，如果没有超过这个时间，则直接从缓存中读取。
http 1.0 中使用的时 Expires ，在这个时间范围内，则直接从缓存中读取，但是该字段读取的是客户端本地的时间，而本地时间是可以修改的，所以会对缓存产生影响。
协商缓存: cach-control 设置 no-cach 时，使用的时协商缓存，浏览器每次都要向服务器发起请求，如果命中协商缓存，则返回 304 状态码，告诉浏览器，资源没有发生变动，浏览器可以复用之前的资源。 http1.1 中使用的字段是响应头 ETag 和 请求头 If-None-Match，文件 hash 值 http1.0 中使用的字段是 响应头 Last-Modified 和 请求头 If-Modified-Since ，文件修改时间
开启缓存的优势在于，减少网页加载时间。因为 http 请求是比较耗时的，开启缓存可以有效降低 二次请求的响应时间，，
302 状态码是什么。。。
是重定向...
第一位面试官面完
面试官讲了一下，这家公司的情况，其实面试过程中，回答的并不好，很多问题回答的不清晰，不完整。但是结束，面试官还是很热情的和我说明公司的情况，我觉得还是比较好的一位面试官。沟通完之后，面试官说去叫项目负责人来再沟通一下。
第二位面试官
后面这位项目负责人一个人进来了，看起来就是一副很严肃的面孔，我一看到他的脸就心生惬意，说话的声音都变小了。 这位负责人也是问了我几个问题。
技术栈这边 react 和 svelte 有了解过吗（这家公司业务用到 qiankun,技术栈可能 vue,react,svelte 都涉及）
interface 和 type 有什么区别吗
有没有必须要使用 type 或者必须要使用 interface 的场景
在 TypeScript 中为什么应该使用 Type 而不是 Interface
用的时候，都是基于什么考量的
当我们能用 type 实现 interface 的所有功能，并且方式更优雅，而且还具备 interface 不能实现的功能时，我们应该毫不犹豫选择使用 type 而不是 interface，毕竟我们用的是 TypeScript 而不是 InterfaceScript 但是：Interface 能干的，Type 也能。表面上是达到目的，只是写法有差异，实际上可能造成语义错误、难维护
声明上有什么区别吗，有什么机制吗
Interface 支持同名拓展，但是相同属性，不同类型会报错，type 无法重复声明， type 带来的问题就是类型体操
toB 和 toC 对于前端来说有什么区别吗
只是面向的群体不一样，对前端而言，有什么不一样
TO C 的团队，用户量增长会很快，然后运营活动会偏多，页面改版频繁，其实这些事情做起来多少有些繁琐，而且一般加班比较严重，工作重复度也很高，每天做兼容，做活动，或者是做各种促销模块。好处是可以面向大用户量开发，对性能优化应该深有体会。
而 TO B 的团队，用户稳增，但是系统逻辑通常较重，所以对 JS 要求较高，事实上我们团队的人大部分时间都是在写 js 逻辑，然后加班少，产品主导而不是运营主导，需求都需要经过团队价值树的考验才能开始开发，而不是说干就干，团队有时间沉淀一些技术方面的积累。产品类型管理系统或大屏系统居多。
做过小游戏，或者动画方面的东西吗
没做过~~ 面试官唉声叹气~~~
