前端八股文面经大全：腾讯前端AI面试（2026-02-28）·面经深度解析

优质文章学习记录

07 Apr 2026 — 18 min read

前言

大家好，我是木斯佳。

在这个春节假期，当大家都在谈论返乡、团圆与休息时，作为一名技术人，我的思考却不由自主地转向了行业的「冬」与「春」。

相信很多人都感受到了，在AI浪潮的席卷之下，前端领域的门槛在变高，纯粹的“增删改查”岗位正在肉眼可见地减少。曾经热闹非凡的面经分享，如今也沉寂了许多。但我们都知道，市场的潮水退去，留下的才是真正在踏实准备、努力沉淀的人。学习的需求，从未消失，只是变得更加务实和深入。

这个专栏的初衷很简单：拒绝过时的、流水线式的PDF引流贴，专注于收集和整理当下最新、最真实的前端面试资料。我会在每一份面经和八股文的基础上，尝试从面试官的角度去拆解问题背后的逻辑，而不仅仅是提供一份静态的背诵答案。无论你是校招还是社招，目标是中大厂还是新兴团队，只要是真实发生、有价值的面试经历，我都会在这个专栏里为你沉淀下来。

温馨提示：市面上的面经鱼龙混杂，甄别真伪、把握时效，是我们对抗内卷最有效的武器。

让我们一起充电，为下一个技术春天做好准备。

面经原文内容

📍面试公司：腾讯

🕐面试时间：近期，用户发布于2026-02-28

💻面试岗位：前端AI面试（已挂）

💬候选人状态：已经没招了

❓面试问题：

选择前端的理由（主观题）
给一个你自己从零开始学习一个领域的经历（主观题）
从输入 url 到页面渲染发生了什么（DNS TCP IP）
请说出浏览器的缓存策略
请说明 React 的合成事件的作用，与原生事件的区别是什么
如果让你开发一个动态路由管理系统，你会怎么做。（权限滥用问题如何解决）
DOM BOM 区别和联系
性能优化（用户体验、效率方面）
webpack HMR 是什么，原理是什么？
SSR React 服务端渲染的原理

来源：牛客网许愿赢在转折点

📝 腾讯前端AI面试·深度解析

🎯 面试整体画像

维度	特征
公司定位	腾讯 - 互联网巨头
面试风格	基础纵深型 + 场景设计型 + 原理追问型
难度评级	⭐⭐⭐（三星半，覆盖面广且有一定深度，但是基本上都是一些高频八股文！！我在整理的时候已经发现有很多是之前重复的题目了，深度理解高频八股文非常有用！！！）
考察重心	网络基础、浏览器缓存、React原理、系统设计、工程化
特殊之处	问题从网络基础到框架原理到系统设计，层层递进

🔍 逐题深度解析

（主观题已跳过）

三、从输入url到页面渲染发生了什么

问题：从输入 url 到页面渲染发生了什么（DNS TCP IP）

// 完整流程（分阶段）// 1. 输入URL 用户在浏览器输入 https://www.example.com // 2. DNS解析// 将域名转换为IP地址- 浏览器缓存 - 系统缓存（hosts文件） - 路由器缓存 -ISP缓存 - 根DNS服务器 - 顶级域名服务器（.com） - 权威DNS服务器（example.com） // 3. TCP连接（三次握手） 客户端 → SYN(同步序列号) → 服务器 客户端 ← SYN-ACK(同步确认) ← 服务器 客户端 → ACK(确认) → 服务器 // 连接建立完成// 4. TLS握手（HTTPS）- 客户端发送支持的加密套件和随机数 - 服务器返回证书和随机数 - 客户端验证证书，生成预主密钥，用公钥加密发送 - 服务器用私钥解密，生成会话密钥 - 双方确认，开始加密通信 // 5. 发送HTTP请求GET/index.html HTTP/1.1Host: www.example.com User-Agent: Chrome/120.0.0.0Accept: text/html,application/xhtml+xml Accept-Encoding: gzip, deflate, br Connection: keep-alive // 6. 服务器处理请求- 路由匹配 - 执行后端代码 - 查询数据库 - 生成响应 // 7. 返回HTTP响应HTTP/1.1200OK Content-Type: text/html; charset=UTF-8 Content-Length:1234 Cache-Control: max-age=3600<!DOCTYPE html><html><head><link rel="stylesheet" href="style.css"></head><body><div id="app"></div><script src="main.js"></script></body></html>// 8. 浏览器解析HTML// - 构建DOM树// - 遇到link，下载CSS（不阻塞解析）// - 遇到script，下载并执行JS（阻塞解析）// 9. 构建CSSOM树// 解析CSS，生成样式规则// 10. 构建渲染树// DOM树 + CSSOM树 → 渲染树（只包含可见元素）// 11. 布局（Layout/Reflow）// 计算每个元素的位置和大小// 12. 绘制（Paint）// 将渲染树绘制到屏幕上// 13. 合成（Composite）// 将不同图层合成，显示在屏幕上// 关键优化点// - DNS预解析：<link rel="dns-prefetch" href="//api.example.com">// - 预连接：<link rel="preconnect" href="https://api.example.com">// - 预加载：<link rel="preload" href="critical.js" as="script">// - 预获取：<link rel="prefetch" href="next-page.js">

