前端面试题

ECool 前端面试题，按题目标签汇总整理。

计算机网络面试题

共 104 道计算机网络面试题。答案默认折叠，便于先自行作答。 1. 说说流式输出的原理及其应用场景难度：3 · 类型：QA 题目要点流式输出的本质是将结果按时间拆分为连续数据流，实现边生成、边传输、边消费；它通过降低首字节时间和提升反馈及时性来改善用户体验；常见于大模型推理、长耗时任务、实时数据和媒体传输等场景；但同时也带来更高的工程复杂度，需要在体验收益与系统成本之间进行权衡。参考答案流式输出并不是一种新的计算模型，而是一种结果传递与消费方式的改变：从“一次性生成、一次性返回”，变为“边生成、边传输、边消费”。理解它的关键，不在于某个具体 API，而在于数据生产方、传输层和消费方三者如何协同工作。一、流式输出的基本原理 1. 传统非流式模式在非流式模式下，系统的执行流程是严格串行的：服务端完整计算结果将结果一次性写入响应客户端在接收完全部数据后再进行处理或渲染这种模式的特点是实现简单，但首字节时间（TTFB）和用户感知延迟较高，尤其当计算过程本身很慢时，用户在很长一段时间内得不到任何反馈。 2. 流式输出模式流式输出的核心变化在于：结果不再作为一个整体返回，而是被拆分为多个连续的数据块。典型流程是：服务端在计算过程中，阶段性地产生部分结果每当有新数据可用，就立刻写入响应流并 flush 客户端持续读取数据流，并逐步消费、渲染或处理在传输层，这通常依赖于长连接 + 分块传输，例如 HTTP chunked encoding、Server-Sent Events 或 WebSocket。 3. 从系统视角看流式输出从系统设计角度，流式输出具备以下特征：数据是按时间顺序增量产生的消费方不需要等待生产方完全结束生产与消费之间形成一种弱同步关系这使得系统整体从“请求-响应”模型，转变为一种更接近“发布-订阅”的交互方式。二、前端视角下的实现机制在前端，流式输出通常体现在如何读取并渲染增量数据。以 HTTP 流为例：浏览器通过 Fetch API 获取一个 ReadableStream 通过 getReader() 持续读取字节块将字节解码为文本或结构化数据逐步更新 UI，而不是等全部完成这种方式要求前端具备更细粒度的状态管理能力，例如处理中间态、取消、错误恢复等问题。三、典型应用场景 1. 大模型推理与对话系统这是当前最典型的应用场景之一。模型在生成文本时是逐 token 产生的，流式输出可以让用户几乎立即看到内容开始出现，显著降低等待焦虑，同时也便于中途打断和重试。 ...

设计模式面试题

共 7 道设计模式面试题。答案默认折叠，便于先自行作答。 1. 开发的过程中你用到过哪些设计模式？难度：3 · 类型：QA 题目要点设计模式是一种被广泛接受并经过验证的面向对象软件开发中的最佳实践。它们提供了一套解决常见问题的可重用设计方案。参考答案设计模式是一种被广泛接受并经过验证的面向对象软件开发中的最佳实践。它们提供了一套解决常见问题的可重用设计方案。以下是一些常用的设计模式：单例模式（Singleton）：确保一个类只有一个实例，并提供全局访问点来获取该实例。工厂模式（Factory）：通过工厂方法创建对象，而不是直接使用new操作符。这样可以隐藏具体实现，并根据需要创建所需类型的对象。观察者模式（Observer）：定义了一种一对多的依赖关系，当一个对象状态发生改变时，它的所有依赖者（观察者）都会收到通知并自动更新。装饰器模式（Decorator）：动态地将责任附加到对象上。通过将对象包装在装饰器对象中，可以在运行时为对象添加新的行为。策略模式（Strategy）：定义了一系列算法，将每个算法封装起来并使它们可以相互替换。策略模式可以让算法独立于客户端而变化。适配器模式（Adapter）：将一个类的接口转换成客户端所期望的另一个接口。适配器模式使得原本由于接口不匹配而无法一起工作的类可以协同工作。每个设计模式都有其特定的应用场景和优缺点，可以根据具体情况来选择使用。设计模式可以提高代码结构的灵活性、可维护性和可扩展性，并促进重用和解耦。然而，需要根据实际需求慎重选择和应用设计模式，避免过度设计或不必要的复杂性。 2. 什么是 MVVM？比之 MVC 有什么区别？什么又是 MVP ？难度：3 · 类型：QA 题目要点 MVC（Model-View-Controller）：将应用程序分为模型、视图和控制器。控制器处理用户输入并更新模型和视图。 MVVM（Model-View-ViewModel）：将应用程序分为模型、视图和视图模型。视图模型处理视图和模型之间的交互，通过数据绑定简化状态管理。 MVP（Model-View-Presenter）：将应用程序分为模型、视图和展示者。展示者处理视图和模型之间的交互，并负责更新视图和模型。每种模式都有其适用场景和优缺点，选择哪一种模式通常取决于应用程序的需求和团队的开发习惯。参考答案 MVC、MVP 和 MVVM 是三种常见的软件架构设计模式，主要通过分离关注点的方式来组织代码结构，优化我们的开发效率。比如说我们实验室在以前项目开发的时候，使用单页应用时，往往一个路由页面对应了一个脚本文件，所有的页面逻辑都在一个脚本文件里。页面的渲染、数据的获取，对用户事件的响应所有的应用逻辑都混合在一起，这样在开发简单项目时，可能看不出什么问题，当时一旦项目变得复杂，那么整个文件就会变得冗长，混乱，这样对我们的项目开发和后期的项目维护是非常不利的。 MVC 通过分离 Model、View 和 Controller 的方式来组织代码结构。其中 View 负责页面的显示逻辑，Model 负责存储页面的业务数据，以及对相应数据的操作。并且 View 和 Model 应用了观察者模式，当 Model 层发生改变的时候它会通知有关 View 层更新页面。Controller 层是 View 层和 Model 层的纽带，它主要负责用户与应用的响应操作，当用户与页面产生交互的时候，Co ntroller 中的事件触发器就开始工作了，通过调用 Model 层，来完成对 Model 的修改，然后 Model 层再去通知 View 层更新。 ...

