八九月以来面了有十几家公司，是时候做些记录分享了。感觉这家公司的问题比较有意思，（杭州实在智能）和友友们分享一下，不是直接背八股，也不会太难，算是个不错的锻炼，面试官也是十分友好，会引导回答或者说明，在复盘中也可以更好的去理解面试官在考察什么

项目一：1.介绍项目功能和难点，这个问题直接pass，友友根据自己项目准备就行2.使用webworker与主线程通信传数据时，会有大量数据，同时数据反复传递的情况会造成消耗，要怎么优化？

使用结构化克隆算法的特性：Web Workers 通过postMessage传递数据时会使用结构化克隆算法。这意味着对于一些复杂对象（如数组或对象），传递的是副本而不是引用。在使用 Web Workers 时，postMessage 方法的第二个参数可以用来传递 Transferable Objects，如 ArrayBuffer 或其视图（例如 TypedArray）。通过这种方式，可以将数据的所有权从一个上下文转移到另一个上下文，而不需要复制数据。这可以显著减少数据传输的开销，提高性能。

3.webworker是否可以建立多个，创建千百个是否可以提高性能？假设是分片上传时，用两三个worker来处理？性能会更好吗？

每个Worker都是一个独立的线程，会占用一定的内存和CPU资源，因此，千百个肯定是性能低下，不切实际的。合理的使用数量取决于具体的应用场景和设备性能，比如某些浏览器对同时运行的Web Worker数量有限制（例如Chrome曾经限制为每个页面最多6个Dedicated Workers）。

对于分片上传，使用两三个Web Workers来处理确实可以提高性能，多个Worker可以并行处理不同的数据块，合理分配任务到多个Worker，也可以更好地利用多核CPU的优势。

总的来说，要根据实际需求和设备性能，选择合适的Worker数量，通常2-4个Worker是一个比较合理的范围，可以使用性能分析工具（如Chrome DevTools）监控CPU和内存使用情况，确保不会因为过多的Worker而导致性能下降，并且尽量均匀地分配任务到各个Worker，避免某些Worker过载而其他Worker闲置。

项目二：1:分片上传流程

前端操作的大致流程

读取本地文件，读成一个文件对象使用slice对文件进行切割，并得到Blob类型的文件对象将Blob类型的文件转成FormData表单类型对象对切片一个一个发送给后端

后端操作的一个大致流程：

接受前端传递的切片并解析得到数据保存切片到某个文件夹当接收到前端的合并请求后开始合并切片创建可写流，将所有的切片读成流类型并汇入到可写流中得到完整的文件资源2.分片上传如何校验文件完整性

在客户端计算整个文件的哈希值，并将该哈希值与分片一起发送到服务器,然后将文件分成多个分片，并为每个分片计算局部哈希值。再将每个分片及其局部哈希值上传到服务器，服务器接收每个分片及其局部哈希值，并进行校验。如果所有分片都通过校验，则将它们合并成完整的文件，并计算全局哈希值进行最终校验。

3.传分片对请求头有什么设置，分片范围大小之类的4.JWT与session区别

JWT无状态，适合分布式系统，每个服务都可以独立验证JWT，但是每次请求都需要解码和验证JWT，可能会增加CPU开销。此外需要妥善处理JWT的存储和传输，防止被盗取，并且天然支持跨域，只需设置CORS。

Session有状态，只需要查找Session ID，性能较好，适合单体应用或小型系统。此外Session数据存储在服务器端，相对较安全，但是需要额外配置才能支持跨域。

Vue1.vue3.5了解吗

这里推荐直接去看“前端欧阳”对3.5的总结文章：这应该是全网最详细的Vue3.5版本解读

2.V3相对于V2做了哪些改进3.ref,recative区别

主要在三个方面有不同：

当然，回答以上是不太够的，之前的面试经验中，面试官还会对.value属性和reactive为什么不能支持简单数据进行追。

关于.value的问题主要是因为在V3中处理响应式数据的方式有所不同，这导致了它们在使用上的差异

为什么reactive不能接受简单数据类型？

综上所述，ref 提供了一种通用的方式来创建响应式引用，能够适应所有类型的值，并通过 .value 提供统一的访问方式；而 reactive 更适合于处理复杂的状态对象，直接通过属性访问，但受限于Proxy的技术特点，它只作用于对象类型。