四、浏览器的缓存策略

问题：请说出浏览器的缓存策略

// 浏览器缓存分为两大类：强缓存和协商缓存// 1. 强缓存（不发请求，直接读本地）// 响应头 Cache-Control: max-age=3600// 缓存1小时（HTTP/1.1）Expires: Wed,21 Oct 202507:28:00GMT// 绝对时间（HTTP/1.0）// 适用场景// - 静态资源（图片、CSS、JS）// - 带hash的文件（如 app.8f3c9d.js）// - 长期不变的内容// 2. 协商缓存（发请求，服务器判断）// 响应头（第一次返回） Last-Modified: Wed,21 Oct 202407:28:00GMT// 最后修改时间ETag:"33a64df551425fcc55e4d42a148795d9f25f89d4"// 文件指纹// 请求头（后续请求带上） If-Modified-Since: Wed,21 Oct 202407:28:00GMT If-None-Match:"33a64df551425fcc55e4d42a148795d9f25f89d4"// 服务器判断：// - 未修改 → 返回304，不返回body// - 已修改 → 返回200和新资源// 适用场景// - HTML文件// - API接口// - 可能变化但不频繁的资源// 3. 缓存位置// - Memory Cache（内存缓存）：快，进程关闭后消失// - Disk Cache（磁盘缓存）：慢，持久化// - Service Worker Cache：可编程缓存// 4. 缓存策略组合// 最佳实践// HTML：协商缓存 Cache-Control: no-cache // JS/CSS/图片：强缓存 + 文件名hash// app-8f3c9d.js → 内容变化时hash变化，自动更新 Cache-Control: max-age=31536000// 5. 缓存相关字段// Pragma: no-cache // HTTP/1.0，兼容旧浏览器// Vary: User-Agent // 根据UA决定是否使用缓存

五、React合成事件

问题：请说明 React 的合成事件的作用，与原生事件的区别是什么

// 1. 什么是合成事件（SyntheticEvent）// React封装的事件系统，跨浏览器包装器// 使用方式<button onClick={handleClick}>点击</button>// 2. 合成事件的作用// 2.1 浏览器兼容性// 原生事件在不同浏览器有差异 button.addEventListener('click', handleClick)// IE和其他浏览器不同// 合成事件统一了行为functionhandleClick(e){ e.preventDefault()// 在所有浏览器都有效 e.stopPropagation()// 统一的行为}// 2.2 性能优化（事件委托）// React事件绑定原理// - 不是绑定到具体DOM元素// - 所有事件都委托到document（React 16）或root容器（React 17+）// React 17之前 document.addEventListener('click', handleEvent)// React 17之后 rootNode.addEventListener('click', handleEvent)// 2.3 事件池（React 16及以前）// 合成事件对象会被复用，属性在回调后清空functionhandleClick(e){ console.log(e.type)// 可以访问setTimeout(()=>{ console.log(e.type)// React 16中为null（已回收）},100)}// 解决：e.persist()functionhandleClick(e){ e.persist()// 从事件池中移除setTimeout(()=>{ console.log(e.type)// 现在可以访问},100)}// React 17之后移除了事件池// 3. 合成事件 vs 原生事件| 维度 | 合成事件 | 原生事件 ||------|---------|---------||**绑定方式**| 通过JSX属性 | addEventListener ||**触发阶段**| 统一在冒泡阶段 | 可指定捕获/冒泡 ||**跨浏览器**| 统一行为 | 有差异 ||**内存**| 事件委托，占用少 | 每个事件单独绑定 ||**访问事件对象**| SyntheticEvent包装 | 原生Event |// 4. 混合使用注意事项// 合成事件先触发，原生事件后触发componentDidMount(){// 原生事件 document.addEventListener('click',()=>{ console.log('原生事件')})}render(){return(<button onClick={()=>{ console.log('合成事件')}}> 点击 </button>)}// 输出顺序：合成事件 → 原生事件// 阻止冒泡需注意handleClick(e){ e.stopPropagation()// 只能阻止合成事件的冒泡// 无法阻止原生事件冒泡}