趣味题面试题

共 35 道趣味题面试题。答案默认折叠，便于先自行作答。 1. 过桥问题难度：2 · 类型：QA 在一个夜晚，同时有4人需要过一桥，一次最多只能通过两个人，且只有一只手电筒，而且每人的速度不同。A，B，C，D需要时间分别为：1，2，5，10分钟。问：在17分钟内这四个人怎么过桥？题目要点第一步：A、B过花时间2分钟。参考答案第一步：A、B过花时间2分钟。第二步：B回花时间2分钟。第三步：C、D过花时间10分钟。第四步：A回花时间1分钟。第五步：A、B再过花时间2分钟。 2. 圆环转圈问题难度：2 · 类型：QA 两个圆环，半径分别是1和2，小圆在大圆内部绕大圆圆周一周，问小圆自身转了几周？如果在大圆的外部，小圆自身转几周呢？题目要点小圆所转动的路程便是小圆圆心走过的距离参考答案小圆所转动的路程便是小圆圆心走过的距离所以在大圆外部转动，小圆圆心饶半径为3的大圆心转动，走了三圈所以在大圆内部转动，小圆圆心饶半径为1的大圆心转动，走了一圈 3. 推理问题（二）难度：1 · 类型：QA 赵女士买了一些水果和小食品准备去看望一个朋友，谁知，这些水果和小食品被他的儿子们偷吃了，但她不知道是哪个儿子。为此，赵女士非常生气，就盘问4个儿子谁偷吃了水果和小食品。老大说道：“是老二吃的。”老二说道：“是老四偷吃的。”老三说道：“反正我没有偷吃。”老四说道：“老二在说谎。”这4个儿子中只有一个人说了实话，其他的3个都在撒谎。那么，到底是谁偷吃了这些水果和小食品？题目要点是老三偷吃了水果和小食品，只有老四说了实话。参考答案是老三偷吃了水果和小食品，只有老四说了实话。用假设法分别假设老大、老二、老三、老四都说了实话，看是否与题意矛盾，就可以得出答案。 4. 最后剩下谁？难度：2 · 类型：QA 1～50 号运动员按顺序排成一排。教练下令：“单数运动员出列！”剩下的运动员重新排队编号。教练又下令：“单数运动员出列！”如此下去，最后只剩下一个人，他是几号运动员？如果教练下的令是“双数运动员出列！”最后剩下的又是谁？题目要点教练下令“单数”运动员出列时，教练只要下5次命令，就能知道剩下的那个人。参考答案教练下令“单数”运动员出列时，教练只要下5次命令，就能知道剩下的那个人。此人在下第五次令之前排序为2，在下4次令之前排序为4，在下3次令之前排序为8，在下2次令之前排序为16，在下1次令之前排序为32，即32位运动员，因此答案是32号。如果教练下的令是“双数运动员出列！”，最后剩下的是1号。 5. 推理问题（一）难度：1.5 · 类型：QA 甲、乙、丙三个人在一起做作业，有一道数学题比较难，当他们三个人都把自己的解法说出来以后：甲说：“我做错了。” 乙说：“甲做对了。” 丙说：“我做错了。” 在一旁的丁看到他们的答案并听了她们的意见后说：“你们三个人中有一个人做对了，有一个人说对了。” 请问，他们三人中到底谁做对了？题目要点假设丙做对了，那么甲、乙都做错了，这样，甲说的是正确的，乙、丙都说错了，符合条件，因此，丙做对了。参考答案假设丙做对了，那么甲、乙都做错了，这样，甲说的是正确的，乙、丙都说错了，符合条件，因此，丙做对了。 ...

