qq_44165941的博客

这些问题覆盖JavaScript核心机制和ES6+的深度与广度，适合考察候选人对语言本质的理解和实际编码能力。

【代码】前端面试-React篇。

【代码】前端面试-Vue篇。

【代码】前端面试-工程化（webpack、vite）

微前端是一种将前端应用拆分为独立模块的架构模式，每个模块可由不同团队独立开发、测试、部署和运行。

在 Umi 中使用 Dva、MobX 和 Redux 的区别主要体现在设计思想、实现方式和开发体验上。在 Umi 中，Dva 是默认推荐方案，但具体选择需结合团队习惯和项目需求。

通过组合这些方法，可有效避免全局属性污染，确保微前端架构的稳定性。主应用可通过规范或构建工具（如 Webpack 的。在微前端架构中，避免多个子应用因往。直接采用成熟的微前端框架（如。

通过合理设计架构和选择隔离方案，可系统性解决微前端的 CSS 冲突和全局污染问题，实现真正的应用自治。多个子应用使用相同 CSS 类名或选择器时，样式会相互覆盖（尤其在全局样式场景）。

单点登录（SSO）的流程允许用户通过一次登录访问多个相互信任的应用系统，其核心在于认证中心（SSO Server）与各应用系统之间的信任传递。通过上述流程，SSO在保障安全的前提下，极大提升了用户体验，减少了重复认证的繁琐操作。

机制说明Fiber 节点存储状态持久化在 Fiber 节点的链表中，与组件生命周期绑定。Hook 调用顺序一致性按顺序读取链表确保useState能正确匹配状态。闭包与更新函数setState始终通过 Fiber 引用最新状态，规避闭包陷阱。通过这一系列设计，React 函数式组件能够在多次渲染间保持状态稳定，同时提供简洁的 API 实现响应式更新。

函数式编程（Functional Programming, FP）是一种的编程范式，它将计算视为数学函数的组合，强调，通过纯函数和不可变性来构建程序。以下是关于函数式编程的详细讲解，以及与其他编程范式的对比。

性能优先无论组件类型，合理使用优化手段（如避免不必要的渲染、缓存计算）比选择组件类型更重要。推荐函数式组件更简洁的代码、更少的样板代码，且更贴合React未来发展方向（如并发模式）。迁移成本已有类组件无需强制重写，除非遇到性能瓶颈或需要适配新特性。示例优化场景// 函数式组件：通过React.memo和useMemo优化});// 类组件：通过PureComponent优化render() {

函数组件 + Hooks 提供了更简洁、灵活且面向未来的开发模式，解决了类组件在逻辑复用、代码组织和学习成本上的痛点。尽管类组件仍存在于历史代码中，但 React 生态已全面转向 Hooks 优先的范式。

React 通过显式状态更新 + 虚拟 DOM 比对实现数据到 UI 的映射，而非传统的监听机制。对于需要自动化监听的场景，可结合useEffect或状态管理库（如 MobX）实现类似功能。这种设计平衡了性能、灵活性与可维护性，适用于多样化项目需求。

Vue 2：通过实现数据劫持，依赖手动处理数组和对象变更。Vue 3：基于Proxy的响应式系统更高效、功能更全面，支持自动依赖追踪和更细粒度的更新控制。核心思想：无论是 Vue 2 还是 Vue 3，响应式原理的核心都是数据变化自动驱动视图更新，通过依赖收集和派发更新实现高效的 UI 同步。

Vue更偏向“开箱即用”，通过响应式系统和模板语法降低开发门槛，适合追求开发效率的场景。React强调“JavaScript 优先”，通过灵活的 JSX 和 Hooks 提供更强的控制力，适合复杂应用和追求技术深度的团队。两者均可胜任大多数项目，选择时需结合团队习惯、项目规模和技术生态综合考虑。

DOM 操作成本高的本质原因：树形结构复杂性、跨线程通信、重排/重绘的触发。优化核心思路：减少操作次数、避免同步布局、利用浏览器优化策略。现代框架的价值：通过虚拟 DOM、异步更新等机制，开发者无需手动优化，但仍需理解底层原理以应对极端场景。

React 的核心思想是通过声明式编程和组件化虚拟 DOM（Virtual DOM）React 通过虚拟 DOM 抽象真实 DOM，避免直接操作真实 DOM 带来的性能损耗。虚拟 DOM 是一个轻量级的 JavaScript 对象树，每次组件状态变化时，React 会生成新的虚拟 DOM 树，并与旧的进行对比（Diff 算法），找出最小差异，最终批量更新真实 DOM。协调（Reconciliation）Diff 算法：React 通过对比新旧虚拟 DOM 树，找出需要更新的部分。

