快手前端日常实习面试面经

1. 自我介绍

   需简洁清晰，突出前端相关经验、项目成果及技术栈。

2. 如何接触并学习前端

   回答需体现主动性，例如通过在线课程（如慕课网、MDN）、开源项目、实践项目等逐步深入学习。

3. 项目介绍与工作室工作内容

   重点说明项目角色、技术难点及解决方案，例如：

   封装组件、优化性能、解决兼容性问题等。

   感触最深的工作可能是调试复杂交互或解决跨域问题。

4. 浏览器缓存

   强制缓存：通过Expires或Cache-Control控制，直接从本地读取资源，不请求服务器。

   协商缓存：通过Last-Modified/If-Modified-Since或ETag/If-None-Match验证资源是否更新，需与服务器交互。

   扩展：缓存策略选择（如频繁更新的资源用协商缓存）。

5. Axios封装与请求方式

   常用请求方式：GET（获取数据）、POST（提交数据）、PUT/PATCH（更新）、DELETE（删除）。

   GET vs POST：

   GET：参数在URL中，有长度限制，可缓存，幂等。

   POST：参数在请求体中，无长度限制，不可缓存，非幂等。

   深入点：GET的URL编码、POST的MIME类型（如application/json）。

6. TCP三次握手与四次挥手

   三次握手：建立连接，确保双方收发能力正常（SYN→SYN+ACK→ACK）。

   四次挥手：终止连接，确保数据传输完成（FIN→ACK→FIN→ACK）。

   原因：TCP全双工，需分别关闭发送和接收通道。

7. 浏览器常见攻击与防御

   XSS：注入恶意脚本，防御：转义输入、CSP策略。

   CSRF：伪造用户请求，防御：验证Token、Referer检查。

   SQL注入：防御：参数化查询。

8. Node.js与数据库

   Node.js：了解基础（如事件循环、NPM包管理），可能问Express/Koa框架。

   数据库：

   NoSQL（如MongoDB）：非关系型，适合灵活数据结构。

   关系型（如MySQL）：事务支持，适合结构化数据。

9. 响应式布局

   实现方式：媒体查询（@media）、REM/EM单位、Flexbox/Grid布局。

   项目中可能用postcss-pxtorem插件实现REM适配。

10. 排序算法与快排

    常用排序：冒泡、快排、归并、堆排序。

    快排思路：分治法，选基准值（pivot），将数组分为左右两部分递归排序。

11. const/let/var与ES6

    区别：

    var：函数作用域，变量提升。

    let/const：块级作用域，暂存死区。

    const：常量，不可重新赋值。

    ES6新增：箭头函数、解构赋值、Promise、模块化等。

12. 深拷贝与浅拷贝

    浅拷贝：Object.assign()、展开运算符...。

    深拷贝：JSON.parse(JSON.stringify())（缺陷：无法处理函数、循环引用）、递归实现。

13. TypeScript与JS区别

    TS优势：静态类型、接口、装饰器、编译时错误检查。

    项目应用：定义接口、类型注解、枚举类型。

    装饰器：用于类、方法修饰（如@Component）。

14. 跨域解决方案

    CORS：服务器设置Access-Control-Allow-Origin。

    JSONP：利用<script>标签绕过限制（仅GET）。

    代理：开发环境配置代理，生产环境Nginx反向代理。

15. 编程题

    数字去重升序排序：

    [1, 2, 2, 3].filter((v, i, a) => a.indexOf(v) === i).sort((a, b) => a - b);

    验证码校验：正则匹配电话号码（如/^1[3-9]d{9}$/），验证码格式（如4位数字）。

16. 反问环节

    部门技术栈（如React/Vue、微前端、Serverless）。

    学习建议（如夯实基础、多实践、关注社区）。

1. 学习前端经历与困难

   举例说明遇到的挑战（如兼容性、性能优化），强调解决过程（如查阅文档、调试工具）。

2. 项目与组件封装

   封装思路：通用性、可配置性、复用性。

   优化方向：减少渲染次数（shouldComponentUpdate）、按需加载、错误边界。

3. Vue2 vs Vue3

   改进点：Composition API、响应式系统优化（Proxy）、性能提升（编译优化）、Fragment支持。

4. Vue生命周期与通信

   生命周期：beforeCreate→created→mounted等。

   通信方式：

   父子：props/$emit、ref、$parent/$children。

   跨组件：EventBus、Vuex/Pinia、provide/inject。

5. Pinia vs Vuex

   Pinia优势：更轻量、支持TypeScript、模块化更好、无需mutations。

6. Node.js后端流程

   登录注册：JWT验证、密码加密（bcrypt）、Session管理。

7. 状态码

   常见：200（成功）、400（错误请求）、401（未授权）、404（未找到）、500（服务器错误）。

8. 移动端适配

   单位区别：

   px：绝对单位。

   em：相对于父元素字体大小。

   rem：相对于根元素字体大小。

   vw/vh：视口宽度/高度的1%。

9. 重绘与重排

   重排：DOM结构变化导致布局重新计算（如修改宽度）。

   重绘：样式变化不影响布局（如修改颜色）。

   优化：批量操作DOM、使用transform/opacity触发GPU加速。

10. CSS盒子模型

    标准盒模型：width=内容宽度。

    IE盒模型：width=内容+内边距+边框（通过box-sizing: border-box实现）。

11. Flex布局

    属性：display: flex、justify-content（主轴对齐）、align-items（交叉轴对齐）、flex-direction（方向）。

12. 反问环节

    部门业务方向（如C端/B端、核心产品）。

    面试结果通知时间（通常3-5个工作日）。

1. 学习时长与到岗时间

   诚实说明学习周期（如6个月-1年），确认实习时长（如3-6个月）。

   到岗时间：根据学校安排给出明确日期（如“一周内”）。

2. 工作地点与全职实习

   确认是否接受异地实习，能否保证全职（如“无课，可全职”）。

总结：快手前端面试注重基础（如HTTP、JS、CSS）、项目深度（如优化、封装）及工程化能力（如TS、Vue3）。需结合实际项目经验，体现问题解决能力与学习主动性。