六、动态路由管理系统设计

问题：如果让你开发一个动态路由管理系统，你会怎么做。（权限滥用问题如何解决）

// 1. 系统需求分析// - 动态路由：路由可以根据配置动态生成// - 权限控制：不同用户看到不同路由// - 安全性：防止权限滥用// 2. 系统设计// 2.1 数据结构设计// 后端返回的路由配置const routesConfig ={menus:[{path:'/dashboard',name:'仪表盘',icon:'DashboardOutlined',component:'Dashboard',permission:'dashboard:view',// 权限标识},{path:'/user',name:'用户管理',icon:'UserOutlined',permission:'user:manage',children:[{path:'/user/list',name:'用户列表',component:'UserList',permission:'user:list',},{path:'/user/role',name:'角色管理',component:'RoleList',permission:'role:manage',}]}],permissions:['dashboard:view','user:list']// 当前用户权限}// 2.2 动态路由生成// router.jsimport{ createRouter, createWebHistory }from'vue-router'// 组件映射const componentMap ={Dashboard:()=>import('@/views/Dashboard.vue'),UserList:()=>import('@/views/UserList.vue'),RoleList:()=>import('@/views/RoleList.vue'),}// 递归生成路由functiongenerateRoutes(menuItems, userPermissions){const routes =[] menuItems.forEach(item=>{// 权限检查if(item.permission &&!userPermissions.includes(item.permission)){return// 无权限，跳过}const route ={path: item.path,name: item.name,component: item.component ? componentMap[item.component]:undefined,meta:{permission: item.permission,icon: item.icon }}if(item.children){ route.children =generateRoutes(item.children, userPermissions)} routes.push(route)})return routes }// 2.3 权限滥用问题解决方案// 方案1：后端路由白名单// 前端只存储静态路由（登录页、404等）// 动态路由全部由后端返回，前端只负责渲染// 方案2：路由守卫二次校验 router.beforeEach(async(to, from, next)=>{// 获取用户权限const userPermissions =awaitgetUserPermissions()// 检查目标路由所需权限const requiredPermission = to.meta.permission if(requiredPermission &&!userPermissions.includes(requiredPermission)){// 无权限，跳转到403或提示页next('/403')}else{next()}})// 方案3：按钮级权限控制// 自定义指令 Vue.directive('permission',{mounted(el, binding){const userPermissions = store.state.user.permissions const requiredPermission = binding.value if(!userPermissions.includes(requiredPermission)){ el.parentNode?.removeChild(el)// 移除无权限元素}}})// 使用<button v-permission="'user:create'">新增用户</button>// 方案4：动态路由缓存// 用户权限变化时，重置路由functionresetRouter(){const newRoutes =generateRoutes(routesConfig.menus, newPermissions)// 清空旧路由 router.matcher =createRouter().matcher // 添加新路由 newRoutes.forEach(route=>{ router.addRoute(route)})}// 3. 完整流程// 用户登录 → 获取token → 获取用户信息和权限 → 生成动态路由 → 添加路由 → 渲染菜单

七、DOM BOM区别和联系

问题：DOM BOM 区别和联系

// 1. DOM（Document Object Model）// 操作文档的接口// DOM 核心对象 document.getElementById('app') document.querySelector('.class') document.createElement('div') document.cookie // DOM 树结构// window// └── document// ├── html// │ ├── head// │ └── body// │ ├── div// │ └── script// 2. BOM（Browser Object Model）// 操作浏览器的接口// BOM 核心对象 window // 浏览器窗口 navigator // 浏览器信息 location // URL信息 history // 浏览历史 screen // 屏幕信息// BOM 常用API window.innerWidth / window.innerHeight // 视口尺寸 window.scrollTo(0,0)// 滚动 window.alert('提示')// 弹窗 window.open('https://example.com')// 打开新窗口 window.localStorage // 本地存储 window.sessionStorage // 会话存储 navigator.userAgent // 用户代理 navigator.geolocation // 地理位置 location.href // 当前URL location.reload()// 刷新 history.back()// 后退 history.forward()// 前进// 3. 区别与联系| 维度 |DOM|BOM||------|-----|-----||**全称**| Document Object Model | Browser Object Model ||**作用**| 操作页面内容 | 操作浏览器本身 ||**核心对象**| document | window ||**标准**|W3C标准 | 浏览器厂商实现，部分标准化 ||**关系**| document 是 window 的属性 | window 是 BOM 的顶层对象 |// 4. 联系// BOM 包含 DOM// window.document 就是 DOM 的入口// 5. 实际应用// 获取页面尺寸const viewportWidth = window.innerWidth // BOMconst elementWidth = document.querySelector('.box').offsetWidth // DOM// 操作URL + 获取页面元素const id =newURLSearchParams(location.search).get('id')// BOM document.getElementById(`item-${id}`).scrollIntoView()// DOM

