前端自动化测试是一种在前端开发过程中使用工具和脚本自动执行各种测试任务的方法，以验证代码的正确性、功能性和性能。通过自动化测试，可以有效地减少人工测试的工作量，提高代码质量，减少错误和缺陷，并加速开发迭代过程。以下是一些常用的前端测试工具：https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=07d53be4cd034a4ab270d500feebcc8dJest：Jest 是一个流行的 JavaScript 测试框架，特别适用于前端项目。它支持单元测试、集成测试和快照测试，具有简单的语法和强大的功能，可以运行在 Node.js 环境中。Mocha：Mocha 是另一个流行的 JavaScript 测试框架，它提供了灵活的测试结构和丰富的插件支持。Mocha 可以用于编写各种类型的测试，包括异步测试。Cypress：Cypress 是一个端到端的测试框架，专注于模拟用户操作与应用程序的交互。它提供实时预览、自动重载和断言，用于编写可靠的端到端测试。Puppeteer：Puppeteer 是一个 Node.js 库，用于控制无头 Chrome 浏览器。它可以用来进行各种 Web 页面操作，包括生成截图、爬取数据以及进行自动化测试。Enzyme：Enzyme 是一个用于 React 组件测试的工具，提供了轻松操作、断言和模拟渲染 React 组件的能力。WebDriverIO：WebDriverIO 是一个自动化测试框架，支持多种浏览器和平台，适用于编写功能测试和端到端测试。Karma：Karma 是一个测试运行器，它可以在多个浏览器中运行测试，用于确保代码在不同环境中的一致性。Linting 工具：虽然不是传统的测试工具，但 linting 工具如 ESLint 和 Stylelint 可以帮助检查代码风格和潜在错误，从而提高代码质量。这些工具可以根据项目需求进行选择，常常结合在一起使用，以确保前端应用在各个方面的质量和稳定性。

时间：2025年11月20日形式：腾讯会议（视频）自我介绍环节内容（无序）：1、你做的项目中你觉得收获最大的是哪个？为什么？2、场景题：假设现在有两台浏览器同时登录同一个账号的购物车并进行操作，如何同步数据？3、项目题：将商品添加到购物车的过程发生了什么？4、项目题：项目中提到的图片懒加载以及列表的无限加载方案是如何实现的？5、场景题：如果将商品列表设计成分页器的形式，点击不同的分页会请求不同的数据，那么在添加商品数据到列后，商品列表中可能会请求到重复的数据，如何避免？6、项目题：项目中的支付功能如何实现的？ 模拟第三方应用7、开放题：如果一个SPA的首屏加载很慢，你会通过什么方式提高它的速度？PS：目前能回忆起来的就这些，应该也大差不差了，个人感觉有点难度。反问环节

时间：2025年11月16日形式：腾讯会议屏幕共享自我介绍内容：1、手撕：给你一个对象数组（员工信息），筛选出age > 28的每一条数据。2、手撕：对上面的对象数组根据员工所属部门进行信息整合，包含数据项：部门名称、部门员工姓名、员工平均年龄、所有员工薪资之和3、手撕：给你一段代码、分析代码的输出结果，并说说其中的原理（事件循环相关）4、手撕：Vue3 父子组件传值与双向通信题目题目要求：简易任务列表实现一个简单的任务列表应用，包含父组件 TaskList和子组件 TaskItem，考察以下核心知识点：功能需求父组件显示任务列表，每个任务包含：任务名称、完成状态使用 v-for 遍历渲染任务列表子组件可以切换任务完成状态（双向通信）子组件可以删除任务反问环节PS：中间好像是穿插问一点平常八股，具体是什么我忘记了

时间：2025年11月19日形式：腾讯会议自我介绍内容（无序）：1、  讲讲flex布局2、  了解过标准盒模型和怪异盒模型吗？它们两有什么区别？3、  实现同时水平居中并且垂直居中的方式有哪些？4、  说说Vue2和Vue3的区别5、  那Vue2中的Object.defineProperty()和Vue3中的Proxy的底层实现有什么区别？（因为上面提到了）6、  watch和computed的区别7、  说一说事件循环机制8、  事件循环中提到了任务队列和调用栈，说说栈和队列的区别（栈先进后出，堆先进先出）9、  使用过链表和数组吗？它们两的区别是什么？10、开发Vue项目过程中用到过哪些设计模式？11、了解过哪些相关的http状态码？12、如何实现父子组件通信  prop、emits13、如何实现跨层级通信 store、provide和inject14、讲讲原型和原型链15、浏览器用哪些缓存方式？ 强缓存和协商缓存各自的实现方式有哪些？16、如何实现请求、响应拦截器？17、普通函数和箭头函数的区别有哪些？18、节流和防抖了解过吗？说说它们两的区别以及各自在项目中的使用场景19、了解过闭包吗？讲讲20、事件冒泡和捕获的区别是什么？21、如何实现浅拷贝和深拷贝？反问环节PS：目前能想到的就这些，面试官人very nice，全程心平气和，表述不准确也会帮忙纠正

