Skip to content

FrontEnd Interview

Appearance

Sidebar Navigation

索引大纲

_01_面试准备与自我介绍

_01_基础

个人信息与技术背景简介

项目经验梳理方法

技术栈关键词提炼技巧

自我介绍的黄金结构（1分钟版/3分钟版）

_02_进阶

项目难点与解决方案表达策略

个人技术亮点挖掘方法

职业规划与岗位匹配度表达

针对不同公司的自我介绍定制技巧

_03_高阶

面试官视角：自我介绍中的加分项识别

压力面试中的自我介绍调整策略

跨领域项目经验的技术转化表达

高级工程师/架构师岗位的自我介绍侧重点

_02_编码能力考查

_01_基础

express 洋葱模型

npm依赖

react中的错误捕获

_03_Map 和 Set 数据结构

_04_事件循环

深浅拷贝

sort 排序手写

filter 过滤手写

async 判断

手写promise

_01_Proxy

_02_数据类型

react 面试总结

页面白屏的判断

_02_进阶

算法复杂度分析与优化方向

代码可读性与可维护性平衡技巧

错误处理与异常捕获的最佳实践

编码题中的设计模式应用

_03_高阶

大型应用中的编码规范制定

性能优先的编码策略

团队协作中的编码风格统一方案

编码题中的架构思维体现

_03_项目经验与问题解决

_01_基础

项目背景与职责描述模板

技术选型理由表达框架

遇到的问题与解决方案结构

个人贡献量化表达方法

_02_进阶

技术难点突破过程的STAR表达法

跨团队协作问题的解决策略

项目性能优化案例分析框架

技术债务识别与处理经验

_03_高阶

从0到1项目的架构设计思路

大型项目重构经验与教训

技术方案决策过程与权衡分析

带领团队解决技术难题的经验

_04_核心技术栈考察

_01_JavaScriptTypeScript

_01_基础

JS数据类型及检测方法

原型链与继承基础

作用域与闭包概念

TS基础类型与接口定义

_02_进阶

异步编程模式（Promise/async-await）

函数式编程概念与实践

TS高级类型（泛型/条件类型/映射类型）

模块化方案演进（CommonJS/ES Module）

_03_高阶

V8引擎工作原理

内存泄漏排查与优化

TS类型系统设计模式

大型项目JS架构设计原则

_02_前端框架

_01_React

组件定义与使用方法

Props与State管理

生命周期函数理解

事件处理机制

Hooks API使用与原理（useState/useEffect/useCallback）

Context API与状态管理

React Router路由管理

性能优化基础（memo/useMemo）

Fiber架构与协调算法

Concurrent Mode与Suspense

服务端渲染（SSR/SSG）实践

React源码关键实现分析

_02_Vue

再探 Vue 实例与生命周期：从基础到实践

Vue模板语法：从插值到指令的优雅实践

Vue组件：从定义到通信的完整指南

计算属性与侦听器的区别及适用场景

Vue响应式系统与计算属性缓存：从原理到实现

Vue组件高级特性：slot、mixin与自定义指令全解析

Vuex与Pinia：Vue状态管理的两种范式

Vue Router高级用法与复杂路由场景实现

Vue3 Composition API：从设计思想到实战价值

Vue响应式系统的性能优化手段与避坑指南

Vue编译优化：从模板到运行时的性能跃迁

大型Vue应用的架构设计：可维护性与扩展性的实践指南

_13_React专题

001react专题知识大纲

01深入理解React Fiber算法：从卡顿根源到性能救赎

02React性能优化实战：从卡顿到丝滑的修炼之路

03React使用技巧进阶：从"能用"到"优雅"的实战指南

04React懒加载全解析：从实现到原理，再到浏览器中的表现

05React渲染原理与虚拟DOM：从设计图到建筑的全过程解析

06React Router 完全指南：从基础使用到实现原理

07Redux生态全解析：从基础到异步流管理

08一万条数据渲染方案全解析：从卡顿到丝滑的实战指南

09MVC与MVVM：前端架构模式的演进与对比

10React组件类型及区别：从基础到进阶的组件分类指南

11React Hooks核心知识点：从使用到原理的全面解析

12React状态管理深入：组件通信与状态更新机制解析

13React事件系统：合成事件与事件冒泡的深度解析

14React的协调与渲染阶段：从虚拟DOM到真实DOM的桥梁

15React错误边界（Error Boundary）：优雅处理组件渲染错误

16Redux生态补充：中间件、对比与现代状态管理工具

17React Router进阶：路由守卫、模式与动态路由详解

18React渲染优化细节：避免不必要的重渲染

19资源加载优化

20React项目构建工具

21TypeScript与React：类型安全的组件开发

22类组件与函数组件的对比及React测试实践

React 18新特性：提升性能与开发体验的关键升级

_03_工程化工具

_01_Webpack