将其转换为Webpack可处理的模块（如JS模块）。，执行更广泛的任务，如资源优化、环境注入等。进行转换，类似“流水线”上的处理单元。），在特定时机改变输出结果。通过监听Webpack的。

通过理解 Webpack 的流程，可以更高效地配置优化策略和调试构建问题。Webpack 的核心工作流程可以概括为。

HTTP 缓存机制是浏览器和服务端通过特定协议约定资源缓存策略的技术，目的是减少重复请求、提升加载速度。当强制缓存失效时，浏览器携带验证信息向服务端发起请求，服务端决定是否返回新内容（返回 304 或 200）。浏览器直接根据本地缓存判断是否使用缓存资源，无需发送请求到服务端。

当浏览器报告跨域错误（CORS错误）时，。

使用云存储（如 AWS S3、阿里云 OSS）托管静态资源。：前端与后端域名不同，且需隐藏后端地址或统一入口。：此操作会降低浏览器安全性，禁止在生产环境中使用！：后端服务可控（如自建 API 服务）。：后端在响应中添加 CORS 头。

前端请求同域代理服务器，由代理服务器转发请求到目标服务器，绕过浏览器限制。：仅支持 GET 请求，安全性低（可能遭受 XSS 攻击）。标签不受同源策略限制的特性，通过回调函数获取数据。：服务端通过设置响应头告知浏览器允许跨域访问。：WebSocket 协议不受同源策略限制。：标准化、安全，支持所有 HTTP 方法。：需服务端支持 WebSocket。：仅适用于子域跨域，且需页面间协作。：前端无感知，适用于所有请求类型。：嵌套 iframe 的跨域通信。：实时通信（如聊天室）。：需配置代理服务器。

HTTP/1.1 可能建立多个 TCP 连接（受并发限制），HTTP/2 仅需 1 个连接即可并行处理所有请求。

HTTP/2 通过二进制分帧、多路复用和头部压缩，显著提升了传输效率和性能，解决了 HTTP/1.1 的并发限制与冗余问题。

一个完整的。

（在当前事件循环中继续清空微任务队列），宏任务必须等待所有微任务（包括新产生的）执行完毕后才会执行。

事件循环本质：单线程下通过任务队列实现异步。核心规则：同步代码 → 清空微任务 → 执行一个宏任务 → 循环。应用注意：避免在微任务中执行耗时操作（可能阻塞渲染），合理使用宏任务/微任务调度。理解事件循环机制对解决异步问题、优化性能至关重要！

HTTP协议和TCP协议是计算机网络中不同层次的协议，它们既有区别也有紧密的关联。，定义货物的内容（如商品信息）和交易规则（如退货流程）。，负责把货物（数据）安全送到目的地；

浏览器16.6ms的渲染周期是为了匹配60Hz屏幕的刷新节奏，通过垂直同步和渲染流水线的协同，确保用户获得流畅的视觉体验。开发者需遵循这一机制进行性能优化，避免丢帧和卡顿。

在React中实现权限管理通常涉及以下几个关键步骤，结合路由控制、组件级权限和全局状态管理来确保用户只能访问其权限范围内的内容。通过以上步骤，可在React应用中实现细粒度的权限管理，确保安全与用户体验兼顾。实现动态路由和访问拦截，确保用户无法进入未授权页面。实现权限校验逻辑，支持角色或具体权限码验证。控制按钮、菜单等元素的显示。

主应用负责整合子应用，管理它们的加载和通信。

小程序分包是一种优化技术，主要用于解决小程序代码包体积限制和提升首次加载速度的问题。

以下是结合craco和NODE_ENV（通过cross-env。

受控组件：通过state完全控制表单数据，适合需要精细化管理的场景。非受控组件：依赖 DOM 自身管理数据，适合简单场景或性能优化。核心区别：数据控制权的归属（React vs DOM）。根据需求权衡选择，两者并非对立，而是互补。

ref是 React 的逃生舱：在需要直接操作 DOM 或子组件时使用，但应谨慎。函数组件优先用useRef，类组件用createRef或回调 ref。结合forwardRef和实现更精细的 ref 控制。

在React中，key。

根据具体场景选择最简洁的通信方式，通常组合使用多种方案（如：Props + Context + Redux）能平衡灵活性与可维护性。React 组件通信是构建复杂应用的核心问题之一。根据组件层级关系的不同，通信方式可分为多种类型。

函数式组件已成为 React 的主流写法，但理解类组件仍是必备技能（尤其是在维护老项目时）。是构建 UI 的两种主要方式，它们各有特点和适用场景。通过 JavaScript。直接使用生命周期方法（如。使用 useEffect。使用 useState。