前端工程化是指利用工具和技术来提高前端开发效率、规范开发流程、优化代码质量和维护性的一种开发方式。前端工程化的目标是在开发过程中实现高效、可靠和可维护的前端代码。前端工程化涵盖了很多方面，包括但不限于以下内容：https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=07d53be4cd034a4ab270d500feebcc8d包管理工具：使用工具如Node.js的npm或Yarn来管理和安装项目所需的第三方库和插件。模块化：将前端代码拆分为多个模块，使用模块化的开发方式，例如CommonJS、ES Modules或AMD。构建工具：使用构建工具如Webpack或Parcel来自动化处理前端代码的打包、压缩、合并等操作。自动化测试：通过使用测试框架和工具，编写单元测试、集成测试和端到端测试，以确保代码质量和功能的稳定性。代码规范和静态检查：使用工具如ESLint或TSLint来强制执行代码规范，并进行静态代码分析，以避免常见的错误和潜在问题。性能优化：对前端代码进行性能分析，并采取相应的优化策略，如资源合并、缓存优化、懒加载等，以提升页面加载速度和用户体验。版本控制：使用版本控制工具如Git来管理前端代码的版本，并支持团队协作和代码的回滚和合并。

uni-app为了处理各平台的差异性，提供了一系列的方法和机制。以下是几个常用的处理方式：https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=a0135b9e89cd4b9ebc8232dc4dbe1bfb使用条件编译：uni-app支持在不同的平台上使用不同的代码，通过条件编译来实现。开发者可以在代码中使用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。这样就可以根据不同平台的特性，编写不同的代码逻辑，以处理各个平台之间的差异。使用平台特性和API：uni-app支持使用各平台提供的原生WebView容器作为运行环境，开发者可以使用这些平台提供的特性和API来实现跨平台逻辑。同时，uni-app也提供了一套通用的API，统一了不同平台的接口调用方式。开发者可以使用这些通用API来实现跨平台的逻辑，而无需编写特定平台的代码。使用插件和组件库：uni-app提供了插件和组件库，可以方便地扩展应用程序的功能和界面。这些插件和组件库可以处理不同平台之间的差异，提供一致的跨平台体验。进行平台差异处理：uni-app框架会根据不同的平台特性，在编译阶段对代码进行转换和适配，以处理各个平台之间的差异。这样开发者可以使用统一的代码风格和逻辑，同时兼顾各个平台的特性和限制。总的来说，uni-app通过使用条件编译、平台特性和API、插件和组件库以及平台差异处理等方式，使得开发者可以更加方便地处理各平台之间的差异性，实现跨平台开发。

Node.js是一个基于Chrome V8引擎的JavaScript运行时环境，可以用来开发服务器端和网络应用。它的特点包括：https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=1730841bd8554b2fa6de4161e81ebb45非阻塞和事件驱动：Node.js使用事件驱动和异步编程模型，能够处理大量并发请求，提高了应用程序的性能和吞吐量。单线程：Node.js使用单线程的事件循环机制，通过非阻塞I/O操作实现高并发处理。轻量和高效：Node.js运行时环境很轻量，启动快速，并且能够处理大量的并发连接。跨平台：Node.js可以在多个操作系统上运行，如Windows、Mac和Linux。丰富的模块生态系统：Node.js拥有丰富的模块和包管理器npm，可以方便地引用和管理各种功能模块。可扩展性：Node.js通过模块化的方式支持代码的重用和组件化开发，使得应用程序易于扩展和维护。

