前端字节面试大纲

字节前端面试近期以基础深度+工程化+框架原理+算法编程+网络与浏览器为核心,一面重基础与手写,二面偏场景与方案设计,三面会结合字节业务(如抖音、直播)考察性能与架构能力。以下按模块整理高频题,附面试友好的答题要点与示例,方便你快速对标准备。


一、HTML/CSS高频题(一面必问)

  1. 实现元素水平垂直居中的常用方式(Flex、Grid、绝对定位+transform、table-cell等,分别说明适用场景)。
  2. 什么是BFC?触发条件、渲染规则与应用场景(如清除浮动、防止margin重叠)。
  3. 盒模型的两种模式(content-box、border-box),如何切换?宽高计算差异。
  4. Flex布局的核心属性(flex-direction、flex-wrap、flex-grow/shrink/basis),如何实现两栏/三栏自适应布局。
  5. 如何用CSS实现自适应正方形(padding-top百分比法、aspect-ratio)。
  6. CSS优先级计算规则,!important、内联、ID、类、标签的权重关系。
  7. opacity、visibility、display: none的区别(渲染、事件、过渡、重排重绘)。

二、JavaScript核心题(贯穿全流程)

  1. 原型链与继承:原型对象与构造函数的关系、继承的常用实现方式(ES5原型链继承、ES6 class extends),举例说明。
  2. 闭包的定义、产生原因、应用场景(防抖节流、模块化)与内存泄漏风险。
  3. this指向规则(默认、隐式、显式、new绑定),如何改变this指向(call/apply/bind)。
  4. Promise的状态与执行顺序,手写Promise.all/race,解决回调地狱与竞态问题(如避免旧请求覆盖新请求)。
  5. 数组扁平化(flat实现)、数组去重、实现map/reduce方法,forEach中如何中断循环。
  6. 与=的区别,对象转原始类型的流程,如何让if(a == 1 && a == 2)成立。
  7. 事件循环(Event Loop)机制:宏任务/微任务分类,结合async/await的执行顺序分析。

三、浏览器与网络(高频深度题)

  1. 从URL输入到页面渲染的完整流程(DNS解析→TCP连接→HTTP请求→响应解析→DOM/CSSOM构建→布局→绘制→合成)。
  2. HTTP缓存机制:强缓存(Cache-Control、Expires)与协商缓存(Last-Modified/If-Modified-Since、ETag/If-None-Match),如何禁止缓存。
  3. 跨域问题的原因与解决方案(CORS、JSONP、代理、postMessage、Cookie+Session+Nginx反向代理)。
  4. HTTPS的加密流程:非对称加密(握手)+对称加密(传输)+CA证书验证,对比HTTP的核心差异。
  5. TCP三次握手、四次挥手的过程,重传机制、滑动窗口与拥塞控制(慢启动、快重传)。
  6. script标签async/defer的区别,对DOM解析与JS执行的影响。

四、框架与工程化(根据简历提问)

  1. React:虚拟DOM的作用与diff算法,Hooks原理(useState/useEffect依赖项),React 18并发特性(如Suspense)。
  2. Vue:Vue3与Vue2的核心差异(Composition API、响应式原理Proxy vs Object.defineProperty),Pinia与Vuex的区别,watch与watchEffect的差异。
  3. 工程化:Webpack与Vite的区别(构建原理、冷启动速度),Babel的作用与polyfill方案,代码分割与懒加载实现。
  4. 性能优化:首屏加载优化(资源压缩、预加载、CDN),运行时优化(防抖节流、虚拟列表),性能指标(FCP、LCP、CLS)与排查工具(Lighthouse、Performance)。

五、算法编程题(手撕必考)

  1. 数组类:最长连续序列、数组扁平化深度计算、洗牌算法(Fisher-Yates)。
  2. 字符串类:最长回文子串、字符串匹配(KMP)、防抖节流函数实现。
  3. 链表类:反转链表、环形链表检测、合并两个有序链表。
  4. 动态规划:爬楼梯、最长递增子序列、背包问题(基础版)。
  5. 场景编程:实现并发请求缓存加载器(同一资源不重复请求、过期自动清理);输入框搜索防抖+避免请求竞态。

六、场景与业务题(二面/三面重点)

  1. 抖音Web端视频秒开方案:预加载、HLS/DASH分片、CDN缓存、首帧缓存、弱网降级策略。
  2. 直播间百万在线弹幕实现:WebSocket长连接、消息分片、本地缓存、弹幕防刷屏限流。
  3. 页面白屏/卡顿排查:网络层面(请求失败、跨域)、渲染层面(JS阻塞、重排重绘)、资源层面(加载超时、内存泄漏)。
  4. 单点登录(SSO)流程:跨域名登录态共享(Cookie+Token、CAS协议),如淘宝/天猫一键登录。

七、面试准备建议

  1. 基础先行:吃透JS原型链、事件循环、HTTP缓存、BFC等,用"原理+场景+手写"串联记忆。
  2. 算法保底:LeetCode中等题(数组、字符串、动态规划),重点练字节高频手撕(如Promise、防抖节流、数组扁平化)。
  3. 框架深挖:React/Vue任选其一,讲清响应式、虚拟DOM、Hooks/Composition API的底层逻辑,结合项目说明优化点。
  4. 业务结合:思考前端在高并发、高性能场景(如短视频、直播)的解决方案,体现工程化思维。

需要我把这些题目整理成可直接背诵的面试答案模板 ,并补充3道字节高频手撕题的简化版代码+核心思路吗?

相关推荐
夏幻灵4 小时前
HTML5里最常用的十大标签
前端·html·html5
Mr Xu_4 小时前
Vue 3 中 watch 的使用详解:监听响应式数据变化的利器
前端·javascript·vue.js
未来龙皇小蓝4 小时前
RBAC前端架构-01:项目初始化
前端·架构
程序员agions4 小时前
2026年,微前端终于“死“了
前端·状态模式
万岳科技系统开发4 小时前
食堂采购系统源码库存扣减算法与并发控制实现详解
java·前端·数据库·算法
程序员猫哥_5 小时前
HTML 生成网页工具推荐:从手写代码到 AI 自动生成网页的进化路径
前端·人工智能·html
龙飞055 小时前
Systemd -systemctl - journalctl 速查表:服务管理 + 日志排障
linux·运维·前端·chrome·systemctl·journalctl
我爱加班、、5 小时前
Websocket能携带token过去后端吗
前端·后端·websocket
AAA阿giao5 小时前
从零拆解一个 React + TypeScript 的 TodoList:模块化、数据流与工程实践
前端·react.js·ui·typescript·前端框架
杨超越luckly5 小时前
HTML应用指南:利用GET请求获取中国500强企业名单,揭秘企业增长、分化与转型的新常态
前端·数据库·html·可视化·中国500强