4.单例模式的ref：封装hook的话，在每一个组件使用时会生成一个新的ref，怎么用单例模式避免这种情况

在Vue中：

Vuex：如果应用的状态管理较为复杂，可以考虑使用Vuex来存储全局的引用。这样，所有组件都可以访问到同一个引用。Provide/Inject：Vue提供了provide和inject选项，允许父组件向其所有的子组件提供一个数据对象。你可以在根组件或任何高层级组件中定义并提供一个ref，然后在任意深度的子组件中注入这个ref。全局变量：虽然不是最佳实践，但可以将一个ref作为全局变量挂载到Vue原型上或者直接添加到window对象上。这种方式简单直接，但可能会导致代码难以维护。

在React中：

Context API：允许在组件树中传递数据，而无需手动逐层传递props，可以在顶层创建一个ref并通过Context Provider将其提供给整个应用中的任何组件。高阶组件（HOC） ：这个不常用，但可以通过创建一个高阶组件来包装组件，并在这个HOC内部管理ref，从而让多个组件共享同一个ref实例。

无论是Vue还是React，选择哪种方式取决于你的具体需求以及项目的架构。如果只是简单的引用共享，使用provide/inject或Context API通常是足够的；如果涉及到更复杂的逻辑，可能需要结合状态管理库（如Vuex或Redux）或其他高级特性来实现。

REACT1.常用的hooks

由于我跟面试官说我更熟悉vue，对react不太熟悉，所以对这些hooks没有太过深入的问，但根据其他人的面经，可能会问以下问题：

2.渲染列表时的key

这就要提到diff算法了，在diff算法中会进行新旧vnode的对比从而更新DOM节点，而在新旧vnode的diff过程中，key是判断两个节点是否为同一节点的首要条件，设置key的可以在diff中更快速的找到对应节点，提高diff速度，有key存在时我们可以通过map映射快速定位到对应的oldVnode然后进行patch，没有key值时我们需要遍历这个oldCh数组然后去一一进行比较，相比之下肯定是key存在时diff更高效。

这里会涉及到两个问题：key为什么不能是index？可不可以用随机数做key?

3.react和vue中的diff算法的相较于之前版本的改进

React 的 Diff 算法改进

早期版本

O(n^3) 复杂度：最初的算法在最坏情况下可能达到 O(n^3) 的时间复杂度，这在大型应用中会导致性能问题。

后续改进

Vue 的 Diff 算法改进

早期版本

后续改进

4.vue和react的异同

1.模板语法: vue 使用类似于 HTML的模板语法，例如:标签中的模板。React 使用 JSX(JavaScript XML),它是一种将 HTML直接嵌入到JavaScript 代码中的语法。它和Java中的xml十分类似

2.组件通信: vue中 props(父子组件通信)、emit(子父组件通信)、attrs/slisteners(特性和事件继承)、vuex/Pinia(用于大型应用中的状态管理)等。在 React 中，组件间的通信主要依赖于 props和 context，但对于更复杂的应用，可以使用 Redux 或其他状态管理库。

3.生命周期： Vue组件有自己的生命周期钩子，如created、mounted、updated、destroyed等，用于在组件生命周期的不同阶段执行代码。React 组件也有生命周期方法，如componentDidMount、componentDidUpdate、componentWillUnmount等，但在React 16.3 版本后，一些生命周期方法已被标记为过时，推荐使用新的生命周期方法或 React Hooks。

4.diff算法：

Vue 的 diff 算法

5.不同的监听方式：

早期的vue与React

不同的解决方式

5.MVVM框架特征其他问题为什么vite会更快

Vite 相比于 Webpack 之所以构建快是因为，Vite 借助新版本浏览器可以读懂模块化语法的特点，将项目中的模块化引入统一以一个又一个http请求的方式响应给浏览器，这样做的好处就是省去了 Webpack 构建过程中递归做依赖收集的耗时步骤，又因为Vite是开发环境的工具，绝大多数情况下我们不用不考虑兼容性。（具体可以查看这篇文章面试官：”Vite为什么快？“）

剩下的是一些面试官围绕个人简历上的技术栈和回答情况进行的一些题问，友友们可以参考一下，没有固定答案，根据自身情况回答