​W​i​n​d​一​面​

1. 自我介绍

2. 项目介绍

甲方、figma、增删改查、业务

• 项目难点：webpack迁移到vite

1. 配置文件差异：
   • 问题：webpack和vite的配置文件结构和选项存在显著差异。
   • 解决方案：仔细阅读vite的官方文档，了解vite的配置选项和方式。将webpack的配置项逐一对照vite的配置项，进行迁移和调整。
2. 代码组织**（js->jsx）**：
   • 问题：webpack项目中的代码组织方式可能与vite不兼容，如使用了webpack特定的loader或plugin。
   • 解决方案：评估项目中的代码组织方式，去除webpack特有的loader或plugin，并寻找vite中相应的替代方案。调整代码结构，使其符合vite的规范。
3. 插件和加载器：
   • 问题：webpack项目中可能使用了大量的插件和加载器，而vite可能不支持这些插件或加载器。
   • 解决方案：查找vite中是否有替代的插件或加载器，或者评估是否可以通过其他方式实现相同的功能。对于无法替代的插件或加载器，可能需要重构代码以去除对其的依赖。
   • 补充：ESlint、TypeScript
4. 环境变量处理：
   • 问题：webpack通过DefinePlugin在编译时注入环境变量，而vite的处理方式可能不同。
   • 解决方案：了解vite如何处理环境变量，如通过.env文件或import.meta.env来获取环境变量。调整项目中的环境变量处理方式，使其与vite兼容。
5. 构建和打包：
   • 问题：webpack和vite在构建和打包方面的差异可能导致迁移过程中的问题。
   • 解决方案：确保理解vite的构建和打包机制，包括其缓存策略、输出目录等。调整webpack的构建和打包配置，使其与vite相匹配。
6. 路径和别名：
   • 问题：webpack中的路径和别名配置在vite中可能无法直接使用。
   • 解决方案：在vite中重新配置路径和别名，确保它们能够正确解析项目中的文件路径。
7. 浏览器兼容性：
   • 问题：vite可能默认使用更现代的JavaScript特性，导致在某些旧浏览器上的兼容性问题。
   • 解决方案：使用Babel等工具进行代码转换，以确保项目在不同浏览器上的兼容性。同时，注意vite的配置选项，以确保它正确地处理浏览器兼容性问题。

补充：svg引入（小文件嵌入JS）、cdn

• 项目是怎么测试的？

甲方提供测试用例，没有测试框架（单元测试）

3.说说你对敏捷开发的看法

敏捷开发是一种以人为核心、迭代、循序渐进的软件开发方法。相比传统的瀑布式开发模式，敏捷开发具有以下几个显著优点：

1. 快速响应变化：敏捷开发注重灵活性和适应性，能够迅速响应项目需求和市场变化。在开发过程中，团队可以根据实际情况及时调整开发计划和方向，减少因需求变更带来的风险和成本。
2. 高效的团队协作：敏捷开发强调团队成员间的紧密协作和沟通，通过定期的会议、评审和反馈机制，促进信息共享和问题解决。这种协作方式有助于提升团队士气，增强团队凝聚力。
3. 持续交付价值：敏捷开发采用迭代式开发方式，每个迭代周期都会交付一部分可用的软件产品，使客户能够更早地看到产品成果并提供反馈。这种方式有助于降低项目风险，提高客户满意度。
4. 注重质量和可靠性：敏捷开发强调在开发过程中进行持续的质量检查和测试，确保软件产品的可靠性和稳定性。同时，通过及时反馈和修正，可以有效减少软件缺陷和错误。

敏捷开发适合以下应用场景：

1. 需求变化频繁的项目：对于需求不明确或频繁变更的项目，敏捷开发能够迅速响应并调整开发计划，降低项目风险。
2. 创新性强的项目：对于需要不断探索和尝试新想法、新技术的项目，敏捷开发能够提供快速迭代和反馈的机制，促进创新成果的产出。
3. 跨职能团队协作的项目：敏捷开发强调团队成员间的协作和沟通，适合跨职能团队共同完成项目，如产品经理、设计师、开发人员和测试人员等。

4.数据结构拷打

1.学过哪些数据结构

数组、线性表、链表、（树）二叉树、图、查找、排序

事后诸葛亮：哈希表

2. 数组和链表的区别？分别适合于哪些应用场景？

数组和链表在多个方面存在显著的区别，这些区别决定了它们各自适合的应用场景。

首先，从存储空间的角度来看，数组是一种顺序存储结构，它需要一块连续的内存空间来存放数据。这意味着在创建数组时，我们需要预先指定其大小，如果预分配的空间不足或过多，都可能导致内存浪费或不足。而链表则采用链式存储结构，它不需要连续的内存空间，而是通过指针将一系列零散的内存块串联起来。因此，链表在创建时无需指定大小，可以根据需要动态地增加或减少节点。

其次，访问速度方面，数组支持随机访问，我们可以通过下标直接访问任意位置的元素。这是因为数组是连续存储的，所以可以通过首地址和偏移量快速地计算出元素的地址。然而，链表在访问元素时通常需要从头节点开始顺序查找，因此其访问速度相对较慢。