八、性能优化（用户体验、效率方面）

问题：性能优化（用户体验、效率方面）

// 1. 加载性能优化（用户体验）// 1.1 资源优化- 图片压缩：WebP格式，比JPEG小25-35%- 代码压缩：Terser压缩JS，CSSNano压缩CSS- Gzip/Brotli：服务端压缩，传输体积减少70%// 1.2 加载策略- 路由懒加载：按需加载路由组件 const Home = React.lazy(()=>import('./Home'))- 图片懒加载：IntersectionObserver <img loading="lazy" src="image.jpg"/>- 预加载关键资源 <link rel="preload" href="critical.css"as="style">- 预连接第三方域名 <link rel="preconnect" href="https://api.example.com">// 1.3 缓存策略- 强缓存 + hash文件名 - 本地缓存：localStorage存储静态数据 // 2. 运行时性能优化（效率）// 2.1 减少重排重绘// 使用transform代替top/left element.style.transform ='translateX(100px)'// 不触发重排// 批量操作DOMconst fragment = document.createDocumentFragment()for(let i =0; i <1000; i++){const li = document.createElement('li') li.textContent =`Item ${i}` fragment.appendChild(li)} list.appendChild(fragment)// 一次重排// 2.2 React/Vue优化// Reactconst MemoizedComponent = React.memo(Component)const memoizedValue =useMemo(()=>compute(a, b),[a, b])const memoizedCallback =useCallback(()=>doSomething(),[deps])// Vue<template><div v-memo="[item.id]">{{ item.text }}</div></template>// 2.3 虚拟滚动// 只渲染可见区域import{ FixedSizeList as List }from'react-window'<List height={500} itemCount={10000} itemSize={35} width={300}>{({ index, style })=>(<div style={style}>Row {index}</div>)}</List>// 2.4 Web Worker处理复杂计算const worker =newWorker('worker.js') worker.postMessage(largeData) worker.onmessage=(e)=>{updateUI(e.data)}// 3. 用户体验优化// 3.1 骨架屏<div class="skeleton"><div class="skeleton-avatar"></div><div class="skeleton-line"></div><div class="skeleton-line"></div></div>// 3.2 加载状态<button disabled={loading}>{loading ?'提交中...':'提交'}</button>// 3.3 错误处理classErrorBoundaryextendsReact.Component{componentDidCatch(error, errorInfo){logError(error, errorInfo)}render(){if(this.state.hasError){return<div>出错了，请稍后重试</div>}returnthis.props.children }}// 3.4 进度反馈// 大文件上传进度constonProgress=(percent)=>{setProgress(percent)}// 4. 监控与量化// 核心Web指标newPerformanceObserver((list)=>{for(const entry of list.getEntries()){if(entry.entryType ==='largest-contentful-paint'){ console.log('LCP:', entry.startTime)}}}).observe({type:'largest-contentful-paint',buffered:true})

九、webpack HMR原理

问题：webpack HMR 是什么，原理是什么？

// 1. HMR是什么？// HMR = Hot Module Replacement（热模块替换）// 在应用运行时替换、添加、删除模块，无需完全刷新页面// 2. HMR的核心价值// - 保持应用状态（不像live reload会重置）// - 快速反馈（修改样式立即生效）// - 提升开发体验// 3. HMR工作原理// 3.1 整体流程1. 启动devServer，建立WebSocket连接 2. 监听文件变化 3. 编译发生变化的模块 4. 通过WebSocket通知浏览器 5. 浏览器请求更新后的模块 6. 替换旧模块，执行更新 // 3.2 详细流程// 服务端classHMRServer{constructor(){this.clients =[]this.watcher = fs.watch('src',this.onFileChange.bind(this))}onFileChange(){// 1. 重新编译 compiler.run((err, stats)=>{// 2. 生成补丁（manifest + updated modules）const manifest =getManifest(stats)// 3. 广播给所有客户端this.clients.forEach(client=>{ client.send({type:'hash',data: manifest.hash }) client.send({type:'ok'})})})}}// 客户端const HMRClient ={socket:newWebSocket('ws://localhost:8080'),init(){this.socket.onmessage=(event)=>{const message =JSON.parse(event.data)switch(message.type){case'hash':this.currentHash = message.data breakcase'ok':this.checkForUpdates()break}}},checkForUpdates(){// 请求更新清单fetch(`/__webpack_hmr?hash=${this.currentHash}`).then(res=> res.json()).then(manifest=>{if(manifest.c){// 有变化this.updateModules(manifest.c)}})},updateModules(chunks){// 加载更新后的模块importScripts(chunks.map(c=>`/update/${c}.js`))// 执行模块的accept回调 __webpack_require__.hmrApplyUpdates()}}// 4. 模块接受更新// 在模块中声明接受HMRif(module.hot){ module.hot.accept('./component.js',()=>{// 更新后的处理render(require('./component.js'))})// 处理自身更新 module.hot.accept()// 处理废弃模块 module.hot.dispose(()=>{// 清理工作})}// 5. React HMR配置// react-hot-loader / @hot-loader/react-domif(module.hot){ module.hot.accept('./App',()=>{render(App)})}// 6. Vue HMR// vue-loader自动支持HMR// 无需手动配置

