吉比特27前端实习面试

102 阅读5分钟

前言

朱波误闯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 解析流程(选择器匹配 → 样式计算 → 层叠优先级),以及与渲染流程的关联

二、面试面评总结

主要问题

  1. 基础不扎实:核心原理(如响应式、原型链、HTTPS 加密)理解停留在表面,缺乏细节推导能力。
  2. 项目回答过浅:仅描述「做了什么」,未说明「为什么做 → 怎么解决 → 效果如何」,量化结果缺失。
  3. 表达能力不足:技术描述逻辑混乱,未能清晰传递关键信息。

改进方向

  1. 算法:针对性刷题(重点 LeetCode 热题 100),每题需总结「解题思路 → 代码实现 → 时间复杂度分析」。
  2. 基础知识:重新梳理前端核心原理(响应式、原型链、浏览器渲染、HTTP/HTTPS),结合图示理解流程。
  3. 项目复盘:精简简历项目描述,保留「技术栈 → 核心功能 → 解决的问题 → 量化效果」结构(如:通过虚拟列表优化长列表渲染,首屏加载时间减少 40%)。
  4. 表达训练:用「STAR 法则」练习技术问题回答(Situation-背景, Task-任务, Action-行动, Result-结果)。

三、简历优化建议

  1. 内容精简:控制在 1 页内,删除冗余信息(如移动端 rem 适配等基础技能)。
  2. 重点突出:保留 1-2 个高含金量奖项(如国家级竞赛),项目聚焦「性能优化」「复杂功能实现」等亮点。
  3. 项目描述:按「技术栈 → 核心功能 → 解决的问题 → 效果提升」结构编写(示例:
    • 项目名称:XXX 动态文本叠加系统
      • 技术栈:Canvas/WebGL + Vue.js
      • 功能:实现视频/图片与动态文本的实时叠加(支持字体、位置、动画调整)
      • 解决问题:通过离屏渲染优化文本绘制性能,解决多图层叠加时的闪烁问题
      • 效果:渲染帧率从 30fps 提升至 60fps,用户操作响应延迟降低 50%
        )。