在增删效率方面，数组在插入或删除元素时需要移动链表中的其他元素，时间复杂度为O(n)。而链表在进行插入或删除操作时，只需要找到要插入或删除的位置，然后修改指针的指向即可，时间复杂度为O(1)。因此，当需要频繁进行插入或删除操作时，链表通常更为高效。

基于这些特点，数组和链表各自适用于不同的应用场景。

数组适合用于存储和处理一组相关的数据，例如学生的成绩、商品的价格等。通过数组，我们可以方便地对这些数据进行访问、修改和排序等操作。此外，数组也常用于实现算法，如冒泡排序、快速排序等，以及图像处理、数据处理和分析、游戏开发等领域。在这些场景中，通常需要对数据进行频繁的查找操作，而较少进行插入或删除操作，因此数组是一个合适的选择。

链表则更适合于需要频繁进行插入或删除操作的场景。例如，在数据库中，链表索引结构的修改方便，尤其适合多次插入和删除操作的场景。此外，链表也常用于编辑器的撤销操作、内存管理、垃圾回收、图形学以及缓存等领域。在这些场景中，链表能够灵活地添加或删除节点，而无需移动其他元素，从而提高了效率。

3.哈希表有哪些影响效率的因素？

• 哈希函数的质量：哈希函数的设计对哈希表的效率至关重要。一个好的哈希函数应该能够将键均匀地映射到哈希表的不同位置，以减少冲突的发生。如果哈希函数设计不当，可能会导致大量的键映射到同一个位置，从而增加冲突解决的成本，降低哈希表的效率。

• 冲突解决策略：当不同的键映射到哈希表的同一位置时，就需要采用冲突解决策略。常见的冲突解决策略有链表法和开放地址法。链表法在每个位置维护一个链表来存储具有相同哈希值的键，而开放地址法则通过探查其他位置来找到可用的空间。这些策略的选择和实现方式会直接影响哈希表的效率。链表法可能会导致链表过长，从而增加查找时间；而开放地址法则可能需要更多的空间来存储元素，并可能导致较长的探查序列。

4.学过哪些排序算法？时间复杂度怎么样？

1. 冒泡排序（Bubble Sort）

2. 选择排序（Selection Sort）

3. 插入排序（Insertion Sort）

   上面3个是稳定的，n^2

4. 希尔排序（Shell Sort）

5. 归并排序（Merge Sort）

6. 快速排序（Quick Sort）

7. 堆排序（Heap Sort）

8. 计数排序（Counting Sort）

9. 桶排序（Bucket Sort）

10. 基数排序（Radix Sort）

    这些不稳定，nlogn

5. JS

1.webpack如何做性能优化？

1. 代码分割（Code Splitting）：通过Webpack的代码分割功能，将项目代码分割成多个块（chunks），并在需要时按需加载。这可以显著减少首次加载时间，提高用户体验。
2. Tree Shaking：利用Webpack的Tree Shaking功能，只保留项目中实际使用到的代码，剔除未使用的代码，从而减小打包后的文件大小。
3. 优化文件体积：使用插件压缩JavaScript代码、CSS代码。
4. 使用SourceMap：在开发过程中，使用SourceMap可以生成源代码与构建后代码之间的映射关系，有助于快速定位和解决错误。
5. 优化模块解析：减少模块解析的复杂性，例如通过配置Webpack的resolve选项来优化路径解析，避免不必要的文件搜索。
6. 缓存Loader结果：利用插件缓存Loader的处理结果，避免在每次构建时重复处理相同的文件。
7. 使用CDN：将静态资源部署到CDN（内容分发网络）上，利用CDN的缓存和分发能力，加快资源的加载速度。
8. 懒加载：对于非关键代码或资源，使用Webpack的懒加载功能，在需要时才进行加载，减少初始加载时间。

2. 用过PWA吗？怎么用的？说说你的看法

我归纳为子问题：

1.PWA是什么？有什么用？应用于哪些应用场景？

PWA（Progressive Web Apps）是一种可以将网站转变为类似于本地应用程序的技术。它并不是特指某一项技术，而是应用多项技术来改善用户体验的Web App。PWA的核心技术包括Web App Manifest、Service Worker、Web Push等。

PWA的主要作用体现在以下几个方面：

• 可靠性：即使在网络不稳定甚至断网的环境下，也能瞬间加载并展现，为用户提供稳定可靠的服务。
• 快速响应：具有快速的加载速度和响应速度，同时提供平滑的过渡动画及用户操作的反馈，从而优化用户体验。
• 用户黏性：像Native App一样，可以被添加到桌面，能接受离线通知，具有沉浸式的用户体验，从而增强用户的黏性和忠诚度。

应用场景：

PWA适用于各种需要快速加载、稳定可靠、高用户黏性的Web应用场景，如新闻阅读、电商购物、在线游戏等。这些场景都需要提供流畅的用户体验，而PWA正好能够满足这些需求。

2. PWA与CacheStorage的关系

