前言
朱波误闯GBT,面试官挺好的,居然后面说也是同校师兄,给了一些面评还有简历修改意见,下面是询问的一些内容,有一些忘记了。
一、技术问题复盘
算法题
1. 无重复字符的最长子串(LeetCode 原题)
- 问题:求字符串中不含重复字符的最长子串长度
- 反思:需掌握滑动窗口解法(双指针+哈希表记录字符索引),理解时间复杂度 O(n) 的优化逻辑
项目拷打 & 实习经历
2. 项目拷打 / 实习拷打
- 问题:对实习项目和课程项目的细节挖掘(技术实现、难点解决、量化结果)
- 反思:回答过于浅层,需明确「使用了什么技术 → 解决了什么问题 → 达成了什么效果(数据量化)」
前端核心原理
3. 响应式原理
- 问题:Vue/React 响应式实现机制(如 Vue2 的 Object.defineProperty、Vue3 的 Proxy;React 的 setState 调度)
- 反思:需区分框架差异,结合依赖收集、派发更新等流程详细说明
4. OMI 是什么?你做了什么?
- 问题:对自研/使用的前端框架(如 OMI,类 Web Components 方案)的理解与实践
- 反思:需清晰描述 OMI 的核心特性(如基于 Custom Elements 的封装),以及个人在其中的开发贡献(如组件开发、性能优化等)
5. 封装组件如何实现 React 和 Vue 兼容?
- 问题:跨框架组件设计的通用方案(如通过 Web Components 或 props/event 标准化)
- 反思:需提及适配层设计(如统一事件通信、属性传递规范)
6. 如何封装组件?
- 问题:组件的设计原则(单一职责、可复用性)与实现步骤(Props 定义、状态管理、事件暴露)
- 反思:需结合具体场景(如业务组件/通用组件)说明封装思路
7. 组件通信
- 问题:父子/跨组件通信方式(如 Props/Events、Context、Vuex/Pinia、Redux、事件总线等)
- 反思:需区分场景说明适用方案
JavaScript 基础
8. 闭包
- 问题:函数与词法环境的绑定关系(如闭包的形成条件、应用场景、内存泄漏风险)
- 反思:需通过代码示例解释(如计数器、模块化封装)
9. HTTP 和 HTTPS
- 问题:两者区别(明文传输 vs 加密传输)、HTTPS 的必要性
10. HTTPS 加密过程
- 问题:SSL/TLS 握手流程(非对称加密协商密钥 → 对称加密传输数据),涉及证书校验、密钥交换算法(如 RSA/ECDHE)
- 反思:需分步骤说明(客户端 Hello → 服务端响应 → 密钥交换 → 加密通信)
11. 继承
- 问题:JavaScript 实现继承的方式(原型链继承、构造函数继承、组合继承、寄生组合继承)及优缺点
12. 原型链及其优点
- 问题:原型链的查找机制(proto 与 prototype 的关系)、通过原型实现方法复用的优势
前端性能与图形
13. WebGL 和 ECharts-GL 怎么切换的?
- 问题:WebGL 原生开发与 ECharts-GL(基于 WebGL 的图表库)的适配逻辑(如场景需求决定技术选型)
14. Three.js 性能优化
- 问题:渲染优化(如实例化渲染、LOD、合并几何体)、资源管理(如纹理压缩、模型减面)、动画优化(如减少重绘)
15. WebP 渐进式加载如何兼容浏览器?降级如何处理?
- 问题:通过
<picture>标签或 JavaScript 检测浏览器支持(如Image对象探测),降级至 JPEG/PNG
实习功能实现
16. 实习中如何实现视频/图片动态文本叠加功能?
- 问题:技术实现细节(如 Canvas/WebGL 叠加、动态文本渲染、交互控制),需说明具体方案与难点
浏览器原理
17. 浏览器的渲染原理
- 问题:从 HTML 解析到页面显示的全流程(DOM 树 → CSSOM 树 → 渲染树 → 布局 → 绘制 → 合成),重绘与回流的影响因素
18. CSS 是怎么解析的?
- 问题:CSS 解析流程(选择器匹配 → 样式计算 → 层叠优先级),以及与渲染流程的关联
二、面试面评总结
主要问题
- 基础不扎实:核心原理(如响应式、原型链、HTTPS 加密)理解停留在表面,缺乏细节推导能力。
- 项目回答过浅:仅描述「做了什么」,未说明「为什么做 → 怎么解决 → 效果如何」,量化结果缺失。
- 表达能力不足:技术描述逻辑混乱,未能清晰传递关键信息。
改进方向
- 算法:针对性刷题(重点 LeetCode 热题 100),每题需总结「解题思路 → 代码实现 → 时间复杂度分析」。
- 基础知识:重新梳理前端核心原理(响应式、原型链、浏览器渲染、HTTP/HTTPS),结合图示理解流程。
- 项目复盘:精简简历项目描述,保留「技术栈 → 核心功能 → 解决的问题 → 量化效果」结构(如:通过虚拟列表优化长列表渲染,首屏加载时间减少 40%)。
- 表达训练:用「STAR 法则」练习技术问题回答(Situation-背景, Task-任务, Action-行动, Result-结果)。
三、简历优化建议
- 内容精简:控制在 1 页内,删除冗余信息(如移动端 rem 适配等基础技能)。
- 重点突出:保留 1-2 个高含金量奖项(如国家级竞赛),项目聚焦「性能优化」「复杂功能实现」等亮点。
- 项目描述:按「技术栈 → 核心功能 → 解决的问题 → 效果提升」结构编写(示例:
- 项目名称:XXX 动态文本叠加系统
- 技术栈:Canvas/WebGL + Vue.js
- 功能:实现视频/图片与动态文本的实时叠加(支持字体、位置、动画调整)
- 解决问题:通过离屏渲染优化文本绘制性能,解决多图层叠加时的闪烁问题
- 效果:渲染帧率从 30fps 提升至 60fps,用户操作响应延迟降低 50%
)。
- 项目名称:XXX 动态文本叠加系统