跨端技术面试题

共 19 道跨端技术面试题。答案默认折叠，便于先自行作答。 1. 跨平台的开发中，如何处理不同平台的 API 差异？难度：2 · 类型：QA 题目要点条件编译：在编译阶段，通过特定注释（如 // #ifdef MP-WEIXIN）来区分不同平台，编写差异化代码。适配器模式（Adapter Pattern）：在运行时，封装一个统一的工具类（Adapter），在内部判断环境并调用对应的原生 API。例如，封装一个 StorageAdapter，内部判断环境并分别调用 uni.setStorageSync 或浏览器的 localStorage，对业务代码提供统一的 Promise 接口。参考答案处理不同平台的 API 差异，是跨平台开发中的核心挑战。其目标是在享受跨平台开发效率的同时，确保应用在各平台上的功能完整、性能稳定、体验原生。关键在于通过良好的架构设计来隔离与抽象平台细节。核心原则与架构思想抽象与统一接口层：这是最根本的策略。不要在各处业务代码中直接调用平台特定的 API，而是封装一个统一的接口层。业务逻辑只与这个抽象层交互，由它来屏蔽底层的平台差异。例如，一个文件操作模块，可以定义统一的 readFile 和 writeFile 方法，然后在内部根据平台调用不同的原生实现。这种设计使得核心业务代码保持平台无关性，极大提升了可维护性。渐进增强与平稳退化：在设计功能时，采用“渐进增强”思想。即，优先保证核心功能在所有平台都能运行，然后为高版本平台或特定平台增强更优的体验。同时，做好“平稳退化”，对于不支持某些高级功能的平台，提供合适的降级方案，而不是让功能崩溃。关键技术方案与手段条件编译：这是在编译时处理差异的高效方式。通过预定义的宏或配置，编译器只会将当前目标平台的代码打包到最终产物中。例如，在 C++ 或前端构建工具中，可以使用 #ifdef _WIN32 或类似语法，为不同平台编写不同的代码路径。这种方式打包结果纯净，但需要构建工具支持。运行时检测与分支判断：这是在代码运行时根据当前所处的平台环境，动态选择执行不同的逻辑。这是最常见和灵活的方式。各框架通常提供全局的 API 用于获取平台信息，例如 React Native 的 Platform.OS 和 Platform.select() 方法，或 UniApp 中的 uni.getSystemInfoSync().platform 。这种方式灵活直观，但代码中会存在一些分支判断。文件/模块约定：一些框架支持通过特定的文件命名约定来区分平台代码。例如，在 React Native 中，可以创建 Component.ios.js 和 Component.android.js 文件。在导入时，只需 import Component from './Component'，框架会自动根据平台加载正确的文件。这是一种将平台差异隔离在文件级别的优雅实践。 ...

选择题面试题

共 154 道选择题面试题。答案默认折叠，便于先自行作答。 1. 对以下代码说法正确的是？难度：1 · 类型：Choice let arr = [1,2,3,4,5]; let arr2 = [1, , 3]; A. 执行 arr.length = 3，此时数组为 [1,2,3] B. 执行 arr[10] = 11，此时 arr.length 为 6 C. 执行 delete arr[2]，此时 arr.length 为 4，数组为 [1,2,4,5] D. arr2.length 的长度为 2 题目要点考察的是数组的length属性：参考答案正确答案：A 考察的是数组的length属性：设置数组的length值为小于当前值的非负整数n，则任何索引大于或等于n的数组元素都会从数组中被删除如果给一个索引为i的数组元素赋值，而i大于或等于数组当前的length，则数组的length属性会被设置为i+1 对数组元素使用delete操作符不会修改length属性，使用splice()会如果省略数组字面量中的一个值，被省略的元素是不存在的，但它的索引是存在的 2. 下列哪些不可以实现浏览器存储数据？难度：1 · 类型：Choice A. cookie B. localStorage C. session D. sessionStorage 题目要点 session 不是浏览器端 API，指的是服务端会话机制，不能直接用于浏览器存储参考答案正确答案：C session 不是浏览器端 API，指的是服务端会话机制，不能直接用于浏览器存储 ...