[{"data":1,"prerenderedAt":1105},["ShallowReactive",2],{"\u002F2026\u002F2026-frontend-interview-topic-summary":3,"surround-\u002F2026\u002F2026-frontend-interview-topic-summary":1099},{"id":4,"title":5,"body":6,"categories":1077,"date":1079,"description":1080,"draft":1081,"extension":1082,"image":1083,"meta":1084,"navigation":1086,"path":1087,"permalink":1083,"published":1083,"readingTime":1088,"recommend":1083,"references":1083,"seo":1093,"sitemap":1094,"stem":1095,"tags":1096,"type":1097,"updated":1079,"__hash__":1098},"content\u002Fposts\u002F2026\u002F2026-frontend-interview-topic-summary.md","常见问题分类汇总",{"type":7,"value":8,"toc":1016},"minimark",[9,13,38,42,47,73,77,100,104,124,128,131,148,152,178,182,186,206,210,248,252,263,267,270,299,302,328,332,336,359,363,386,390,416,420,424,453,456,482,485,508,512,550,553,556,576,579,602,605,628,632,673,677,681,707,711,734,738,770,773,776,796,799,825,828,832,873,876,926,930,962,965,968,985,988,1002,1005],[10,11,12],"h2",{"id":12},"高频趋势",[14,15,16,20,23,26,29,32,35],"ul",{},[17,18,19],"li",{},"AI 前端、SSE 流式输出、RAG、Agent、MCP、Skill、AI Coding 成为 2026 面经中的高频新增方向。",[17,21,22],{},"中大厂依然高频考察 JavaScript 基础、事件循环、Promise、闭包、原型链、this、TypeScript。",[17,24,25],{},"React 方向重点集中在 Fiber、Hooks、memo\u002FuseMemo、事件机制、状态管理、虚拟 DOM 与 diff。",[17,27,28],{},"Vue 方向重点集中在 Vue2\u002FVue3 响应式差异、Proxy、nextTick、组件通信、watch\u002Fcomputed、Pinia。",[17,30,31],{},"网络方向高频覆盖 HTTP 版本演进、HTTPS\u002FTLS、缓存、跨域、Cookie\u002FJWT、SSE\u002FWebSocket。",[17,33,34],{},"工程化方向高频覆盖 Vite\u002FWebpack、Tree Shaking、Monorepo、微前端、组件库、性能监控。",[17,36,37],{},"手写题集中在 Promise、并发调度、防抖节流、数组\u002F树\u002F链表、事件总线、深拷贝、URL 解析、倒计时。",[10,39,41],{"id":40},"javascript-基础","JavaScript 基础",[43,44,46],"h3",{"id":45},"类型变量与相等判断","类型、变量与相等判断",[14,48,49,52,55,58,61,64,67,70],{},[17,50,51],{},"JavaScript 基本数据类型有哪些？如何判断？（京东零售 2025 已清理前旧题同类；字节广告交易 2026-05-18 一面；京东零售 2026-06 企业页同类题）",[17,53,54],{},"typeof、instanceof、Object.prototype.toString.call 的原理分别是什么？（字节 2026-04-13 一面）",[17,56,57],{},"如何判断一个对象是否为空对象？（秦丝科技 2026-04 笔试）",[17,59,60],{},"如何判断一个变量是不是数组？Array.isArray 和 instanceof 有什么差异？（淘宝闪购 2026-05 一面）",[17,62,63],{},"null 和 undefined 有什么区别？typeof null 为什么是 object？（百度 2026 前端同类题）",[17,65,66],{},"var、let、const 的作用域区别是什么？暂时性死区是什么？（淘宝闪购 2026-05 一面；TME 2026-04 一面）",[17,68,69],{},"== 和 === 有什么区别？隐式类型转换规则是什么？（淘宝闪购 2026-05 一面；东方财富 2026-04 一面）",[17,71,72],{},"0.1 + 0.2 为什么不等于 0.3？如何处理精度问题？（京东零售类问题；秦丝科技 2026-04 笔试）",[43,74,76],{"id":75},"闭包作用域this","闭包、作用域、this",[14,78,79,82,85,88,91,94,97],{},[17,80,81],{},"什么是闭包？闭包有什么应用场景和缺点？（腾讯 TEG 2026-04 一面；携程 2026-04 一面；腾讯云智 2026-04 一面）",[17,83,84],{},"如何用通俗比喻解释闭包？（腾讯云 2026-03 二面）",[17,86,87],{},"使用闭包后页面变卡，如何排查？（字节番茄小说 2026-04 二面）",[17,89,90],{},"原型和原型链是什么？原型链顶层是什么？（腾讯 TEG 2026-04 一面；蔚来 2026-01 一面）",[17,92,93],{},"给一段原型链代码，判断输出结果。（蔚来 2026-01 一面）",[17,95,96],{},"this 绑定规则是什么？箭头函数和普通函数的 this 有什么区别？（哈啰 2026-03 一面；大麦 2026-02 电话面；字节番茄小说 2026-04 三面）",[17,98,99],{},"call、apply、bind 有什么区别？如何手写 bind\u002Fcall？（字节 2026-04 工程化一面；小红书 2025 已清理前同类题）",[43,101,103],{"id":102},"数组对象与拷贝","数组、对象与拷贝",[14,105,106,109,112,115,118,121],{},[17,107,108],{},"forEach 和 map 有什么区别？是否会修改原数组？（淘宝闪购 2026-05 一面）",[17,110,111],{},"数组有哪些常见方法？pop、unshift、map、slice 如何应用？（华硕 2026-01 面试）",[17,113,114],{},"深拷贝和浅拷贝是什么？有哪些实现方式？structuredClone 用过吗？（淘宝闪购 2026-05 一面；东方财富 2026-04 一面）",[17,116,117],{},"如何展平多层嵌套数组？（字节风控 2026-03 一面；快手 2026-03 一面手写）",[17,119,120],{},"如何实现数组分组函数？（袋鼠云 2026-03 一面）",[17,122,123],{},"如何实现数组去重、排序、合并？（快手电商 2026-03 一面）",[10,125,127],{"id":126},"异步promise-与事件循环","异步、Promise 与事件循环",[43,129,130],{"id":130},"事件循环",[14,132,133,136,139,142,145],{},[17,134,135],{},"JS 事件循环是什么？宏任务、微任务执行顺序如何判断？（虾皮 2026-01 一面；腾讯 PCG 2026-03 一面；东方财富 2026-04 一面）",[17,137,138],{},"浏览器和 Node.js 的事件循环有什么差异？（TME 2026-04 一面；环界云 2026-03 一面）",[17,140,141],{},"给事件循环代码判断输出，涉及 Promise、setTimeout、setInterval。（TME 2026-04 一面；美团 2026-12 清理前同类；哈啰 2026-01 一面）",[17,143,144],{},"requestAnimationFrame 和 requestIdleCallback 的执行时机是什么？（TME 2026-10 清理前同类；有赞 2026-01 汇总）",[17,146,147],{},"如果想把代码逻辑放进下一个事件循环，怎么做？（快手 2025 清理前同类；2026 同类在多场出现）",[43,149,151],{"id":150},"promise-与-asyncawait","Promise 与 async\u002Fawait",[14,153,154,157,160,163,166,169,172,175],{},[17,155,156],{},"Promise 状态有哪些？如何流转？链式调用原理是什么？（字节 2026-03 Promise\u002FAI 一面）",[17,158,159],{},"Promise 常用 API 有哪些？Promise.all 和 Promise.allSettled 有什么区别？（小红书 2026-01 一面；MiniMax 2026-02 一面）",[17,161,162],{},"手写 Promise.all，需要如何判断 resolve 时机和错误处理？（小红书 2026-02 一面）",[17,164,165],{},"async\u002Fawait 和 Promise 有什么关系与区别？（字节 2026-03 Promise\u002FAI 一面）",[17,167,168],{},"三个互不依赖的请求，用 async\u002Fawait 和 Promise 分别怎么写？（字节 2026-03 Promise\u002FAI 一面）",[17,170,171],{},"Promise 中包含 setTimeout、throw、new Error 时输出顺序如何？（TME 2026-04 一面）",[17,173,174],{},"如何做 Promise 并发控制？（阿里云 AI 应用 2026-03 一面；字节番茄小说 2026-03 一面）",[17,176,177],{},"Promise 红绿灯题如何设计？（Bilibili 2026-03 一面）",[10,179,181],{"id":180},"htmlcss-与浏览器渲染","HTML、CSS 与浏览器渲染",[43,183,185],{"id":184},"html-与浏览器流程","HTML 与浏览器流程",[14,187,188,191,194,197,200,203],{},[17,189,190],{},"从输入 URL 到页面呈现发生了什么？（腾讯企业微信 2026-05 一面；合合信息 2026-04 群面；蔚来 2026-01 一面）",[17,192,193],{},"浏览器如何解析、渲染页面？（深圳超频链接 2026-03 一面；网易 2026-05 一面）",[17,195,196],{},"HTML 语义化是什么？为什么使用语义化标签？（正泰电气 2026-04 一面；合合信息 2026-04 群面）",[17,198,199],{},"meta 标签有哪些作用？（Bilibili 2026-03 一面）",[17,201,202],{},"script 的 async 和 defer 有什么区别？（腾讯 WXG 2025 已清理前同类；字节风控 2026-03 一面）",[17,204,205],{},"img 标签请求资源的过程是什么？（字节番茄小说 2026-03 一面）",[43,207,209],{"id":208},"css-布局与样式","CSS 布局与样式",[14,211,212,215,218,221,224,227,230,233,236,239,242,245],{},[17,213,214],{},"CSS 盒模型是什么？box-sizing 可以设置什么？（腾讯 TEG 2026-04 一面；字节风控 2026-03 一面；万兴科技 2026-02 一面）",[17,216,217],{},"BFC 是什么？如何触发？有哪些使用场景？（携程 2026-04 一面；字节番茄小说 2026-04 二面）",[17,219,220],{},"如何实现水平垂直居中？（腾讯 TEG 2026-04 一面；美团 2026-04 一面；TME 2026-04 一面）",[17,222,223],{},"Flexbox 基本原理是什么？flex-grow、justify-content、align-items 如何使用？（美团 2026-04 一面；拓竹 2026-03 一面）",[17,225,226],{},"Grid 布局了解吗？适合什么场景？（京东日常 2025 已清理前同类，2026 多场同类）",[17,228,229],{},"三栏布局如何实现？grid 和 flex 如何选择？（小红书 2026-02 一面）",[17,231,232],{},"px、em、rem、vw、vh 有什么区别？（字节番茄小说 2026-04 三面；字节 2025 清理前同类）",[17,234,235],{},"rem 适配如何做？移动端如何 debug？（网易 2026-05 一面；MetaApp 2026-03 一面）",[17,237,238],{},"CSS 如何实现暗黑模式切换？（腾讯 WXG 2026-05 一面）",[17,240,241],{},"CSS 选择器优先级如何计算？（字节一面同类；滴滴 2026-12 清理前同类）",[17,243,244],{},"回流和重绘是什么？如何减少？transform 会触发回流吗？（合合信息 2026-04 群面；蓝色光标 2026-03 一面；万兴科技 2026-02 一面）",[17,246,247],{},"伪类和伪元素有什么区别？（滴滴 2026 相关同类题）",[43,249,251],{"id":250},"css-动画与交互","CSS 动画与交互",[14,253,254,257,260],{},[17,255,256],{},"CSS 如何实现动画？（淘天搜推 2025 清理前同类；MetaApp 2026-03 抛物线动画）",[17,258,259],{},"CSS 抛物线动画如何实现？（MetaApp 2026-03 一面）",[17,261,262],{},"如何实现 ChatGPT 类似的打字机光标闪烁效果？（MiniMax 2026-02 一面）",[10,264,266],{"id":265},"vue","Vue",[43,268,269],{"id":269},"响应式与渲染",[14,271,272,275,278,281,284,287,290,293,296],{},[17,273,274],{},"Vue2 和 Vue3 有什么区别？（蔚来 2026-01 一面；腾讯新闻 2026-03 一面；淘宝闪购 2026-05 一面）",[17,276,277],{},"Vue2 和 Vue3 响应式原理分别是什么？Object.defineProperty 和 Proxy 有什么区别？（小红书 2026-02 一面；安恒信息 2026-02 线上面；字节 2026-04 一面）",[17,279,280],{},"Vue3 Proxy 的 track、trigger、effect 分别是什么？（字节 2026-04 一面）",[17,282,283],{},"Vue 的数据响应式详细说一下。（小红书 2026-02 日常实习一面凉经）",[17,285,286],{},"Vue2 对 Object.defineProperty 做了哪些完善？（小红书 2026-02 日常实习一面凉经）",[17,288,289],{},"假如空数组修改为字符串，Vue2 和 Vue3 能监听到吗？（小红书 2026-02 日常实习一面凉经）",[17,291,292],{},"Vue 的 nextTick 原理和作用是什么？降级方案是什么？（小红书 2026-02 一面；滴滴 2026-04 一面）",[17,294,295],{},"Vue diff 原理是什么？（滴滴 2026-04 二面）",[17,297,298],{},"Vue key 的作用是什么？（蓝色光标 2026-03 一面）",[43,300,301],{"id":301},"组件通信与状态管理",[14,303,304,307,310,313,316,319,322,325],{},[17,305,306],{},"Vue 组件通信方式有哪些？父子、兄弟、跨层级分别怎么通信？（网易 2026-05 一面；袋鼠云 2026-03 一面；TME 2026-04 一面）",[17,308,309],{},"props 能否在子组件里直接修改？为什么？（淘宝闪购 2026-05 一面）",[17,311,312],{},"v-if 和 v-show 的区别是什么？（蓝色光标 2026-03 一面；淘宝闪购 2026-05 一面）",[17,314,315],{},"watch 和 computed 有什么区别？（网易 2026-05 一面）",[17,317,318],{},"watch 原理是什么？（腾讯 TEG 2026-04 一面）",[17,320,321],{},"Pinia 设计思想是什么？为什么选择 Pinia？（深睿医疗 2026-03 一面；京东 2026-04 一面；多场项目追问）",[17,323,324],{},"Vuex 和 Pinia 有什么区别？（美团 2026-12 清理前同类；2026 多场状态管理同类）",[17,326,327],{},"keep-alive 的作用和原理是什么？（美团 2026-04 一面；蓝色光标 2026-03 一面）",[10,329,331],{"id":330},"react","React",[43,333,335],{"id":334},"react-基础与-fiber","React 基础与 Fiber",[14,337,338,341,344,347,350,353,356],{},[17,339,340],{},"如何理解 React？React 有哪些优缺点？（质谱华章 2026-05 一面）",[17,342,343],{},"React 和 Vue 有什么区别？如何做选型？（小红书 2026-01 一面；淘宝闪购 2026-05 一面；哈啰 2026-03 一面）",[17,345,346],{},"React Fiber 架构是什么？核心设计思想是什么？（小红书 2026-01 一面；字节番茄小说 2026-03 一面；快手 2026-05 日常实习一面）",[17,348,349],{},"Fiber 的时间优先级如何实现？（小红书 2026-01 一面）",[17,351,352],{},"Fiber 为什么有两棵树？虚拟 DOM 和 diff 更新流程是什么？（字节中国广告与交易 2026-05 一面）",[17,354,355],{},"React Diff 算法如何工作？（质谱华章 2026-05 一面；拓竹 2026-03 一面）",[17,357,358],{},"React 事件机制是什么？React 事件和 DOM 事件有什么不同？（携程 2026-04 一面；腾讯 AI 面摘要）",[43,360,362],{"id":361},"hooks-与组件优化","Hooks 与组件优化",[14,364,365,368,371,374,377,380,383],{},[17,366,367],{},"React 常见 Hooks 有哪些？useEffect 第二个参数不同取值分别代表什么？（快手电商 2026-03 二面；哈啰 2026-01 一面）",[17,369,370],{},"React Hooks 原理是什么？为什么和链表结构有关？（快手电商 2026-05 一面）",[17,372,373],{},"useMemo、useCallback、React.memo 分别解决什么问题？（快手电商 2026-03 二面；质谱华章 2026-05 一面）",[17,375,376],{},"useEffect 和 useLayoutEffect 有什么区别？（TME 2026-04 一面同类）",[17,378,379],{},"如何实现自定义 Hook？自定义 Hook 和 utils 方法有什么本质区别？（快手 2026-05 暑期一面）",[17,381,382],{},"高阶组件是什么？和普通组件有什么区别？（小迈科技 2026-04 一面）",[17,384,385],{},"React Native 和原生应用如何通信？（滴滴 2026-04 一面）",[10,387,389],{"id":388},"typescript","TypeScript",[14,391,392,395,398,401,404,407,410,413],{},[17,393,394],{},"TypeScript 和 JavaScript 有什么不一样？（中科星图 2026-04 面试；上海威派格 2026-05 面试）",[17,396,397],{},"type 和 interface 有什么区别？（小红书 2026-03 一面；快手电商 2026-05 一面；字节中国广告与交易 2026-05 一面）",[17,399,400],{},"TypeScript 工具类型有哪些？（小红书 2026-01 一面）",[17,402,403],{},"TypeScript 高级类型有哪些？（阿里云 AI 应用 2026-03 一面；快手电商 2026-05 一面）",[17,405,406],{},"如何把属性改为非必填？如何删除接口中的某个属性？（TME 2026-04 一面；字节番茄小说 2026-04 二面）",[17,408,409],{},"泛型是什么？项目中哪里用过？（小迈科技 2026-04 一面；字节中国广告与交易 2026-05 一面）",[17,411,412],{},"是否了解 TypeScript 类型体操？（字节中国广告与交易 2026-05 一面）",[17,414,415],{},"TypeScript Decorators 的用途和适用场景是什么？（云象科技 2026-01 面试）",[10,417,419],{"id":418},"网络协议缓存与安全","网络协议、缓存与安全",[43,421,423],{"id":422},"http-https-tcp-udp","HTTP \u002F HTTPS \u002F TCP \u002F UDP",[14,425,426,429,432,435,438,441,444,447,450],{},[17,427,428],{},"HTTP 常见状态码有哪些？（蔚来 2026-01 一面；小迈科技 2026-04 一面）",[17,430,431],{},"HTTP\u002F1.1、HTTP\u002F2、HTTP\u002F3 有什么区别？（小红书 2026-01 一面；TME 2026-04 电话三面；字节中国广告与交易 2026-05 一面）",[17,433,434],{},"HTTP\u002F3 使用 UDP 如何保证可靠性？（字节番茄小说 2026-03 一面）",[17,436,437],{},"HTTPS 为什么安全？TLS 握手和加密流程是什么？（字节中国广告与交易 2026-05 一面；腾讯 TEG 2026-04 一面）",[17,439,440],{},"证书是什么？客户端如何校验证书合法性？证书存在哪里？（字节番茄小说 2026-04 二面；字节中国广告与交易 2026-05 一面）",[17,442,443],{},"TCP 三次握手、四次挥手是什么？为什么是三次和四次？（蔚来 2026-01 一面；深圳超频链接 2026-03 一面；字节中国广告与交易 2026-05 一面）",[17,445,446],{},"TCP 和 UDP 有什么区别？腾讯会议这类音视频更适合哪种？（深圳超频链接 2026-03 一面）",[17,448,449],{},"TCP 可靠机制、拥塞控制、流量控制、慢启动、快速重传是什么？（小红书 2025 清理前同类；2026 二面同类）",[17,451,452],{},"HTTP、WebSocket 分别属于网络模型哪一层？（字节中国广告与交易 2026-05 一面）",[43,454,455],{"id":455},"缓存与存储",[14,457,458,461,464,467,470,473,476,479],{},[17,459,460],{},"强缓存和协商缓存是什么？相关请求头有哪些？（字节风控 2026-03 一面；蔚来 2026-01 一面）",[17,462,463],{},"浏览器缓存机制是什么？（东方财富 2026-04 一面；腾讯 WXG 2026-05 一面）",[17,465,466],{},"cookie、localStorage、sessionStorage 有什么区别？大小和生命周期分别如何？（华硕 2026-01 面试；腾讯 WXG 2026-05 一面；网易 2026-05 一面）",[17,468,469],{},"localStorage 存满后如何处理？（Bilibili 2026-03 一面）",[17,471,472],{},"httpOnly 是什么？JavaScript 能否获取 cookie？（网易 2026-05 一面；腾讯 WXG 2026-05 一面）",[17,474,475],{},"cookie 的 SameSite 是什么？（腾讯 WXG 2026-05 一面）",[17,477,478],{},"cookie 有效期内，后端想让它失效怎么实现？（腾讯 WXG 2026-05 一面）",[17,480,481],{},"IndexedDB、Dexie、本地数据库如何用于离线存储？（腾讯 PCG 2026-03 二面；虾皮 2026-01 一面）",[43,483,484],{"id":484},"跨域与安全",[14,486,487,490,493,496,499,502,505],{},[17,488,489],{},"跨域是什么？同源策略是什么？CORS 如何解决？（字节风控 2026-03 一面；深圳超频链接 2026-03 一面；美团 2026 多场同类）",[17,491,492],{},"反向代理如何解决跨域？（美团本地商业同类；上海银行同类）",[17,494,495],{},"XSS 和 CSRF 是什么？如何防范？（腾讯 PCG 2026-03 一面；腾讯云智 2026-04 一面；腾讯企业微信 2026-05 一面）",[17,497,498],{},"JWT 如何保护用户安全？为什么不能被篡改？（腾讯 PCG 2026-03 二面；字节风控 2026-03 一面）",[17,500,501],{},"双 Token \u002F RefreshToken 无感登录如何实现？RefreshToken 也过期怎么办？（快手 2026-05 一面；字节番茄小说 2026-03 一面）",[17,503,504],{},"微服务鉴权应该放在哪一层：网关、登录中台还是业务服务？（快手 2026-05 一面）",[17,506,507],{},"token 应该存在哪里？localStorage、cookie、sessionStorage 如何取舍？（京东 2026-04 一面；腾讯 PCG 2026-03 二面）",[10,509,511],{"id":510},"ssewebsocket-与流式交互","SSE、WebSocket 与流式交互",[14,513,514,517,520,523,526,529,532,535,538,541,544,547],{},[17,515,516],{},"SSE 和 WebSocket 有什么区别？（蔚来 2026-01 一面；MiniMax 2026-02 一面；TME QQ 音乐 2026-04 二面）",[17,518,519],{},"为什么 AI 对话场景多采用 SSE？（MiniMax 2026-02 一面；美团 2026-04 一面）",[17,521,522],{},"SSE 是否是标准 HTTP 请求？如何接收 SSE 流式消息？（阿里云 AI 应用 2026-03 一面；美团 2026-04 一面）",[17,524,525],{},"SSE 心跳保活机制如何实现？（美团 2026-04 一面；哈啰 2026-03 一面）",[17,527,528],{},"SSE 断线重连原理是什么？如何做消息补偿？（哈啰 2026-03 一面；字节 AIDP 2026-04 一面）",[17,530,531],{},"如何用 fetch 处理 ReadableStream，模拟 AI 流式输出？（MiniMax 2026-02 一面）",[17,533,534],{},"AI 聊天列表中长文本渲染导致页面卡顿如何处理？（MiniMax 2026-02 一面）",[17,536,537],{},"如何实现自动滚动到底部的聊天容器？用户手动上滑时如何处理冲突？（MiniMax 2026-02 一面）",[17,539,540],{},"WebSocket 不稳定时如何处理？心跳、指数退避重连如何设计？（字节 AIDP 2026-04 一面）",[17,542,543],{},"WebSocket 断联重连如何处理？（快手 2026-04 一面）",[17,545,546],{},"流式输出时，逐字追加 DOM 还是做缓冲批量更新？（腾讯 CSIG 2026-04 二面）",[17,548,549],{},"SSE 与定时器在打字机效果里分别承担什么职责？（快手电商 2026-03 二面）",[10,551,552],{"id":552},"前端性能优化",[43,554,555],{"id":555},"指标与排查",[14,557,558,561,564,567,570,573],{},[17,559,560],{},"前端性能优化可以从哪些维度展开？（质谱华章 2026-05 一面；网易 2026-05 一面）",[17,562,563],{},"常见性能指标有哪些：FCP、LCP、TTI、INP、CLS 等？（字节 2026-04 一面；腾讯 2026-04 一面；阿里云瓴羊 2026-05 一面）",[17,565,566],{},"如何通过 Chrome DevTools 定位重排、重绘和性能问题？（腾讯企业微信 2026-05 一面）",[17,568,569],{},"如何评价页面快不快、用户体验好不好？（TME QQ 音乐 2026-04 电话三面）",[17,571,572],{},"前端性能监控系统如何设计？采集哪些指标？（腾讯校招 2025 已清理前同类；2026 多场监控同类）",[17,574,575],{},"项目中“加载速度提升 25%”如何测量出来？（腾讯新闻 2026-03 一面）",[43,577,578],{"id":578},"渲染与长列表",[14,580,581,584,587,590,593,596,599],{},[17,582,583],{},"虚拟列表如何实现？（虾皮 2026-01 一面；小红书 2026-03 一面；TME QQ 音乐 2026-04 二面）",[17,585,586],{},"不定高虚拟列表怎么实现？（字节音视频 2026-03 一面；哈啰 2026-03 一面）",[17,588,589],{},"虚拟列表高度不固定时如何计算可视区域？（字节音视频 2026-03 一面）",[17,591,592],{},"长列表渲染卡顿有哪些优化方案？（质谱华章 2026-05 一面；有赞 2026-01 汇总）",[17,594,595],{},"IntersectionObserver 为什么能替代滚动监听？（快手电商 2026-03 一面）",[17,597,598],{},"图片懒加载如何实现？除了 IntersectionObserver，还有什么方案？（网易 2026-05 一面；字节交易广告 2026-02 摘要）",[17,600,601],{},"AI 对话页面抖动如何处理？Markdown 流式渲染如何保证布局稳定？（字节音视频 2026-03 一面）",[43,603,604],{"id":604},"资源与工程优化",[14,606,607,610,613,616,619,622,625],{},[17,608,609],{},"首屏优化有哪些手段？（钛动科技 2026-01 一面；腾讯云 2026-03 二面）",[17,611,612],{},"Vite 为什么开发环境启动快？（小红书 2026-01 一面；字节风控 2026-03 一面）",[17,614,615],{},"Tree Shaking 原理是什么？哪些情况下会失效？（小红书 2026-01 一面；字节风控 2026-03 一面）",[17,617,618],{},"代码分割和懒加载如何做？（质谱华章 2026-05 一面；字节音视频 2026-03 一面）",[17,620,621],{},"大文件 MD5 计算耗时，如何用 Web Worker 优化？（TME QQ 音乐 2026-04 二面）",[17,623,624],{},"如何处理大图片上传、大文件分片、断点续传和秒传？（字节 AIDP 2026-04 一面；MiniMax 2026-01 二面；钛动科技 2026-01 一面）",[17,626,627],{},"Web Worker 如何划分主线程和 Worker 处理内容？如何通信？（字节财经同类；TME QQ 音乐 2026-04 三面）",[10,629,631],{"id":630},"工程化构建与架构","工程化、构建与架构",[14,633,634,637,640,643,646,649,652,655,658,661,664,667,670],{},[17,635,636],{},"Vite 和 Webpack 有什么区别？（小红书 2026-01 一面；网易 2026-05 一面；TME 2026-04 一面）",[17,638,639],{},"Webpack Loader 和 Plugin 有什么区别？（腾讯 TEG 2026-04 一面；字节工程化 2026-04 一面）",[17,641,642],{},"Vite HMR 是怎么实现的？（TME QQ 音乐 2026-04 二面）",[17,644,645],{},"Webpack 能不能配置成使用 ES Module？（TME QQ 音乐 2026-04 二面）",[17,647,648],{},"Monorepo 架构如何设计？有什么优缺点？（腾讯 PCG 视频 2026-04 一面；深睿医疗 2026-03 一面）",[17,650,651],{},"Monorepo 和微前端是不是同一个东西？区别是什么？（腾讯 PCG 视频 2026-04 一面）",[17,653,654],{},"微前端为什么需要？常见框架有哪些？CSS 隔离和 JS 隔离如何做？（腾讯 PCG 视频 2026-04 一面；哈啰 2026-03 一面）",[17,656,657],{},"模块联邦是什么？如何用于跨应用复用？（钛动科技 2026-01 一面）",[17,659,660],{},"如何从 0 到 1 搭建一个前端项目？（阿里健康 2025 已清理前同类；2026 多场项目工程同类）",[17,662,663],{},"组件库如何设计？如何暴露属性、事件、方法？（快手 2026-05 二面；腾讯 WXG 2026-05 一面）",[17,665,666],{},"组件封装需要遵循哪些原则？（腾讯 PCG 视频 2026-04 一面；MetaApp 2026-03 一面）",[17,668,669],{},"pnpm-lock.yaml 是做什么的？npm 和 pnpm 实现有什么区别？（网易 2026-05 一面；美团 2026-04 二面）",[17,671,672],{},"Git 分支管理怎么做？冲突如何解决？merge\u002Frebase 如何中止？（小红书 2026-03 二面；快手 2026-02 春招）",[10,674,676],{"id":675},"airagagent-与前端工程化","AI、RAG、Agent 与前端工程化",[43,678,680],{"id":679},"ai-coding-与工程判断","AI Coding 与工程判断",[14,682,683,686,689,692,695,698,701,704],{},[17,684,685],{},"平时如何使用 AI 协作开发？（携程 2026-05 一面；快手 2026-05 暑期一面）",[17,687,688],{},"项目中用 AI 迭代代码，具体怎么做？如何检查 AI 写的代码？（腾讯 WXG 2026-05 一面）",[17,690,691],{},"AI 生成不符合预期甚至欺骗你时，怎么处理？（美团 2026-04 二面）",[17,693,694],{},"如何测试验收 AI 生成的项目，从哪些维度判断符合预期？（美团 2026-04 二面）",[17,696,697],{},"AI Code Review 会有哪些安全风险？（快手电商 2026-03 一面）",[17,699,700],{},"用 AI skill 规范代码格式，和 ESLint 配置有什么区别？（快手 2026-05 二面）",[17,702,703],{},"如果要用 AI 完成一个项目，你会怎么设计？（字节 2026-03 凉经）",[17,705,706],{},"如何保持对 AI 代码的判断力，看不懂怎么办？（美团 2026-04 二面）",[43,708,710],{"id":709},"rag-与知识库","RAG 与知识库",[14,712,713,716,719,722,725,728,731],{},[17,714,715],{},"RAG 是怎么实现的？Reader 和 Splitter 的策略是什么？（淘天 Agent 2026-04 一面）",[17,717,718],{},"召回效率不好怎么优化？切割方案、多路召回、query rewrite 如何做？（淘天 Agent 2026-04 一面）",[17,720,721],{},"文档上传后解析、分块、向量化、入库、检索全流程是什么？（腾讯 PCG 视频 2026-04 一面）",[17,723,724],{},"向量数据库切片策略如何设计？切片大小如何确定？（腾讯云智 2026-05 一面）",[17,726,727],{},"语义切分和 token 切分如何取舍？（腾讯云智 2026-05 一面）",[17,729,730],{},"RAG 医疗系统的智能体 UI 交互机制如何设计？（中科星图 2026-04 面试）",[17,732,733],{},"自研知识库和普通桌面 AI 上传文档问答有什么区别？（腾讯 PCG 视频 2026-04 一面）",[43,735,737],{"id":736},"agentmcpskill","Agent、MCP、Skill",[14,739,740,743,746,749,752,755,758,761,764,767],{},[17,741,742],{},"Agent 有哪些范式？ReAct 模式是什么？（字节 2026-03 Promise\u002FAI 一面；腾讯 PCG 视频 2026-04 一面）",[17,744,745],{},"工作流和 Agent 的区别是什么？什么时候用哪个？（淘天 Agent 2026-04 一面）",[17,747,748],{},"MCP 的 stdio 和 SSE 有什么区别？（淘天 Agent 2026-04 一面）",[17,750,751],{},"MCP 和 Skills 有什么区别？（小红书 2026-03 一面；安恒信息 2026-02 线上面；淘天 Agent 2026-04 二面）",[17,753,754],{},"什么场景下选择 Skill，什么场景下选择子 Agent？（淘天 Agent 2026-04 二面）",[17,756,757],{},"如果用 Skill 覆盖小程序开发全流程，如何划分需求、编码等阶段的 Skill？（快手 2026-05 二面）",[17,759,760],{},"如果写需求澄清 Skill，会怎么让 AI 去写？（快手 2026-05 二面）",[17,762,763],{},"Agent 人机等待、表单确认、对话交互闭环如何实现？（腾讯 PCG 视频 2026-04 一面）",[17,765,766],{},"Prompt 设计原则是什么？如何结构化设计 Prompt？（腾讯云智 2026-05 一面）",[17,768,769],{},"Prompt Injection 如何防范？（得物 AI 2026-03 一面）",[10,771,772],{"id":772},"项目深挖与业务场景",[43,774,775],{"id":775},"项目真实性与职责",[14,777,778,781,784,787,790,793],{},[17,779,780],{},"项目背景是什么？用户群体和实际使用情况是什么？（字节 AIDP 2026-04 一面）",[17,782,783],{},"项目中你负责哪些部分？如何体现自己的贡献？（多个 GoodJob 记录；PDD 2026-04 三面）",[17,785,786],{},"项目中的难点和亮点是什么？为什么这样解决？（滴滴 2026-04 一面；美团 2026-04 二面）",[17,788,789],{},"项目架构如何设计？技术选型、前后端怎么设计？（美团本地商业同类；环界云 2026-03 一面）",[17,791,792],{},"你做的项目上线了吗？有没有用户反馈？（Bilibili 2025 已清理前同类；2026 多场项目追问）",[17,794,795],{},"项目中还有哪些可以优化的地方？（腾讯 TEG 2026-04 一面；小红书社区同类）",[43,797,798],{"id":798},"业务场景设计",[14,800,801,804,807,810,813,816,819,822],{},[17,802,803],{},"设计一个前端表单，覆盖数据采集、前后端对接等流程，怎么设计？（腾讯 PCG 2026-03 一面）",[17,805,806],{},"视频会议页面设计图拿到后如何实现？底部工具栏如何布局？（中科星图 2026-04 面试）",[17,808,809],{},"如何实现 AI 自动生成周报？数据采集、处理、生成、人工介入怎么拆？（美团 2026-04 二面）",[17,811,812],{},"如何设计词包 Agent，对 10w+ 词进行分类和附加业务问题？（淘天 Agent 2026-04 二面）",[17,814,815],{},"如何设计双 Token 无感登录？RefreshToken 过期怎么办？（快手 2026-05 一面）",[17,817,818],{},"如何设计页面转 PDF 的宽高适配？（腾讯微信 2026-04 一面）",[17,820,821],{},"如何实现音色复刻前端展示？（快手 2026-05 二面）",[17,823,824],{},"如何做小程序国际化？第三方库和自研方案如何取舍？（快手 2026-05 二面）",[10,826,827],{"id":827},"手写题与算法",[43,829,831],{"id":830},"javascript-手写","JavaScript 手写",[14,833,834,837,840,843,846,849,852,855,858,861,864,867,870],{},[17,835,836],{},"手写 Promise.all \u002F Promise.allSettled。（小红书 2026-01 一面；小红书 2026-02 一面）",[17,838,839],{},"手写防抖、节流。（腾讯 TEG 2026-04 一面；袋鼠云 2026-03 一面；小红书 2026-01 一面）",[17,841,842],{},"手写深拷贝。（东方财富 2026-04 一面）",[17,844,845],{},"手写函数柯里化。（滴滴 2026-04 一面；阿里日常同类）",[17,847,848],{},"手写 eventBus，要求 emit、on、off、once。（滴滴 2026-04 二面）",[17,850,851],{},"手写 URL 解析。（滴滴 2026-04 三面；PDD 2026-04 一面 URL 参数提取）",[17,853,854],{},"手写 classnames 函数。（字节番茄小说 2026-04 二面）",[17,856,857],{},"手写倒计时：秒数转时分秒、开始、复位、防重复定时器。（快手 2026-05 一面）",[17,859,860],{},"手写红绿灯循环函数。（快手 2026-05 二面；Bilibili 2026-03 Promise 红绿灯）",[17,862,863],{},"手写并发限制调度器。（字节番茄小说 2026-03 一面）",[17,865,866],{},"手写 fetch 处理 ReadableStream 流式输出。（MiniMax 2026-02 一面）",[17,868,869],{},"手写数组转树 \u002F 扁平数组转嵌套结构。（蓝色光标 2026-03 一面；字节番茄小说 2026-03 一面）",[17,871,872],{},"手写数组分组函数。（袋鼠云 2026-03 一面）",[43,874,875],{"id":875},"算法题",[14,877,878,881,884,887,890,893,896,899,902,905,908,911,914,917,920,923],{},[17,879,880],{},"最大子数组和。（小红书 2026-01 一面）",[17,882,883],{},"有效括号 \u002F 括号匹配。（小红书 2026-03 一面；字节 2026-04 一面；快手 2026-04 一面）",[17,885,886],{},"最长无重复子串。（腾讯 PCG 2026-03 一面）",[17,888,889],{},"数组第 K 大数。（腾讯 PCG 2026-03 一面）",[17,891,892],{},"快速排序。（字节抖音 2026-04 三面；云象科技 2026-01 CS 问题）",[17,894,895],{},"爬楼梯。（百度 2026-04 暑期一面）",[17,897,898],{},"合并有序链表 \u002F 链表中点 \u002F 倒数第 N 个节点。（百度同类；腾讯 CSIG 2026-04 三面）",[17,900,901],{},"判断链表是否有环，快慢指针原理。（上海银行 2026-04 技术面；字节番茄小说 2026-04 二面）",[17,903,904],{},"电话号码的字母组合。（字节番茄小说 2026-04 三面）",[17,906,907],{},"零钱兑换。（字节番茄小说 2026-04 三面；腾讯 TEG 2026-04 一面）",[17,909,910],{},"盛水最多的容器。（美团 2026-04 一面）",[17,912,913],{},"二分查找。（美团 2026-04 一面）",[17,915,916],{},"顺时针打印矩阵。（腾讯云智 2026-04 一面）",[17,918,919],{},"拼手气红包 \u002F 随机分钱。（字节番茄小说 2026-04 二面）",[17,921,922],{},"抽奖函数，按权重随机并递减权重。（字节番茄小说 2026-03 一面）",[17,924,925],{},"大数相加 \u002F 版本号对比。（腾讯 WXG 2026-05 一面；字节抖音 2026-04 三面）",[10,927,929],{"id":928},"hr职业规划与开放问题","HR、职业规划与开放问题",[14,931,932,935,938,941,944,947,950,953,956,959],{},[17,933,934],{},"为什么选择前端？什么时候开始接触前端？如何学习前端？（百度春招 2026-03 一面；快手 2026-05 一面）",[17,936,937],{},"为什么前端而不是算法 \u002F AI \u002F 后端？（美团 2026-04 二面；字节 TikTok 同类）",[17,939,940],{},"未来职业规划是什么？（百度 2026-03 三面；字节番茄小说 2026-04 HR）",[17,942,943],{},"你怎么看 AI 取代程序员？（字节番茄小说 2026-04 HR）",[17,945,946],{},"你怎么提升自己在 AI 时代的竞争力？（美团 2026-04 一面；快手 2026-05 一面）",[17,948,949],{},"是否接受加班或高强度工作？（PDD 2026-04 HR；拼多多 2026-05 一面同类）",[17,951,952],{},"手上 offer 情况如何？为什么选择这家公司？（PDD 2026-04 HR；腾讯 PCG 2026-04 HR）",[17,954,955],{},"实习时间、到岗时间、能实习多久？（多场腾讯、快手、美团 HR\u002F技术面）",[17,957,958],{},"如何看待没有转正机会的实习？（美团 2026-04 二面）",[17,960,961],{},"第一份工作期待是什么？团队协作经历是什么？压力最大的时候怎么处理？（腾讯 PCG 2026-04 HR；小红书 HR 类问题）",[10,963,964],{"id":964},"复习优先级建议",[43,966,967],{"id":967},"第一优先级",[14,969,970,973,976,979,982],{},[17,971,972],{},"JavaScript：闭包、原型链、this、事件循环、Promise、类型判断、深浅拷贝。",[17,974,975],{},"网络：HTTP 版本、HTTPS\u002FTLS、缓存、跨域、Cookie\u002FJWT、TCP\u002FUDP。",[17,977,978],{},"框架：Vue2\u002FVue3 响应式、nextTick、组件通信；React Fiber、Hooks、diff、性能优化。",[17,980,981],{},"工程化：Vite\u002FWebpack、Tree Shaking、Monorepo、微前端、组件库设计。",[17,983,984],{},"手写：Promise.all、防抖节流、深拷贝、eventBus、URL 解析、数组转树、并发调度。",[43,986,987],{"id":987},"第二优先级",[14,989,990,993,996,999],{},[17,991,992],{},"SSE \u002F WebSocket \u002F ReadableStream \u002F AI 流式渲染。",[17,994,995],{},"RAG、Agent、MCP、Skill、Prompt、AI Coding 工作流。",[17,997,998],{},"虚拟列表、不定高列表、首屏优化、性能指标和监控。",[17,1000,1001],{},"TypeScript 高级类型、泛型、工具类型、type\u002Finterface。",[43,1003,1004],{"id":1004},"第三优先级",[14,1006,1007,1010,1013],{},[17,1008,1009],{},"WebAssembly、RxJS、OpenSeadragon \u002F Deep Zoom Image、音视频码率自适应。",[17,1011,1012],{},"金融、内容、电商、AI Agent、SaaS、小程序国际化等业务场景题。",[17,1014,1015],{},"HR 开放题和职业规划问题。",{"title":1017,"searchDepth":1018,"depth":1018,"links":1019},"",4,[1020,1022,1028,1032,1037,1041,1045,1046,1051,1052,1057,1058,1063,1067,1071,1072],{"id":12,"depth":1021,"text":12},2,{"id":40,"depth":1021,"text":41,"children":1023},[1024,1026,1027],{"id":45,"depth":1025,"text":46},3,{"id":75,"depth":1025,"text":76},{"id":102,"depth":1025,"text":103},{"id":126,"depth":1021,"text":127,"children":1029},[1030,1031],{"id":130,"depth":1025,"text":130},{"id":150,"depth":1025,"text":151},{"id":180,"depth":1021,"text":181,"children":1033},[1034,1035,1036],{"id":184,"depth":1025,"text":185},{"id":208,"depth":1025,"text":209},{"id":250,"depth":1025,"text":251},{"id":265,"depth":1021,"text":266,"children":1038},[1039,1040],{"id":269,"depth":1025,"text":269},{"id":301,"depth":1025,"text":301},{"id":330,"depth":1021,"text":331,"children":1042},[1043,1044],{"id":334,"depth":1025,"text":335},{"id":361,"depth":1025,"text":362},{"id":388,"depth":1021,"text":389},{"id":418,"depth":1021,"text":419,"children":1047},[1048,1049,1050],{"id":422,"depth":1025,"text":423},{"id":455,"depth":1025,"text":455},{"id":484,"depth":1025,"text":484},{"id":510,"depth":1021,"text":511},{"id":552,"depth":1021,"text":552,"children":1053},[1054,1055,1056],{"id":555,"depth":1025,"text":555},{"id":578,"depth":1025,"text":578},{"id":604,"depth":1025,"text":604},{"id":630,"depth":1021,"text":631},{"id":675,"depth":1021,"text":676,"children":1059},[1060,1061,1062],{"id":679,"depth":1025,"text":680},{"id":709,"depth":1025,"text":710},{"id":736,"depth":1025,"text":737},{"id":772,"depth":1021,"text":772,"children":1064},[1065,1066],{"id":775,"depth":1025,"text":775},{"id":798,"depth":1025,"text":798},{"id":827,"depth":1021,"text":827,"children":1068},[1069,1070],{"id":830,"depth":1025,"text":831},{"id":875,"depth":1025,"text":875},{"id":928,"depth":1021,"text":929},{"id":964,"depth":1021,"text":964,"children":1073},[1074,1075,1076],{"id":967,"depth":1025,"text":967},{"id":987,"depth":1025,"text":987},{"id":1004,"depth":1025,"text":1004},[1078],"技术","2026-05-28 20:00","本汇总基于搜集的 139 份 2026 前端面经整理，按问题类别归纳高频考点。",false,"md",null,{"slots":1085},{},true,"\u002F2026\u002F2026-frontend-interview-topic-summary",{"text":1089,"minutes":1090,"time":1091,"words":1092},"33 min read",32.72,1963200,6544,{"title":5,"description":1080},{"loc":1087},"posts\u002F2026\u002F2026-frontend-interview-topic-summary",[],"tech","2CM6tOzF2iXZ_rEjaZbdimvXjVy-qsGA5NiUgSy8jJs",[1100,1083],{"title":1101,"path":1102,"stem":1103,"date":1104,"type":1097,"children":-1},"八股提纲版","\u002F2026\u002Ffrontend-core-interview-question-outline","posts\u002F2026\u002Ffrontend-core-interview-question-outline","2026-05-28 19:00",1779968289640]