Webpack工程初始化与配置文件结构：从基础到实战

Webpack四大核心概念：entry、output、loader、plugin深度解析

常见Loader配置详解：babel-loader、CSS相关Loader与file-loader

开发环境与生产环境配置分离：优化前端构建流程

Webpack插件开发原理与实践：从入门到实战

Webpack性能优化策略：缓存、分包与压缩全解析

Webpack构建流程优化与分析：从缓慢到高效的蜕变

Webpack多页面应用配置方案：从结构到实践

Webpack源码核心流程分析：从启动到输出的全解析

自定义Loader开发实战：从原理到实践

大型项目构建架构设计：从复杂到有序的工程化实践

构建系统的监控与告警：保障持续集成的稳定性

_02_Vite

Vite项目初始化与目录结构：从搭建到定制的完整指南

Vite开发服务器：特性、配置与实战场景

Vite插件系统基础使用：扩展能力的核心玩法

与Webpack的差异对比：为什么Vite成了新宠？

依赖预构建原理：Vite速度的"隐形引擎"

热模块替换（HMR）实现机制：Vite的"局部刷新"魔法

生产构建优化策略：让Vite打包产物更小、加载更快

Vite自定义插件开发：打造专属构建能力

Vite架构设计与性能优势：新一代前端构建工具的革新

大型项目Vite配置优化：从卡顿到丝滑的实战指南

构建工具选型决策框架：从需求到落地的科学选择

Vite与微前端集成方案：现代构建工具与微前端架构的协同实践

_05_性能优化

_01_基础

前端性能指标：从用户体验到技术落地的核心衡量标准

前端代码体积优化：从"臃肿"到"轻盈"的瘦身指南

图片优化：从"加载慢"到"秒开"的前端性能提速关键

前端缓存机制：从"重复请求"到"瞬间加载"的性能跃迁

_02_进阶

关键渲染路径优化：让页面"快到可见"的核心逻辑

资源加载策略：让浏览器"聪明地"加载资源，提升页面响应速度

运行时性能优化：让页面交互"如丝般顺滑"

大数据渲染优化：从"卡顿崩溃"到"流畅丝滑"的解决方案

_03_高阶

一、明确核心监控指标：从"用户体验"出发

大型前端项目工程化架构设计：从原则到落地实践

大型应用性能优化

1. **目标对齐与指标定义（跨团队启动）**

_06_网络与安全

_01_网络基础

_01_基础

从HTTP到HTTPS：深入理解网络传输的安全基石

TCP/IP协议栈核心概念

HTTP请求方法与状态码

浏览器缓存机制详解

跨域资源共享（CORS）原理

_02_进阶

HTTPS工作原理与TLS握手过程

HTTP/2与HTTP/3新特性

WebSocket协议与实时通信

网络请求优化策略

_03_高阶

大型应用网络架构设计

CDN原理与最佳实践

网络异常处理与降级方案

分布式系统中的网络问题排查

_02_安全

_01_基础

深入浅出理解 XSS 攻击：原理与防御措施

深入理解CSRF攻击：从原理到防御的全方位解析

点击劫持：视觉欺骗的陷阱与防御之道

前端常见安全漏洞全景解析：类型识别与检测方法

_02_进阶

内容安全策略（CSP）：Web安全的"守门人"机制详解

前端敏感数据保护：从识别到防御的全链路方案

前端身份认证常用方式与授权最佳实践

前端安全审计工具与漏洞扫描实践指南

_03_高阶

大型应用的前端安全架构设计：组成与实践要点

前端可能发生的安全事件类型

前端攻防对抗演练：常见场景与实战经验

前端安全合规要求与隐私保护规范实践

_07_工程化与架构

_01_前端工程化

_01_基础

前端代码规范与ESLint配置：从协作痛点到自动化方案

前端团队的Git工作流与版本管理：从协作混乱到高效协同的实践指南

前端构建工具入门：从功能解析到实战操作

包管理工具实战指南：npm、yarn与pnpm的合理运用

_02_进阶

前端项目CI/CD流程搭建：从自动化集成到一键部署

前端自动化测试策略全解析：从单元到端到端的全方位保障

前端项目文档自动化生成：从手动编写到一键生成

前端监控体系：构建全方位用户体验保障机制

_03_高阶

大型前端项目工程化架构设计：从原则到落地实践

多团队协作下的前端工程化规范体系

前端工程化工具链开发指南：构建高效稳定的开发基础设施

前端团队践行DevOps文化：从理念到落地的完整路径

_02_架构设计

_01_基础

MVC核心思想与实现

MVVM数据驱动视图原理

组件化设计原则

状态管理基础

_02_进阶

微前端架构设计与实践

跨端应用架构方案

低代码平台架构设计

大型应用状态管理策略

_03_高阶

前端架构师的职责与能力模型

