吉比特27前端实习面试
作者: 前端AC | 原文: https://juejin.cn/post/7538769988296900660
前言
朱波误闯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 动态文本叠加系统