CacheStorage是PWA实现离线缓存的关键技术之一。通过CacheStorage，PWA可以缓存网站资源，使得用户在网络不稳定或断开的情况下仍然能够访问网站。CacheStorage管理一系列Cache对象，提供了丰富的JS接口用于操作Cache对象，从而实现资源的缓存和检索。

补充：CacheStorage只能在localhost和https下使用

3.webpack/vite怎么配置PWA？workbox与PWA的关系是什么？

cra -> workbox

workbox-webpack-plugin：能够生成Service Worker文件，并自动处理资源的缓存策略。通过配置该插件，你可以指定哪些资源需要被缓存，以及缓存的策略（如缓存时间、更新策略等）。

Workbox是Google提供的一套用于构建PWA的工具库。它提供了一系列的Service Worker的API和策略，帮助开发者更轻松地实现资源的缓存、更新和推送通知等功能。

4. TCP三次握手

5.事件循环

异步编程的核心机制。在单线程的JavaScript环境中，为了处理异步事件和避免阻塞，事件循环被引入。具体来说，当遇到异步事件时，JavaScript引擎会将这些事件加入到事件队列中挂起，等待主线程空闲时再去执行事件队列中的事件。这种循环的过程就是事件循环。

事件循环的设计使得JavaScript可以在单线程下处理异步操作，从而保证了程序的响应性和流畅性。在事件循环中，JavaScript引擎会将任务分为宏任务（macro-task）和微任务（micro-task），并将它们加入到不同的队列中。主线程会不断地从任务队列中取出任务并执行，先执行同步任务，再执行宏任务队列中的任务，然后再执行微任务队列中的任务，以此类推。

事件循环的应用场景非常广泛，主要包括：

1. 前端开发：在Web开发中，事件循环常用于处理用户交互事件（如按钮点击、鼠标移动等）、网络请求以及定时任务等异步操作，以提高用户体验。
2. 网络编程：事件循环可以用于实现基于事件驱动的网络通信，例如在Node.js中，事件循环被用于处理网络请求，实现高效、非阻塞的I/O操作。
3. 非阻塞IO操作：事件循环还适用于处理非阻塞IO操作，如文件读写、数据库访问等，进一步提高了程序的并发处理能力。（indexDB）

总的来说，事件循环是JavaScript异步编程的基础，它通过合理调度任务执行顺序，使得程序能够在单线程环境下高效、稳定地运行。

6. 说说Webpack与Vite的区别

1. 构建速度：

   • Vite：Vite采用了服务端渲染的方式，无需像其他构建工具那样预先编译打包所有的JS文件。每当代码修改时，Vite只会重新构建所修改的那部分代码，从而实现了快速的冷启动。此外，Vite支持模块热替换（HMR），使得在开发过程中对代码进行调试变得非常方便。
   • Webpack：Webpack在启动开发服务器之前会先打包所有模块，请求服务器时直接给予打包结果。这意味着每次修改代码时，Webpack都需要重新构建整个项目，这在大型项目中可能导致较长的构建时间。

2. 配置复杂度：

   • Vite：Vite的配置相对简单，大多数情况下只需要简单地配置几个选项即可完成配置。这使得开发者能够更快地开始项目并专注于业务逻辑的实现。（开箱即用）
   • Webpack：Webpack的配置相对复杂，具有大量的配置项和插件。虽然这种灵活性为开发者提供了更多的选项，但也增加了学习和配置的难度。此外，Webpack的配置文件通常是大而繁琐的JavaScript对象，需要手动定义入口点、输出路径、加载器、插件等，可能导致配置错误和调试困难。

3. 生态和插件：

   • Vite：Vite作为一个较新的构建工具，其生态还在不断发展和完善中。虽然它提供了基本的构建和开发功能，但相较于Webpack，其加载器和插件的丰富度可能还有待提高。
   • Webpack：Webpack已经拥有非常庞大的插件生态圈，这些插件为开发者提供了各种功能，如代码压缩、性能优化等。Webpack的社区也非常活跃，有大量的教程和文档可供参考。

4. 打包原理：

   • Vite：Vite利用浏览器原生ES模块的特性进行按需编译和构建。当浏览器请求某个模块时，Vite再根据需要对模块内容进行编译。这种按需动态编译的方式极大地缩减了编译时间。
   • Webpack：Webpack通过将所有模块打包到一个文件中来实现构建。每次修改代码时，Webpack都需要重新分析模块的依赖并重新构建整个项目。

综上所述，Vite和Webpack在构建速度、配置复杂度、生态和插件以及打包原理等方面都存在差异。选择哪个工具取决于项目的具体需求、团队的熟悉程度以及个人偏好。对于追求快速构建和简单配置的项目，Vite可能是一个更好的选择；而对于需要复杂配置和丰富插件的项目，Webpack可能更合适。

3. url到浏览器渲染的全过程

1. DNS
2. 浏览器渲染（dom树，遇到link标签、script标签、img标签等多媒体标签get请求，script标签阻塞加载（无defer或async））

6.开放性问题

1. 怎么学前端的？从什么时候开始学的？