HTTP（超文本传输协议）是一种用于在网络上进行通信的协议。 它是用于在Web浏览器和Web服务器之间传输超文本文档的基础协议。HTTP的核心概念和工作原理如下：https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=b48bebe08e474db8b80b853b12bafd48客户端和服务器之间的请求/响应模型：客户端发送一个HTTP请求到服务器，服务器处理该请求并返回一个HTTP响应。请求方法：HTTP定义了一组请求方法，包括GET、POST、PUT、DELETE等。这些方法用于指定请求的目的以及对资源的处理方式。URL（统一资源定位符）：HTTP使用URL来标识要请求或响应的资源。URL由协议、服务器地址、端口和资源路径组成。请求头和响应头：HTTP请求和响应都包含一组头部信息。请求头包含有关请求的元数据，如请求方法、请求主机等。响应头包含关于响应的元数据，如状态码、内容类型等。状态码：HTTP响应包含一个状态码，用于指示请求的处理结果。常见的状态码包括200（请求成功）、404（未找到）和500（服务器内部错误）等。内容编码：HTTP支持使用不同的编码格式来传输数据。常见的编码方式包括gzip、deflate和br等，用于压缩数据的大小以提高传输效率。Cookies和Sessions：HTTP通过使用Cookies或Sessions来维护状态。Cookies是服务器在客户端存储的小段信息，用于跟踪用户的状态，而Sessions是由服务器维护的与用户相关的数据。缓存：HTTP允许客户端和服务器使用缓存来减少重复请求和提高性能。客户端可以使用响应头中的Cache-Control字段来控制缓存策略。安全性：HTTP可以通过HTTPS（HTTP Secure）来提供安全的通信，使用TLS或SSL加密数据以防止窃听和篡改。

let和const都是在ES6中引入的新的变量声明方式。它们与传统的var关键字相比，在作用域和变量声明方面都有一些差异。https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=2d6077ad79aa408fb541e64c9f6e1ddf作用域：let和const都具有块级作用域，而var关键字只有函数作用域和全局作用域。块级作用域意味着变量只在声明它们的块级语句中可见，而在其他语句中是不可见的。变量声明：使用var声明的变量可以重复声明，并且不会报错，而let和const不能重复声明。这意味着在同一个作用域内，你不能声明两个相同名称的let或const变量。变量提升：使用var声明的变量会有变量提升的特性，即变量可以在声明之前使用。而let和const声明的变量不具有变量提升，必须在声明之后才能使用。初始化：使用var声明的变量在声明时不会自动初始化，默认值为undefined。而let和const声明的变量在声明时未赋值会报错，必须在声明时或之后将其初始化。常量声明：const用于声明常量，一旦被赋值后，不能被重新赋值。let和var声明的变量可以重新赋值。总的来说，let和const相对于var提供了更好的作用域控制和变量声明约束。推荐在使用变量时优先考虑使用let和const，尤其是在块级作用域内。如果变量不需要被重新赋值，可以使用const声明为常量。

事件驱动编程（Event-driven programming）是一种编程范式，其中程序的执行流程主要由事件的产生和处理驱动。在事件驱动编程中，程序通过监听和响应事件的方式来执行任务，而不是按照传统的顺序执行。在事件驱动编程中，事件是指程序中发生的特定操作或状态变化，如用户操作、网络请求完成、定时器到期等。程序通过监听这些事件并分配对应的事件处理程序来响应事件。事件驱动编程的主要特点包括：https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=2d6077ad79aa408fb541e64c9f6e1ddf异步性：事件驱动编程充分利用了异步处理的特点，能够在事件发生时立即响应，而无需等待。松耦合性：事件驱动编程允许多个模块独立运行，并通过事件来进行交互，使得各模块之间的耦合度降低。可扩展性：通过监听和响应不同类型的事件，可以轻松地添加或修改功能，从而实现程序的可扩展性。反应式：事件驱动编程强调对事件的即时响应，能够使程序以较快的速度处理事件并提供及时的反馈。

