以下是为“各个公司前端面试题目总结”文档设计的结构化内容框架及示例，涵盖主流公司高频考点和差异化问题，可根据实际需求调整或扩展：
一、文档说明
目标：汇总国内外互联网大厂、中小型公司前端面试中的高频技术问题、考察重点及应对策略，帮助候选人针对性准备。
覆盖范围：主流大厂（如阿里、腾讯、字节、美团等）、垂直领域公司（如电商、社交、工具类）、外企（如Google、Meta国内团队、微软亚洲研究院等），以及中小公司共性考点。
二、面试题目分类总结
前端面试通常围绕“基础能力+框架应用+项目实战+计算机基础+软技能”展开，不同公司对各模块的侧重不同（如大厂重原理与深度，中小厂重实战与效率）。
（一）通用基础高频题（所有公司必考）
1. HTML/CSS
- 基础概念：HTML5新特性（如语义化标签、Web Storage、Canvas）、CSS盒模型（标准 vs IE）、BFC形成条件及作用、CSS优先级计算（!important > 行内 > ID > 类/伪类 > 标签）。
- 布局与响应式：Flex/Grid布局常用属性（justify-content/align-items/grid-template-columns）、媒体查询（@media）、移动端适配方案（rem/vw/vh + 动态计算）。
- 典型问题举例： “如何实现两栏布局（左固定宽，右自适应）？”（答案：Flex/Grid/浮动+margin负值）
- “CSS中position有哪些值？relative和absolute的区别？”
2. JavaScript核心
- 语言基础：作用域（词法作用域）、闭包（定义/应用场景/内存泄漏风险）、原型链（proto vs prototype）、this指向规则（call/apply/bind）、ES6+（Promise/all/setTimeout执行顺序、let/const块级作用域、箭头函数与普通函数区别）。
- 异步编程：事件循环（宏任务/微任务队列，如setTimeout/Promise.then/setImmediate的执行顺序）、async/await原理（本质是Generator+自动执行器）。
- 典型问题举例： “setTimeout(fn, 0)和Promise.resolve().then(fn)哪个先执行？为什么？”（微任务优先于宏任务）
- “什么是闭包？举例说明实际应用（如防抖/节流函数）。”
（二）框架相关（根据目标技术栈考察）
主流框架为React/Vue（二选一或都问），大厂可能要求深入原理，中小厂侧重API使用与项目经验。
1. React
- 核心原理：虚拟DOM与Diff算法（同级比较策略）、Hooks原理（useState/useEffect的闭包陷阱、依赖项变化触发更新）、组件生命周期（Class组件vs函数组件+Hooks替代方案）。
- 高频问题： “React中setState是同步还是异步？在什么场景下表现不同？”（合成事件中异步，原生事件/定时器中同步）
- “useEffect的依赖项数组为空/不为空的区别？如何避免无限循环？”
2. Vue
- 核心原理：响应式原理（Vue2的Object.defineProperty vs Vue3的Proxy）、虚拟DOM与模板编译（render函数生成VNode）、Composition API与Options API的区别。
- 高频问题： “Vue2中为什么data必须是函数？Vue3中为什么可以用对象？”（避免组件实例间数据共享）
- “computed和watch的区别？什么场景用computed？”
（三）浏览器与网络（大厂必考）
1. 浏览器原理
- 渲染流程（HTML解析→DOM树→CSSOM→Render树→布局→绘制）、重绘（Repaint）与回流（Reflow）的触发条件及优化（避免频繁操作样式、使用transform/opacity）。
- 典型问题： “从输入URL到页面显示经历了哪些步骤？”（DNS解析→TCP连接→HTTP请求→渲染树构建→渲染）
2. HTTP/HTTPS
- 协议版本（HTTP1.1 vs HTTP2 vs HTTP3特性）、状态码（301/302/403/404/500含义）、缓存策略（强缓存/协商缓存，Cache-Control/ETag/Last-Modified）、跨域解决方案（CORS/JSONP/Nginx反向代理）。
- 典型问题： “HTTP2相比HTTP1.1有哪些优化？”（多路复用、头部压缩、服务器推送）
（四）手写代码（考察逻辑与基础）
大厂几乎必考，中小厂可能抽问，常见类型：
- 基础算法：数组去重（Set/遍历）、深拷贝（递归/JSON.parse(JSON.stringify())的局限性）、防抖（debounce）与节流（throttle）函数实现。
- DOM操作：实现一个拖拽元素、动态渲染列表并支持点击删除。
- 设计模式：实现一个简单的发布-订阅模式（Event Bus）。
- 典型问题举例： “手写Promise.all（处理异步任务并发，全部成功返回结果数组，有一个失败立即reject）。”
- “实现一个函数，判断两个对象是否深度相等。”
（五）项目实战与场景题（区分候选人经验）
大厂/资深岗位重点考察，中小厂可能问基础项目细节：
- 项目难点：“你负责的XX项目中，首屏加载慢是如何优化的？（答案：代码分割、懒加载、CDN、预渲染）”
- 性能优化：“如何分析页面性能瓶颈？（Lighthouse工具、Chrome DevTools的Performance面板、关键渲染路径优化）”
- 跨团队协作：“前端与后端联调时遇到接口字段不一致，如何解决？（约定Swagger文档、Mock数据、接口约定规范）”
（六）计算机基础（大厂/后端关联岗位考察）
- 数据结构：数组/链表/栈/队列的应用（如用栈实现浏览器前进后退）、哈希表（解决重复问题）。
- 算法：常见排序（快排/归并的时间复杂度）、二叉树遍历（前/中/后序递归与非递归）、链表反转。
- 网络：TCP三次握手/四次挥手（为什么需要TIME_WAIT状态）、UDP与TCP的区别（如视频通话用UDP）。
三、不同公司面试风格对比
公司类型 |
考察重点 |
典型问题举例 |
阿里/腾讯 |
基础扎实+业务场景题（如高并发前端优化）+ 计算机基础（网络/数据结构） |
“淘宝首页如何优化首屏加载？（SSR+CDN+资源预加载）”“TCP为什么三次握手？” |
字节跳动 |
框架深度（React/Vue原理）+ 算法（LeetCode中等难度）+ 手写代码（高频） |
“React Hooks的依赖项为什么必须稳定？（闭包问题）”“手写一个虚拟DOM Diff算法。” |
美团/滴滴 |
项目实战（业务逻辑清晰度）+ 性能优化（如列表渲染优化）+ 基础全面 |
“外卖订单列表如何实现无限滚动？（IntersectionObserver）”“Vue组件间通信方式有哪些？” |
外企（如Google） |
英语沟通能力+ 计算机基础（算法/网络）+ 设计题（如设计一个前端缓存系统） |
“Design a cache system for frontend with LRU strategy.”（用Map+双向链表实现） |
中小公司 |
快速上手能力+ 常用框架API（如React/Vue基础用法）+ 基础问题（HTML/CSS/JS） |
“用Vue写一个待办事项列表（增删改查）”“CSS如何实现垂直居中？” |
四、准备建议
- 基础优先：HTML/CSS/JS核心（作用域/闭包/原型链）必须透彻，这是所有公司共性考点。
- 框架深挖：根据目标技术栈（React/Vue），重点掌握原理（如虚拟DOM/Diff、Hooks闭包陷阱）。
- 手写代码：刷LeetCode简单/中等题（尤其数组/链表/排序），同时练习前端专项（防抖/节流、Promise、虚拟DOM）。
- 项目复盘：梳理自己参与的项目，明确“解决了什么问题→用了什么方案→效果如何”，准备技术细节（如性能优化手段）。
- 模拟面试：通过牛客网/LeetCode面试模拟或找同行Mock，练习表达逻辑（清晰说思路→写代码→解释优化点）。
附录：可附加各公司真实面经链接（如牛客网、掘金）、推荐学习资源（《JavaScript高级程序设计》《深入浅出React/Vue》）。
此框架可根据实际收集的题目动态补充（如新增“快手前端常考手写题”“拼多多性能优化重点”等细分模块），建议结合最新面经（202X年）更新高频考点。