技术中台建设实践

架构演进与技术债务管理

面向未来的前端架构设计

_08_专项技术领域

_01_低代码开发

_01_基础

低代码平台核心概念

amis框架基础使用

可视化拖拽原理

低代码与传统开发对比

_02_进阶

低代码平台架构设计

自定义组件开发规范

低代码生成代码质量优化

低代码平台性能优化

_03_高阶

企业级低代码平台建设

低代码与DevOps集成

低代码平台扩展性设计

低代码开发团队协作模式

_02_测试与质量保障

_01_基础

单元测试基础（Jest/Mocha）

测试用例设计原则

断言库使用方法

测试覆盖率概念

_02_进阶

组件测试（React Testing Library/Vue Test Utils）

E2E测试（Cypress/Playwright）

测试驱动开发（TDD）实践

测试自动化与CI集成

_03_高阶

大型应用测试策略

测试性能优化

质量门禁与质量指标体系

测试左移与全链路质量保障

_03_插件与工具开发

_01_基础

插件基本概念与作用

不同环境插件区别（浏览器/构建工具/编辑器）

插件开发基本流程

简单插件示例（Webpack HelloWorld插件）

_02_进阶

插件生命周期与钩子函数

插件间通信机制

配置与参数处理最佳实践

插件调试与测试技巧

_03_高阶

插件架构设计原则

性能优化策略

跨环境兼容处理

大型插件的模块化拆分

_04_人工智能与前端

_01_基础

前端AI应用场景（智能交互/图像识别/NLP）

TensorFlow.js基础使用

预训练模型应用（人脸识别/情感分析）

AI+前端典型案例

_02_进阶

模型优化与轻量化技术

WebAssembly加速AI计算

前端推理性能优化

本地AI计算与隐私保护

_03_高阶

大语言模型API集成（ChatGPT/文心一言）

AI辅助开发工具链构建

AIGC内容生成与前端渲染

前端智能化架构设计

_09_技术选型能力

_01_基础

技术选型的核心原则：从“能用”到“好用”的三重校验

需求分析三要素：技术落地前的“三维CT扫描”

如何评估技术栈的匹配度？三个维度让技术选型不再“凭感觉”

常见的技术对比维度：五个维度帮你看透技术“真面目”

_02_进阶

技术选型决策矩阵模型：让技术选型从“拍脑袋”到“算明白”

技术选型中的风险评估与备选方案设计：为技术决策上“双保险”

技术债务的管理策略：从“被动还债”到“主动理财”

大型项目技术栈拆分实践：从“一团乱麻”到“各司其职”

_03_高阶

如何进行技术趋势的预判？从“跟风”到“掌舵”的四步法则

1. 多端适配能力评估

微前端架构技术选型

技术中台建设

_10_设计模式与架构思想

_01_基础

单例模式（登录弹窗/全局状态）

工厂模式（组件工厂/服务工厂）

观察者模式（事件监听/状态订阅）

装饰器模式（高阶组件/中间件）

_02_进阶

策略模式（表单验证/支付方式）

代理模式（数据缓存/图片懒加载）

适配器模式（API兼容/第三方库封装）

组合模式（组件树/权限管理）

_03_高阶

设计模式组合使用（观察者+策略模式）

反模式识别与重构技巧

SOLID原则在前端的实践

大型项目设计模式落地规范

_11_运维与部署

_01_基础

制品发布流程：从代码到用户手中的完整旅程

版本控制与回滚机制：为发布稳定性筑牢防线

环境配置管理：驯服复杂系统的“配置魔法”

静态资源部署：从本地文件到全球加速的最优解

_02_进阶

Docker容器化部署：从镜像到运行的核心要点解析

搭建可靠的自动化部署流程：从手动操作到"一键发布"的蜕变

多环境部署策略设计：让开发、测试与生产“和平共处”

部署监控与告警体系：为系统装上“千里眼”和“顺风耳”

_03_高阶

微服务部署架构：从“单体大厦”到“城市集群”的设计之道

蓝绿部署与灰度发布：平稳过渡的"发布艺术"

高可用架构部署：从“单点运行”到“万无一失”的生存法则

DevOps文化下的部署实践：从“隔墙协作”到“无缝衔接”

_12_拓展性问题与面试结束

_01_基础

常见收尾问题准备（团队规模/技术栈/业务方向）

薪资谈判基础准备

反问环节问题设计

面试结束礼仪

_02_进阶

公司技术挑战的挖掘与提问

职业发展路径的提问技巧

团队协作模式的了解方法

技术学习资源的询问策略

_03_高阶

从提问中评估公司技术氛围

高级岗位的挑战性问题设计

职业规划与公司发展的匹配度询问

面试后的跟进策略

On this page

SOLID原则在前端的实践

Pager

Previous page反模式识别与重构技巧

Next page大型项目设计模式落地规范