十、SSR React服务端渲染的原理

问题：SSR React 服务端渲染的原理

// 1. 什么是SSR？// SSR = Server-Side Rendering（服务端渲染）// 在服务器生成完整的HTML，发送给客户端// 2. 传统CSR vs SSR| 维度 |CSR（客户端渲染） |SSR（服务端渲染） ||------|------------------|------------------|| 首屏加载 | 慢（需下载JS后渲染） | 快（直接返回HTML） ||SEO| 差（爬虫看不到内容） | 好（HTML包含内容） || 服务端压力 | 小 | 大 || 交互 | 需二次hydrate | 需二次hydrate |// 3. SSR工作原理// 3.1 服务端部分// server.jsimport express from'express'import React from'react'import{ renderToString }from'react-dom/server'import App from'./App'const app =express() app.get('*',(req, res)=>{// 1. 获取数据const data =fetchData(req.url)// 2. 渲染组件为HTML字符串const html =renderToString(<Provider store={createStore(data)}><App url={req.url}/></Provider>)// 3. 注入数据和HTML到模板 res.send(` <!DOCTYPE html> <html> <head> <title>SSR App</title> </head> <body> <div>${html}</div> <script> window.__INITIAL_DATA__ = ${JSON.stringify(data)} </script> <script src="/client.js"></script> </body> </html> `)})// 3.2 客户端部分// client.jsimport React from'react'import{ hydrateRoot }from'react-dom/client'import App from'./App'// 使用hydrate复用服务端生成的DOMhydrateRoot( document.getElementById('root'),<Provider store={createStore(window.__INITIAL_DATA__)}><App /></Provider>)// 4. 数据同步// 服务端获取数据，注入到window// 客户端直接使用，避免重复请求// 5. React关键API// renderToString: 将组件渲染为HTML字符串// hydrateRoot: 复用服务端HTML，只绑定事件// 6. Next.js实现原理// Next.js封装了SSR流程// pages下的每个页面都会生成对应的路由// getServerSideProps（每次请求执行）exportasyncfunctiongetServerSideProps(context){const data =awaitfetchData()return{props:{ data }}}// getStaticProps（构建时执行）exportasyncfunctiongetStaticProps(){const data =awaitfetchData()return{props:{ data }}}// 7. SSR注意事项// - 避免使用浏览器特有API（window/document）// - 数据获取需要在服务端完成// - 注意内存泄漏（每次请求创建新的store）// - 样式处理（使用css-in-js或提取CSS）// 8. 性能优化// - 流式渲染：renderToPipeableStream// - 选择性Hydrate：部分组件延迟hydrate// - 缓存策略：缓存整个页面或数据

📚 知识点速查表

知识点	核心要点
输入URL到渲染	DNS、TCP、TLS、HTTP、DOM树、CSSOM树、渲染树、布局、绘制
浏览器缓存	强缓存(max-age)、协商缓存(Last-Modified/ETag)、缓存位置
React合成事件	兼容性、事件委托、事件池、与原生事件区别
动态路由管理	权限控制、路由守卫、按钮级权限、后端白名单
DOM/BOM	DOM操作文档、BOM操作浏览器、window.document关系
性能优化	加载优化、运行时优化、用户体验优化、监控量化
webpack HMR	WebSocket、补丁更新、accept/dispose、框架集成
SSR原理	renderToString、hydrate、数据同步、Next.js实现

📌 最后一句：

腾讯的这场面试，问题看似常规，但每个都可以往深处挖。
但是，话又说回来了，我在整理的时候已经发现有很多是之前重复的题目了，深度理解高频八股文非常有用！！！这个专栏还是十分有意义的。