字节前端面试复盘

自我介绍

介绍项目

项目中你印象深刻的地方，项目中的难点，怎么解决的

八股提问

Vue或React里面如何做到多组件通信？

复制代码

// Vue中常见的组件通信方式：
1. Props / $emit（父子组件）
2. $refs / $parent / $children（父子组件）
3. Event Bus（全局事件总线）
4. Vuex / Pinia（状态管理，跨组件通信）
5. provide / inject（跨层级组件）
6. $attrs / $listeners（Vue2）
7. 插槽（slot）通信

// React中常见的组件通信方式：
1. Props（父子组件）
2. Context API（跨层级）
3. Redux / Mobx（状态管理）
4. 自定义事件（子传父）
5. 使用回调函数

CSS里面怎么实现居中对齐？用flex的话怎么去做？

复制代码

/* 使用flex实现居中 */
.container {
  display: flex;
  justify-content: center;    /* 水平居中 */
  align-items: center;        /* 垂直居中 */
}

/* 其他居中方式 */
/* 1. 绝对定位 */
.center-abs {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 2. Grid布局 */
.grid-center {
  display: grid;
  place-items: center;
}

/* 3. text-align（行内元素） */
.text-center {
  text-align: center;
}

HTTPS的通信加密原理？通过什么样的机制保证数据安全通信？

复制代码

HTTPS通过TLS/SSL协议实现加密通信：
1. 非对称加密（握手阶段）：
   - 服务器发送公钥证书给客户端
   - 客户端验证证书有效性（CA机构签发）
   - 生成预主密钥，用服务器公钥加密后发送

2. 对称加密（数据传输阶段）：
   - 双方使用协商的对称密钥加密数据
   - 常用的对称加密算法：AES、ChaCha20

3. 完整性校验：
   - 使用MAC（消息认证码）确保数据未被篡改

4. 主要流程：
   - Client Hello → Server Hello → 证书验证 → 密钥交换 → 加密通信

网站性能优化有哪几种优化方式？

复制代码

前端性能优化分类：

一、网络层面：
1. 减少HTTP请求（合并文件、雪碧图）
2. 使用CDN加速
3. 启用Gzip压缩
4. 使用HTTP/2
5. 图片优化（WebP、懒加载）

二、代码层面：
1. 代码分割（Code Splitting）
2. 树摇（Tree Shaking）
3. 防抖节流（Debounce/Throttle）
4. 虚拟滚动（Virtual Scrolling）

三、缓存策略：
1. 浏览器缓存（强缓存、协商缓存）
2. Service Worker缓存
3. CDN缓存

四、渲染优化：
1. 减少重排重绘
2. 使用CSS3动画
3. 骨架屏加载

哪些场景适合用Redis去做优化？

复制代码

Redis适合的场景：
1. 热点数据缓存（高频读取）
2. 会话存储（Session）
3. 排行榜/计数器
4. 消息队列
5. 分布式锁
6. 限流控制

不适用场景：
1. 数据量过大（超过内存）
2. 需要复杂查询
3. 需要持久化强一致性

Redis是怎么解决安全问题的？（实际考察的是Redis如何解决缓存相关问题）

复制代码

Redis相关的安全问题及解决：

1. 缓存穿透（访问不存在数据）：
   - 解决方案：布隆过滤器、空值缓存

2. 缓存击穿（热点key过期瞬间大量请求）：
   - 解决方案：设置永不过期、互斥锁

3. 缓存雪崩（大量key同时过期）：
   - 解决方案：设置随机过期时间、集群部署

4. 数据一致性：
   - 解决方案：先更新数据库再删除缓存（Cache Aside Pattern）

编程题目【一道】

类字符串的的去重

你还有什么想问面试官的

总结

八股文学习建议

1. 建立知识体系

按模块分类学习：HTML/CSS/JS → 框架 → 网络 → 性能 → 安全 → 工程化
每个模块整理出常见面试题和标准答案

2. 理解而非死记

每个知识点要理解原理，能自己举例说明
准备一两个实际应用场景

3. 定期复习

使用Anki等工具建立记忆卡片
每周回顾一次高频考点

4. 模拟面试

找同学或使用AI工具模拟面试
录音后回听，改进表达

高频八股文考点整理（前端）

分类	高频考点
HTML/CSS	盒模型、BFC、flex/grid、响应式、CSS3动画、选择器优先级
JavaScript	闭包、原型链、事件循环、Promise、ES6+特性、this指向
浏览器	渲染流程、缓存机制、跨域、安全策略、性能监控
框架	虚拟DOM、生命周期、响应式原理、组件通信、diff算法
网络	HTTP各版本、HTTPS、TCP/IP、WebSocket、RESTful
性能优化	加载优化、渲染优化、缓存策略、代码优化、监控手段
工程化	webpack/vite、babel、git、CI/CD、代码规范