WebSocket是HTML5中用于实现实时双向通信的一种网络协议技术。它通过在浏览器和服务器之间建立持久的连接，允许服务器主动向客户端推送数据，而不需要客户端发起请求。WebSocket与传统的HTTP通信有以下几个主要区别：https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=4fe429db552e4b3a966ed18c92a2298a双向通信： 传统的HTTP通信是基于请求和响应的模式，客户端必须通过发送请求来获取服务器的响应。而WebSocket允许服务器主动向客户端推送数据，实现了双向通信，无需客户端发起请求。低延迟： 由于WebSocket建立了持久连接，避免了每次通信都要建立和关闭连接的开销，因此具有较低的延迟。相比之下，传统的HTTP通信需要在每次请求和响应之间建立和关闭连接，导致较高的延迟。较小的数据传输开销： WebSocket使用帧（Frame）进行数据传输，相对于HTTP头部较大的开销来说，帧的开销较小。这使得WebSocket在传输较小的数据时更加高效。实时性： WebSocket支持实时通信，可以使用较少的网络流量进行实时数据传输。这使得它非常适用于需要实时性的应用场景，如聊天应用、实时游戏等。协议握手： WebSocket建立连接时需要进行握手过程，使用HTTP协议进行初始握手，然后升级到WebSocket协议，建立持久连接。而传统的HTTP通信在每次请求和响应时都需要进行完整的HTTP协议交互，包括建立连接、发送请求、接收响应等。

HTML5带来了一些强大的表单增强功能，以下是其中三个例子及其作用：https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=4fe429db552e4b3a966ed18c92a2298a表单验证（Form Validation）： HTML5引入了内置的表单验证机制，使得在客户端对表单输入进行基本的验证变得更加方便。通过使用HTML5的表单验证属性和API，例如required、pattern、min、max等，开发者可以在不使用JavaScript的情况下进行输入验证。这样可以提高用户填写表单的准确性和用户体验。日期和时间选择（Date and Time Input）： HTML5提供了新的日期和时间输入类型，例如<input type="date">、<input type="time">、<input type="datetime-local">等，使得用户能够直接在网页上选择日期和时间。这样，开发者无需自己实现日期和时间选择器，并且用户能够更方便地输入和选择日期和时间。表单自动完成功能（Autocomplete）： HTML5的自动完成功能允许浏览器自动为用户填写输入字段。通过使用<input>元素的autocomplete属性，开发者可以为输入字段启用自动完成功能，并指定预定义的自动完成值。这样，用户在填写表单时可以从已保存的数据或浏览器的历史记录中选择和填充表单字段，提高填写效率。这些HTML5表单增强功能使得开发者能够更加简便地实现常见的表单交互和验证需求，同时提供更好的用户体验。通过利用HTML5中的这些功能，可以减少对JavaScript的依赖，简化表单开发过程，并为用户提供更直观和便捷的表单输入方式。当然，需要注意不同浏览器对这些新功能的支持程度可能有所差异，开发者在使用时需要进行测试和兼容性处理。

前端自动化测试是一种在前端开发过程中使用工具和脚本自动执行各种测试任务的方法，以验证代码的正确性、功能性和性能。通过自动化测试，可以有效地减少人工测试的工作量，提高代码质量，减少错误和缺陷，并加速开发迭代过程。以下是一些常用的前端测试工具：https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=07d53be4cd034a4ab270d500feebcc8dJest：Jest 是一个流行的 JavaScript 测试框架，特别适用于前端项目。它支持单元测试、集成测试和快照测试，具有简单的语法和强大的功能，可以运行在 Node.js 环境中。Mocha：Mocha 是另一个流行的 JavaScript 测试框架，它提供了灵活的测试结构和丰富的插件支持。Mocha 可以用于编写各种类型的测试，包括异步测试。Cypress：Cypress 是一个端到端的测试框架，专注于模拟用户操作与应用程序的交互。它提供实时预览、自动重载和断言，用于编写可靠的端到端测试。Puppeteer：Puppeteer 是一个 Node.js 库，用于控制无头 Chrome 浏览器。它可以用来进行各种 Web 页面操作，包括生成截图、爬取数据以及进行自动化测试。Enzyme：Enzyme 是一个用于 React 组件测试的工具，提供了轻松操作、断言和模拟渲染 React 组件的能力。WebDriverIO：WebDriverIO 是一个自动化测试框架，支持多种浏览器和平台，适用于编写功能测试和端到端测试。Karma：Karma 是一个测试运行器，它可以在多个浏览器中运行测试，用于确保代码在不同环境中的一致性。Linting 工具：虽然不是传统的测试工具，但 linting 工具如 ESLint 和 Stylelint 可以帮助检查代码风格和潜在错误，从而提高代码质量。这些工具可以根据项目需求进行选择，常常结合在一起使用，以确保前端应用在各个方面的质量和稳定性。