[{"data":1,"prerenderedAt":1984},["ShallowReactive",2],{"\u002F2026\u002Ffrontend-core-interview-question-outline":3,"surround-\u002F2026\u002Ffrontend-core-interview-question-outline":1973},{"id":4,"title":5,"body":6,"categories":1951,"date":1953,"description":1954,"draft":1955,"extension":1956,"image":1957,"meta":1958,"navigation":1960,"path":1961,"permalink":1957,"published":1957,"readingTime":1962,"recommend":1957,"references":1957,"seo":1967,"sitemap":1968,"stem":1969,"tags":1970,"type":1971,"updated":1953,"__hash__":1972},"content\u002Fposts\u002F2026\u002Ffrontend-core-interview-question-outline.md","八股提纲版",{"type":7,"value":8,"toc":1858},"minimark",[9,14,19,86,90,147,150,203,206,237,241,244,312,315,379,382,445,448,486,489,519,523,526,564,567,630,633,636,664,668,695,698,728,732,736,781,785,812,816,865,869,880,884,888,906,910,936,940,988,992,1014,1017,1021,1054,1058,1090,1093,1114,1118,1135,1138,1179,1182,1209,1212,1215,1238,1241,1266,1269,1295,1298,1315,1318,1321,1338,1342,1362,1365,1382,1386,1408,1411,1427,1430,1433,1453,1456,1476,1479,1490,1493,1496,1519,1523,1540,1544,1548,1568,1572,1595,1598,1601,1626,1629,1647,1650,1654,1701,1704,1730,1733,1736,1750,1753,1767,1770,1790,1793,1813,1816,1819,1830,1833,1844,1847],[10,11,13],"h2",{"id":12},"html-css","HTML \u002F CSS",[15,16,18],"h3",{"id":17},"html-基础","HTML 基础",[20,21,22,39,53,59,73],"ul",{},[23,24,25,26,30,31,34,35,38],"li",{},"什么是 ",[27,28,29],"strong",{},"HTML 语义化","？为什么语义化有利于 ",[27,32,33],{},"SEO"," 和",[27,36,37],{},"可访问性","？",[23,40,41,45,46,49,50,38],{},[42,43,44],"code",{"code":44},"\u003C!DOCTYPE html>"," 的作用是什么？什么是",[27,47,48],{},"标准模式","和",[27,51,52],{},"怪异模式",[23,54,55,58],{},[42,56,57],{"code":57},"meta viewport"," 的作用是什么？移动端为什么需要设置 viewport？",[23,60,61,64,65,68,69,72],{},[42,62,63],{"code":63},"script"," 的 ",[27,66,67],{},"async"," 和 ",[27,70,71],{},"defer"," 有什么区别？分别适合什么场景？",[23,74,75,78,79,78,82,85],{},[42,76,77],{"code":77},"preload","、",[42,80,81],{"code":81},"prefetch",[42,83,84],{"code":84},"dns-prefetch"," 分别解决什么问题？",[15,87,89],{"id":88},"css-基础","CSS 基础",[20,91,92,103,109,120,129],{},[23,93,94,95,98,99,102],{},"CSS ",[27,96,97],{},"盒模型","是什么？标准盒模型和 ",[42,100,101],{"code":101},"border-box"," 有什么区别？",[23,104,25,105,108],{},[27,106,107],{},"BFC","？如何触发 BFC？BFC 能解决哪些布局问题？",[23,110,111,112,115,116,119],{},"什么是",[27,113,114],{},"层叠上下文","？为什么有时 ",[42,117,118],{"code":118},"z-index"," 不生效？",[23,121,94,122,125,126,38],{},[27,123,124],{},"选择器优先级","如何计算？为什么不建议滥用 ",[42,127,128],{"code":128},"!important",[23,130,131,132,78,135,78,138,78,141,78,144,102],{},"CSS 中 ",[42,133,134],{"code":134},"px",[42,136,137],{"code":137},"em",[42,139,140],{"code":140},"rem",[42,142,143],{"code":143},"vw",[42,145,146],{"code":146},"vh",[15,148,149],{"id":149},"布局与响应式",[20,151,152,158,164,171,177,180,183,195],{},[23,153,154,157],{},[27,155,156],{},"Flex"," 布局的核心概念是什么？主轴和交叉轴如何控制？",[23,159,160,163],{},[27,161,162],{},"Grid"," 布局和 Flex 布局有什么区别？分别适合什么场景？",[23,165,166,167,170],{},"如何实现元素",[27,168,169],{},"水平垂直居中","？有哪些常见方案？",[23,172,111,173,176],{},[27,174,175],{},"响应式布局","？常见实现方式有哪些？",[23,178,179],{},"响应式布局中，断点应该按设备型号设置，还是按内容变化设置？为什么？",[23,181,182],{},"移动端优先和桌面端优先的 CSS 写法有什么区别？",[23,184,185,78,188,78,191,194],{},[42,186,187],{"code":187},"clamp()",[42,189,190],{"code":190},"min()",[42,192,193],{"code":193},"max()"," 在响应式布局中可以解决什么问题？",[23,196,197,198,78,200,202],{},"移动端适配有哪些方案？",[42,199,140],{"code":140},[42,201,143],{"code":143},"、媒体查询如何选择？",[15,204,205],{"id":205},"渲染与动画",[20,207,208,217,220,228],{},[23,209,111,210,49,213,216],{},[27,211,212],{},"回流",[27,214,215],{},"重绘","？它们有什么区别？",[23,218,219],{},"哪些 CSS 属性会触发回流？哪些属性更适合做动画？",[23,221,222,68,225,102],{},[42,223,224],{"code":224},"transition",[42,226,227],{"code":227},"animation",[23,229,230,231,68,234,38],{},"为什么动画推荐使用 ",[42,232,233],{"code":233},"transform",[42,235,236],{"code":236},"opacity",[10,238,240],{"id":239},"javascript","JavaScript",[15,242,243],{"id":243},"类型与基础",[20,245,246,253,264,274,285,292,303],{},[23,247,248,249,252],{},"JavaScript 有哪些",[27,250,251],{},"数据类型","？原始类型和引用类型有什么区别？",[23,254,255,78,258,78,261,102],{},[42,256,257],{"code":257},"typeof",[42,259,260],{"code":260},"instanceof",[42,262,263],{"code":263},"Object.prototype.toString.call",[23,265,266,267,270,271,38],{},"为什么 ",[42,268,269],{"code":269},"typeof null"," 的结果是 ",[42,272,273],{"code":273},"\"object\"",[23,275,276,68,279,282,283,38],{},[42,277,278],{"code":278},"==",[42,280,281],{"code":281},"==="," 有什么区别？为什么工程中更推荐 ",[42,284,281],{"code":281},[23,286,287,68,290,102],{},[42,288,289],{"code":289},"Object.is",[42,291,281],{"code":281},[23,293,294,78,297,78,300,102],{},[42,295,296],{"code":296},"var",[42,298,299],{"code":299},"let",[42,301,302],{"code":302},"const",[23,304,111,305,308,309,38],{},[27,306,307],{},"变量提升","？什么是",[27,310,311],{},"暂时性死区",[15,313,314],{"id":314},"作用域与对象",[20,316,317,325,331,339,350,356,362,373],{},[23,318,111,319,49,322,38],{},[27,320,321],{},"作用域",[27,323,324],{},"作用域链",[23,326,111,327,330],{},[27,328,329],{},"闭包","？闭包有哪些应用场景和风险？",[23,332,111,333,49,336,38],{},[27,334,335],{},"原型",[27,337,338],{},"原型链",[23,340,341,342,345,346,349],{},"构造函数的 ",[42,343,344],{"code":344},"prototype"," 和实例的 ",[42,347,348],{"code":348},"__proto__"," 有什么关系？",[23,351,352,355],{},[42,353,354],{"code":354},"this"," 的绑定规则有哪些？",[23,357,358,359,361],{},"箭头函数的 ",[42,360,354],{"code":354}," 和普通函数有什么区别？",[23,363,364,78,367,78,370,102],{},[42,365,366],{"code":366},"call",[42,368,369],{"code":369},"apply",[42,371,372],{"code":372},"bind",[23,374,375,378],{},[42,376,377],{"code":377},"new"," 操作符内部做了什么？",[15,380,381],{"id":381},"异步与执行机制",[20,383,384,390,399,408,414,419,430,436,442],{},[23,385,25,386,389],{},[27,387,388],{},"Event Loop","？浏览器事件循环的执行顺序是什么？",[23,391,111,392,49,395,398],{},[27,393,394],{},"宏任务",[27,396,397],{},"微任务","？常见宏任务、微任务有哪些？",[23,400,401,78,404,407],{},[42,402,403],{"code":403},"Promise.then",[42,405,406],{"code":406},"setTimeout","、同步代码的执行顺序如何判断？",[23,409,410,413],{},[27,411,412],{},"Promise"," 有哪些状态？状态如何流转？",[23,415,416,418],{},[42,417,403],{"code":403}," 为什么可以链式调用？",[23,420,421,78,424,78,427,102],{},[42,422,423],{"code":423},"Promise.all",[42,425,426],{"code":426},"Promise.race",[42,428,429],{"code":429},"Promise.allSettled",[23,431,432,435],{},[42,433,434],{"code":434},"async\u002Fawait"," 和 Promise 是什么关系？",[23,437,438,441],{},[42,439,440],{"code":440},"await"," 后面的代码为什么会进入微任务？",[23,443,444],{},"如何处理多个异步请求的串行、并行和并发控制？",[15,446,447],{"id":447},"常见手写",[20,449,450,455,462,471,479,483],{},[23,451,452,453,38],{},"如何手写 ",[42,454,423],{"code":423},[23,456,457,458,461],{},"如何实现",[27,459,460],{},"深拷贝","？如何处理循环引用？",[23,463,457,464,49,467,470],{},[27,465,466],{},"防抖",[27,468,469],{},"节流","？它们适合什么场景？",[23,472,452,473,78,475,78,477,38],{},[42,474,366],{"code":366},[42,476,369],{"code":369},[42,478,372],{"code":372},[23,480,452,481,38],{},[42,482,377],{"code":377},[23,484,485],{},"如何实现数组去重、数组扁平化、柯里化？",[15,487,488],{"id":488},"模块化与内存",[20,490,491,499,505,512],{},[23,492,493,68,496,102],{},[27,494,495],{},"CommonJS",[27,497,498],{},"ESM",[23,500,501,502,38],{},"为什么 ESM 更利于 ",[27,503,504],{},"Tree Shaking",[23,506,507,508,511],{},"JavaScript 的",[27,509,510],{},"垃圾回收","机制是什么？",[23,513,514,515,518],{},"常见的",[27,516,517],{},"内存泄漏","场景有哪些？如何排查？",[10,520,522],{"id":521},"typescript","TypeScript",[15,524,525],{"id":525},"类型系统",[20,527,528,533,541,552,558],{},[23,529,530,532],{},[27,531,522],{}," 的核心价值是什么？",[23,534,535,68,538,72],{},[42,536,537],{"code":537},"interface",[42,539,540],{"code":540},"type",[23,542,543,78,546,78,549,102],{},[42,544,545],{"code":545},"any",[42,547,548],{"code":548},"unknown",[42,550,551],{"code":551},"never",[23,553,554,555,557],{},"为什么更推荐用 ",[42,556,548],{"code":548}," 处理外部输入？",[23,559,111,560,563],{},[27,561,562],{},"类型收窄","？常见类型收窄方式有哪些？",[15,565,566],{"id":566},"泛型与高级类型",[20,568,569,575,583,591,597,618],{},[23,570,111,571,574],{},[27,572,573],{},"泛型","？泛型解决什么问题？",[23,576,577,78,580,582],{},[42,578,579],{"code":579},"keyof",[42,581,257],{"code":257},"、索引访问类型分别有什么作用？",[23,584,111,585,49,588,38],{},[27,586,587],{},"联合类型",[27,589,590],{},"交叉类型",[23,592,111,593,596],{},[27,594,595],{},"可辨识联合","？适合建模哪些业务状态？",[23,598,599,78,602,78,605,78,608,78,611,78,614,617],{},[42,600,601],{"code":601},"Partial",[42,603,604],{"code":604},"Required",[42,606,607],{"code":607},"Readonly",[42,609,610],{"code":610},"Pick",[42,612,613],{"code":613},"Omit",[42,615,616],{"code":616},"Record"," 如何实现？",[23,619,620,623,624,68,627,38],{},[42,621,622],{"code":622},"infer"," 的作用是什么？如何实现 ",[42,625,626],{"code":626},"ReturnType",[42,628,629],{"code":629},"Awaited",[10,631,632],{"id":632},"浏览器原理",[15,634,635],{"id":635},"页面加载与渲染",[20,637,638,641,644,655,658,661],{},[23,639,640],{},"从输入 URL 到页面展示，完整过程发生了什么？",[23,642,643],{},"浏览器如何解析 HTML、CSS、JavaScript？",[23,645,25,646,78,649,34,652,38],{},[27,647,648],{},"DOM",[27,650,651],{},"CSSOM",[27,653,654],{},"渲染树",[23,656,657],{},"CSS 为什么会阻塞渲染？",[23,659,660],{},"JavaScript 为什么可能阻塞 HTML 解析？",[23,662,663],{},"浏览器的布局、绘制、合成分别做什么？",[15,665,667],{"id":666},"dom-与事件","DOM 与事件",[20,669,670,673,681,687],{},[23,671,672],{},"DOM 事件流分为哪几个阶段？",[23,674,111,675,49,678,38],{},[27,676,677],{},"事件捕获",[27,679,680],{},"事件冒泡",[23,682,111,683,686],{},[27,684,685],{},"事件委托","？适合什么场景？",[23,688,689,68,692,102],{},[42,690,691],{"code":691},"event.target",[42,693,694],{"code":694},"event.currentTarget",[15,696,697],{"id":697},"存储与线程",[20,699,700,714,719,725],{},[23,701,702,78,705,78,708,78,711,102],{},[42,703,704],{"code":704},"Cookie",[42,706,707],{"code":707},"localStorage",[42,709,710],{"code":710},"sessionStorage",[42,712,713],{"code":713},"IndexedDB",[23,715,716,717,38],{},"为什么敏感信息不建议直接放在 ",[42,718,707],{"code":707},[23,720,25,721,724],{},[27,722,723],{},"Web Worker","？适合解决什么问题？",[23,726,727],{},"Web Worker 为什么不能直接操作 DOM？",[10,729,731],{"id":730},"vue","Vue",[15,733,735],{"id":734},"vue-基础","Vue 基础",[20,737,738,741,751,758,768,776],{},[23,739,740],{},"Vue2 和 Vue3 有哪些核心区别？",[23,742,743,744,747,748,38],{},"Vue3 为什么使用 ",[27,745,746],{},"Proxy"," 替代 ",[42,749,750],{"code":750},"Object.defineProperty",[23,752,753,754,757],{},"Vue 的",[27,755,756],{},"响应式原理","是什么？",[23,759,760,761,764,765,38],{},"什么是依赖收集 ",[27,762,763],{},"track"," 和派发更新 ",[27,766,767],{},"trigger",[23,769,770,68,773,102],{},[42,771,772],{"code":772},"ref",[42,774,775],{"code":775},"reactive",[23,777,266,778,780],{},[42,779,775],{"code":775}," 解构后可能丢失响应式？",[15,782,784],{"id":783},"vue-计算与更新","Vue 计算与更新",[20,786,787,795,802,809],{},[23,788,789,68,792,102],{},[42,790,791],{"code":791},"computed",[42,793,794],{"code":794},"watch",[23,796,797,68,799,102],{},[42,798,794],{"code":794},[42,800,801],{"code":801},"watchEffect",[23,803,804,805,808],{},"Vue 的 ",[42,806,807],{"code":807},"nextTick"," 有什么作用？为什么 DOM 更新是异步的？",[23,810,811],{},"Vue 组件更新流程大致是什么？",[15,813,815],{"id":814},"vue-渲染与组件","Vue 渲染与组件",[20,817,818,824,830,836,844,850,853,859],{},[23,819,25,820,823],{},[27,821,822],{},"虚拟 DOM","？Vue 为什么需要虚拟 DOM？",[23,825,804,826,829],{},[27,827,828],{},"Diff"," 算法大致如何工作？",[23,831,832,835],{},[42,833,834],{"code":834},"key"," 在列表渲染中有什么作用？",[23,837,838,68,841,102],{},[42,839,840],{"code":840},"v-if",[42,842,843],{"code":843},"v-show",[23,845,846,849],{},[42,847,848],{"code":848},"keep-alive"," 的作用和原理是什么？",[23,851,852],{},"Vue 组件通信方式有哪些？",[23,854,855,858],{},[42,856,857],{"code":857},"props"," 能否在子组件中直接修改？为什么？",[23,860,861,864],{},[42,862,863],{"code":863},"provide\u002Finject"," 适合什么场景？",[15,866,868],{"id":867},"vue-状态管理","Vue 状态管理",[20,870,871,874,877],{},[23,872,873],{},"Vuex 和 Pinia 有什么区别？",[23,875,876],{},"Pinia 为什么更适合 Vue3？",[23,878,879],{},"什么时候需要全局状态管理？",[10,881,883],{"id":882},"react","React",[15,885,887],{"id":886},"react-基础","React 基础",[20,889,890,893,898,903],{},[23,891,892],{},"React 的核心思想是什么？",[23,894,111,895,38],{},[27,896,897],{},"声明式 UI",[23,899,111,900,902],{},[27,901,822],{},"？虚拟 DOM 一定更快吗？",[23,904,905],{},"React 和 Vue 在设计思路上有什么区别？",[15,907,909],{"id":908},"react-渲染机制","React 渲染机制",[20,911,912,918,921,924,930],{},[23,913,25,914,917],{},[27,915,916],{},"Fiber","？Fiber 解决了什么问题？",[23,919,920],{},"React 更新为什么分为 render 阶段和 commit 阶段？",[23,922,923],{},"render 阶段和 commit 阶段有什么区别？",[23,925,926,927,929],{},"React ",[27,928,828],{}," 算法的核心假设是什么？",[23,931,932,933,935],{},"React 列表中的 ",[42,934,834],{"code":834}," 有什么作用？为什么不建议用 index 作为 key？",[15,937,939],{"id":938},"hooks","Hooks",[20,941,942,947,950,956,962,967,974,985],{},[23,943,944,946],{},[27,945,939],{}," 的基本原理是什么？",[23,948,949],{},"为什么 Hooks 不能写在条件、循环和嵌套函数中？",[23,951,952,955],{},[42,953,954],{"code":954},"useState"," 的状态更新为什么可能是异步或批处理的？",[23,957,958,961],{},[42,959,960],{"code":960},"useEffect"," 的执行时机是什么？",[23,963,964,966],{},[42,965,960],{"code":960}," 的清理函数什么时候执行？",[23,968,969,68,971,102],{},[42,970,960],{"code":960},[42,972,973],{"code":973},"useLayoutEffect",[23,975,976,78,979,78,982,85],{},[42,977,978],{"code":978},"useMemo",[42,980,981],{"code":981},"useCallback",[42,983,984],{"code":984},"React.memo",[23,986,987],{},"什么情况下不应该滥用 memo 类优化？",[15,989,991],{"id":990},"react-组件与状态","React 组件与状态",[20,993,994,1002,1005,1008,1011],{},[23,995,111,996,49,999,38],{},[27,997,998],{},"受控组件",[27,1000,1001],{},"非受控组件",[23,1003,1004],{},"React 中为什么不能直接修改 state？",[23,1006,1007],{},"Context 适合什么场景？有什么性能问题？",[23,1009,1010],{},"React 合成事件是什么？和原生事件有什么区别？",[23,1012,1013],{},"React 事件委托机制有什么变化？",[10,1015,1016],{"id":1016},"网络与安全",[15,1018,1020],{"id":1019},"http-基础","HTTP 基础",[20,1022,1023,1026,1034,1042,1051],{},[23,1024,1025],{},"常见 HTTP 状态码有哪些？分别表示什么？",[23,1027,1028,68,1031,102],{},[42,1029,1030],{"code":1030},"301",[42,1032,1033],{"code":1033},"302",[23,1035,1036,68,1039,102],{},[42,1037,1038],{"code":1038},"401",[42,1040,1041],{"code":1041},"403",[23,1043,1044,1045,68,1048,102],{},"HTTP 常见请求方法有哪些？",[42,1046,1047],{"code":1047},"GET",[42,1049,1050],{"code":1050},"POST",[23,1052,1053],{},"什么是幂等性？哪些 HTTP 方法通常是幂等的？",[15,1055,1057],{"id":1056},"http-缓存","HTTP 缓存",[20,1059,1060,1068,1076,1084,1087],{},[23,1061,111,1062,49,1065,38],{},[27,1063,1064],{},"强缓存",[27,1066,1067],{},"协商缓存",[23,1069,1070,68,1073,102],{},[42,1071,1072],{"code":1072},"Cache-Control",[42,1074,1075],{"code":1075},"Expires",[23,1077,1078,68,1081,102],{},[42,1079,1080],{"code":1080},"ETag",[42,1082,1083],{"code":1083},"Last-Modified",[23,1085,1086],{},"为什么静态资源常使用 hash 文件名加长期缓存？",[23,1088,1089],{},"为什么 HTML 通常不设置长期强缓存？",[15,1091,1092],{"id":1092},"协议演进",[20,1094,1095,1098,1105,1108,1111],{},[23,1096,1097],{},"HTTP\u002F1.1、HTTP\u002F2、HTTP\u002F3 有什么区别？",[23,1099,1100,1101,1104],{},"HTTP\u002F2 的",[27,1102,1103],{},"多路复用","解决了什么问题？",[23,1106,1107],{},"HTTP\u002F3 为什么基于 QUIC？",[23,1109,1110],{},"TCP 和 UDP 有什么区别？",[23,1112,1113],{},"TCP 三次握手和四次挥手的过程是什么？",[15,1115,1117],{"id":1116},"https-与-dns","HTTPS 与 DNS",[20,1119,1120,1123,1126,1129,1132],{},[23,1121,1122],{},"HTTPS 解决了 HTTP 的哪些安全问题？",[23,1124,1125],{},"TLS 握手大致过程是什么？",[23,1127,1128],{},"为什么 TLS 传输数据主要使用对称加密？",[23,1130,1131],{},"DNS 解析过程是什么？",[23,1133,1134],{},"如何优化 DNS 解析耗时？",[15,1136,1137],{"id":1137},"跨域与安全",[20,1139,1140,1145,1151,1158,1161,1167,1173],{},[23,1141,111,1142,38],{},[27,1143,1144],{},"同源策略",[23,1146,25,1147,1150],{},[27,1148,1149],{},"CORS","？服务端需要配置哪些响应头？",[23,1152,1153,1154,1157],{},"什么是 CORS ",[27,1155,1156],{},"预检请求","？什么时候会触发？",[23,1159,1160],{},"JSONP 为什么可以跨域？它有什么缺点？",[23,1162,25,1163,1166],{},[27,1164,1165],{},"XSS","？如何防御 XSS？",[23,1168,25,1169,1172],{},[27,1170,1171],{},"CSRF","？如何防御 CSRF？",[23,1174,111,1175,1178],{},[27,1176,1177],{},"点击劫持","？如何防御？",[15,1180,1181],{"id":1181},"登录与实时通信",[20,1183,1184,1197,1200,1203,1206],{},[23,1185,1186,78,1188,78,1191,78,1194,102],{},[42,1187,704],{"code":704},[42,1189,1190],{"code":1190},"Session",[42,1192,1193],{"code":1193},"Token",[42,1195,1196],{"code":1196},"JWT",[23,1198,1199],{},"JWT 的优缺点是什么？如何处理续期和吊销？",[23,1201,1202],{},"WebSocket 和 SSE 有什么区别？",[23,1204,1205],{},"WebSocket 适合什么场景？SSE 适合什么场景？",[23,1207,1208],{},"前端如何处理请求取消和响应竞态？",[10,1210,1211],{"id":1211},"性能优化",[15,1213,1214],{"id":1214},"性能指标",[20,1216,1217,1232,1235],{},[23,1218,1219,78,1222,78,1225,78,1228,1231],{},[27,1220,1221],{},"FCP",[27,1223,1224],{},"LCP",[27,1226,1227],{},"CLS",[27,1229,1230],{},"INP"," 分别衡量什么？",[23,1233,1234],{},"如何定位页面首屏慢的问题？",[23,1236,1237],{},"如何判断性能瓶颈在网络、资源、脚本还是渲染？",[15,1239,1240],{"id":1240},"首屏与资源优化",[20,1242,1243,1246,1249,1255,1260,1263],{},[23,1244,1245],{},"前端首屏优化有哪些常见手段？",[23,1247,1248],{},"如何减少关键渲染路径上的阻塞资源？",[23,1250,111,1251,1254],{},[27,1252,1253],{},"代码分割","？按路由拆包和按组件拆包有什么区别？",[23,1256,25,1257,1259],{},[27,1258,504],{},"？它依赖什么条件？",[23,1261,1262],{},"图片优化有哪些手段？",[23,1264,1265],{},"首屏图片为什么不一定适合懒加载？",[15,1267,1268],{"id":1268},"渲染与交互优化",[20,1270,1271,1277,1280,1286,1289,1292],{},[23,1272,111,1273,1276],{},[27,1274,1275],{},"长任务","？长任务为什么会影响交互？",[23,1278,1279],{},"如何优化大量 DOM 渲染？",[23,1281,111,1282,1285],{},[27,1283,1284],{},"虚拟列表","？它的核心原理是什么？",[23,1287,1288],{},"固定高度虚拟列表和动态高度虚拟列表有什么区别？",[23,1290,1291],{},"如何减少 React 或 Vue 中的无效重渲染？",[23,1293,1294],{},"Web Worker 能用于哪些性能优化场景？",[15,1296,1297],{"id":1297},"内存与监控",[20,1299,1300,1303,1306,1309,1312],{},[23,1301,1302],{},"前端常见内存泄漏有哪些？",[23,1304,1305],{},"如何使用 Chrome DevTools 排查内存问题？",[23,1307,1308],{},"前端监控通常包括哪些内容？",[23,1310,1311],{},"错误监控、性能监控、接口监控分别采集什么？",[23,1313,1314],{},"一个完整的性能优化闭环应该包含哪些步骤？",[10,1316,1317],{"id":1317},"工程化",[15,1319,1320],{"id":1320},"构建工具",[20,1322,1323,1326,1329,1332,1335],{},[23,1324,1325],{},"Webpack 的构建流程是什么？",[23,1327,1328],{},"Webpack 中 entry、output、loader、plugin、chunk 分别是什么？",[23,1330,1331],{},"Vite 为什么开发环境启动快？",[23,1333,1334],{},"Vite 和 Webpack 有什么区别？如何选型？",[23,1336,1337],{},"Rollup 更适合什么场景？",[15,1339,1341],{"id":1340},"loader-plugin-编译","Loader \u002F Plugin \u002F 编译",[20,1343,1344,1347,1350,1356,1359],{},[23,1345,1346],{},"Loader 和 Plugin 有什么区别？",[23,1348,1349],{},"Babel 的作用是什么？",[23,1351,1352,1355],{},[42,1353,1354],{"code":1354},"preset-env"," 如何决定转换哪些语法？",[23,1357,1358],{},"SWC 和 Babel 有什么区别？",[23,1360,1361],{},"什么是 Source Map？生产环境使用 Source Map 要注意什么？",[15,1363,1364],{"id":1364},"包管理与规范",[20,1366,1367,1370,1373,1376,1379],{},[23,1368,1369],{},"npm、yarn、pnpm 有什么区别？",[23,1371,1372],{},"pnpm 为什么能避免幽灵依赖？",[23,1374,1375],{},"什么是 lockfile？为什么需要提交 lockfile？",[23,1377,1378],{},"ESLint、Prettier、Stylelint 分别解决什么问题？",[23,1380,1381],{},"为什么要把规范接入 pre-commit 和 CI？",[15,1383,1385],{"id":1384},"monorepo-与-cicd","Monorepo 与 CI\u002FCD",[20,1387,1388,1394,1397,1402,1405],{},[23,1389,25,1390,1393],{},[27,1391,1392],{},"Monorepo","？有什么优缺点？",[23,1395,1396],{},"pnpm workspace、Turborepo、Nx 分别解决什么问题？",[23,1398,25,1399,38],{},[27,1400,1401],{},"CI\u002FCD",[23,1403,1404],{},"前端流水线通常包含哪些步骤？",[23,1406,1407],{},"如何保证前端构建产物可追踪、可回滚？",[15,1409,1410],{"id":1410},"微前端",[20,1412,1413,1418,1421,1424],{},[23,1414,111,1415,1417],{},[27,1416,1410],{},"？适合什么业务场景？",[23,1419,1420],{},"微前端有哪些常见方案？",[23,1422,1423],{},"微前端如何做路由隔离、样式隔离、状态通信？",[23,1425,1426],{},"微前端如何处理依赖共享和性能问题？",[10,1428,1429],{"id":1429},"状态管理与架构",[15,1431,1432],{"id":1432},"状态管理",[20,1434,1435,1438,1441,1447,1450],{},[23,1436,1437],{},"前端状态可以分为哪几类？",[23,1439,1440],{},"什么状态适合放本地组件？什么状态适合放全局 store？",[23,1442,111,1443,1446],{},[27,1444,1445],{},"服务端状态","？它和普通全局状态有什么区别？",[23,1448,1449],{},"Redux、Zustand、Pinia 分别适合什么场景？",[23,1451,1452],{},"React Query \u002F SWR 解决了什么问题？",[15,1454,1455],{"id":1455},"组件与架构",[20,1457,1458,1461,1464,1467,1470,1473],{},[23,1459,1460],{},"如何设计一个可复用组件？",[23,1462,1463],{},"展示组件和容器组件有什么区别？",[23,1465,1466],{},"基础组件为什么不应该耦合太多业务逻辑？",[23,1468,1469],{},"如何设计前端权限系统？",[23,1471,1472],{},"路由权限、菜单权限、按钮权限、数据权限有什么区别？",[23,1474,1475],{},"为什么前端权限不能代替后端权限？",[15,1477,1478],{"id":1478},"错误处理",[20,1480,1481,1484,1487],{},[23,1482,1483],{},"React Error Boundary 能捕获哪些错误？不能捕获哪些错误？",[23,1485,1486],{},"Vue 中如何处理组件错误和全局错误？",[23,1488,1489],{},"前端异常如何上报和聚合？",[10,1491,1492],{"id":1492},"测试",[15,1494,1495],{"id":1495},"测试类型",[20,1497,1498,1504,1510,1516],{},[23,1499,111,1500,1503],{},[27,1501,1502],{},"单元测试","？适合测试哪些内容？",[23,1505,111,1506,1509],{},[27,1507,1508],{},"组件测试","？应该关注实现细节还是用户行为？",[23,1511,25,1512,1515],{},[27,1513,1514],{},"E2E 测试","？适合覆盖哪些核心链路？",[23,1517,1518],{},"单元测试、组件测试、E2E 测试如何取舍？",[15,1520,1522],{"id":1521},"测试工具与-mock","测试工具与 Mock",[20,1524,1525,1528,1531,1534],{},[23,1526,1527],{},"Jest、Vitest、Testing Library 分别适合什么场景？",[23,1529,1530],{},"Testing Library 为什么推荐从用户视角查询元素？",[23,1532,1533],{},"Mock 的作用是什么？",[23,1535,1536,1537,102],{},"MSW 和直接 mock ",[42,1538,1539],{"code":1539},"fetch",[10,1541,1543],{"id":1542},"nodejs-与-ssr","Node.js 与 SSR",[15,1545,1547],{"id":1546},"nodejs","Node.js",[20,1549,1550,1553,1559,1562,1565],{},[23,1551,1552],{},"Node.js 事件循环和浏览器事件循环有什么区别？",[23,1554,1555,1558],{},[42,1556,1557],{"code":1557},"process.nextTick"," 和 Promise 微任务的优先级有什么区别？",[23,1560,1561],{},"Express 和 Koa 有什么区别？",[23,1563,1564],{},"什么是 Koa 的洋葱模型？",[23,1566,1567],{},"Node 中间件适合处理哪些事情？",[15,1569,1571],{"id":1570},"ssr-ssg","SSR \u002F SSG",[20,1573,1574,1580,1583,1589,1592],{},[23,1575,25,1576,1579],{},[27,1577,1578],{},"SSR","？SSR 的优缺点是什么？",[23,1581,1582],{},"SSR 的数据预取、状态注水、水合分别是什么？",[23,1584,111,1585,1588],{},[27,1586,1587],{},"水合不一致","？如何避免？",[23,1590,1591],{},"CSR、SSR、SSG 有什么区别？",[23,1593,1594],{},"什么场景适合 SSR？什么场景适合 SSG？",[10,1596,1597],{"id":1597},"移动端与小程序",[15,1599,1600],{"id":1600},"移动端",[20,1602,1603,1610,1617,1620,1623],{},[23,1604,1605,1606,1609],{},"移动端 ",[27,1607,1608],{},"1px 问题","是什么？如何解决？",[23,1611,1612,1613,1616],{},"什么是安全区域 ",[27,1614,1615],{},"safe area","？如何适配刘海屏和全面屏？",[23,1618,1619],{},"移动端点击延迟是什么？现代浏览器如何处理？",[23,1621,1622],{},"如何处理移动端滚动穿透？",[23,1624,1625],{},"touch 事件和 click 事件有什么区别？",[15,1627,1628],{"id":1628},"小程序",[20,1630,1631,1634,1641,1644],{},[23,1632,1633],{},"小程序逻辑层和视图层如何通信？",[23,1635,1636,1637,1640],{},"为什么频繁 ",[42,1638,1639],{"code":1639},"setData"," 会影响性能？",[23,1642,1643],{},"小程序性能优化有哪些常见手段？",[23,1645,1646],{},"小程序和 H5 在运行环境上有什么区别？",[10,1648,1649],{"id":1649},"手写与算法",[15,1651,1653],{"id":1652},"js-手写题","JS 手写题",[20,1655,1656,1662,1665,1668,1671,1674,1677,1680,1683,1686,1689,1697],{},[23,1657,1658,1659,1661],{},"手写 ",[42,1660,423],{"code":423},"。",[23,1663,1664],{},"手写并发控制函数。",[23,1666,1667],{},"手写防抖函数。",[23,1669,1670],{},"手写节流函数。",[23,1672,1673],{},"手写深拷贝，并处理循环引用。",[23,1675,1676],{},"手写发布订阅 EventBus。",[23,1678,1679],{},"手写 LRU 缓存。",[23,1681,1682],{},"手写数组去重。",[23,1684,1685],{},"手写数组扁平化。",[23,1687,1688],{},"手写柯里化函数。",[23,1690,1658,1691,78,1693,78,1695,1661],{},[42,1692,366],{"code":366},[42,1694,369],{"code":369},[42,1696,372],{"code":372},[23,1698,1658,1699,1661],{},[42,1700,377],{"code":377},[15,1702,1703],{"id":1703},"算法题",[20,1705,1706,1709,1712,1715,1718,1721,1724,1727],{},[23,1707,1708],{},"数组和字符串常见题型有哪些？",[23,1710,1711],{},"哈希表适合解决哪些问题？",[23,1713,1714],{},"栈和队列适合解决哪些问题？",[23,1716,1717],{},"双指针适合解决哪些问题？",[23,1719,1720],{},"滑动窗口适合解决哪些问题？",[23,1722,1723],{},"链表题常见操作有哪些？",[23,1725,1726],{},"二叉树遍历有哪些方式？",[23,1728,1729],{},"如何分析时间复杂度和空间复杂度？",[10,1731,1732],{"id":1732},"项目深挖",[15,1734,1735],{"id":1735},"项目介绍",[20,1737,1738,1741,1744,1747],{},[23,1739,1740],{},"如何介绍一个前端项目？",[23,1742,1743],{},"项目介绍为什么不能只罗列技术栈？",[23,1745,1746],{},"如何讲清楚自己的职责和贡献？",[23,1748,1749],{},"如何证明项目中的技术方案是有效的？",[15,1751,1752],{"id":1752},"技术选型",[20,1754,1755,1758,1761,1764],{},[23,1756,1757],{},"如何说明技术选型的理由？",[23,1759,1760],{},"技术选型需要考虑哪些维度？",[23,1762,1763],{},"如何回答“为什么不用另一个方案”？",[23,1765,1766],{},"如何描述方案的收益和代价？",[15,1768,1769],{"id":1769},"复杂场景",[20,1771,1772,1775,1778,1781,1784,1787],{},[23,1773,1774],{},"如何封装复杂表格组件？",[23,1776,1777],{},"如何封装复杂表单组件？",[23,1779,1780],{},"如何设计上传组件？",[23,1782,1783],{},"如何设计权限系统？",[23,1785,1786],{},"如何设计前端监控系统？",[23,1788,1789],{},"如何做前端性能治理？",[15,1791,1792],{"id":1792},"线上问题",[20,1794,1795,1798,1801,1804,1807,1810],{},[23,1796,1797],{},"线上问题排查的一般流程是什么？",[23,1799,1800],{},"如何定位线上白屏问题？",[23,1802,1803],{},"如何定位接口异常问题？",[23,1805,1806],{},"如何定位性能突然变差的问题？",[23,1808,1809],{},"如何设计回滚和灰度策略？",[23,1811,1812],{},"修复线上问题后如何避免再次发生？",[10,1814,1815],{"id":1815},"复习优先级",[15,1817,1818],{"id":1818},"第一优先级",[20,1820,1821,1824,1827],{},[23,1822,1823],{},"JavaScript 执行机制、闭包、原型链、this、Promise、Event Loop。",[23,1825,1826],{},"Vue \u002F React 响应式、渲染机制、Diff、组件通信、Hooks。",[23,1828,1829],{},"HTTP 缓存、跨域、HTTPS、XSS、CSRF、浏览器渲染。",[15,1831,1832],{"id":1832},"第二优先级",[20,1834,1835,1838,1841],{},[23,1836,1837],{},"TypeScript 泛型、高级类型、工具类型。",[23,1839,1840],{},"Webpack \u002F Vite、Tree Shaking、代码分割、Source Map。",[23,1842,1843],{},"性能指标、首屏优化、长列表、内存泄漏、前端监控。",[15,1845,1846],{"id":1846},"第三优先级",[20,1848,1849,1852,1855],{},[23,1850,1851],{},"SSR \u002F SSG、微前端、CI\u002FCD、Monorepo、测试体系。",[23,1853,1854],{},"Node.js、小程序、移动端适配、复杂项目复盘。",[23,1856,1857],{},"高频手写题和常见算法题。",{"title":1859,"searchDepth":1860,"depth":1860,"links":1861},"",4,[1862,1870,1877,1881,1886,1892,1898,1906,1912,1919,1924,1928,1932,1936,1940,1946],{"id":12,"depth":1863,"text":13,"children":1864},2,[1865,1867,1868,1869],{"id":17,"depth":1866,"text":18},3,{"id":88,"depth":1866,"text":89},{"id":149,"depth":1866,"text":149},{"id":205,"depth":1866,"text":205},{"id":239,"depth":1863,"text":240,"children":1871},[1872,1873,1874,1875,1876],{"id":243,"depth":1866,"text":243},{"id":314,"depth":1866,"text":314},{"id":381,"depth":1866,"text":381},{"id":447,"depth":1866,"text":447},{"id":488,"depth":1866,"text":488},{"id":521,"depth":1863,"text":522,"children":1878},[1879,1880],{"id":525,"depth":1866,"text":525},{"id":566,"depth":1866,"text":566},{"id":632,"depth":1863,"text":632,"children":1882},[1883,1884,1885],{"id":635,"depth":1866,"text":635},{"id":666,"depth":1866,"text":667},{"id":697,"depth":1866,"text":697},{"id":730,"depth":1863,"text":731,"children":1887},[1888,1889,1890,1891],{"id":734,"depth":1866,"text":735},{"id":783,"depth":1866,"text":784},{"id":814,"depth":1866,"text":815},{"id":867,"depth":1866,"text":868},{"id":882,"depth":1863,"text":883,"children":1893},[1894,1895,1896,1897],{"id":886,"depth":1866,"text":887},{"id":908,"depth":1866,"text":909},{"id":938,"depth":1866,"text":939},{"id":990,"depth":1866,"text":991},{"id":1016,"depth":1863,"text":1016,"children":1899},[1900,1901,1902,1903,1904,1905],{"id":1019,"depth":1866,"text":1020},{"id":1056,"depth":1866,"text":1057},{"id":1092,"depth":1866,"text":1092},{"id":1116,"depth":1866,"text":1117},{"id":1137,"depth":1866,"text":1137},{"id":1181,"depth":1866,"text":1181},{"id":1211,"depth":1863,"text":1211,"children":1907},[1908,1909,1910,1911],{"id":1214,"depth":1866,"text":1214},{"id":1240,"depth":1866,"text":1240},{"id":1268,"depth":1866,"text":1268},{"id":1297,"depth":1866,"text":1297},{"id":1317,"depth":1863,"text":1317,"children":1913},[1914,1915,1916,1917,1918],{"id":1320,"depth":1866,"text":1320},{"id":1340,"depth":1866,"text":1341},{"id":1364,"depth":1866,"text":1364},{"id":1384,"depth":1866,"text":1385},{"id":1410,"depth":1866,"text":1410},{"id":1429,"depth":1863,"text":1429,"children":1920},[1921,1922,1923],{"id":1432,"depth":1866,"text":1432},{"id":1455,"depth":1866,"text":1455},{"id":1478,"depth":1866,"text":1478},{"id":1492,"depth":1863,"text":1492,"children":1925},[1926,1927],{"id":1495,"depth":1866,"text":1495},{"id":1521,"depth":1866,"text":1522},{"id":1542,"depth":1863,"text":1543,"children":1929},[1930,1931],{"id":1546,"depth":1866,"text":1547},{"id":1570,"depth":1866,"text":1571},{"id":1597,"depth":1863,"text":1597,"children":1933},[1934,1935],{"id":1600,"depth":1866,"text":1600},{"id":1628,"depth":1866,"text":1628},{"id":1649,"depth":1863,"text":1649,"children":1937},[1938,1939],{"id":1652,"depth":1866,"text":1653},{"id":1703,"depth":1866,"text":1703},{"id":1732,"depth":1863,"text":1732,"children":1941},[1942,1943,1944,1945],{"id":1735,"depth":1866,"text":1735},{"id":1752,"depth":1866,"text":1752},{"id":1769,"depth":1866,"text":1769},{"id":1792,"depth":1866,"text":1792},{"id":1815,"depth":1863,"text":1815,"children":1947},[1948,1949,1950],{"id":1818,"depth":1866,"text":1818},{"id":1832,"depth":1866,"text":1832},{"id":1846,"depth":1866,"text":1846},[1952],"技术","2026-05-28 19:00","仅保留题目与分类，适合自测、查漏补缺。",false,"md",null,{"slots":1959},{},true,"\u002F2026\u002Ffrontend-core-interview-question-outline",{"text":1963,"minutes":1964,"time":1965,"words":1966},"20 min read",19.035,1142100,3807,{"title":5,"description":1954},{"loc":1961},"posts\u002F2026\u002Ffrontend-core-interview-question-outline",[],"tech","TlEH_I9BBT5NVoFRj7pinmv-XyojJnsCU_8LIzdmN00",[1974,1979],{"title":1975,"path":1976,"stem":1977,"date":1978,"type":1971,"children":-1},"高频八股合集","\u002F2026\u002F20260528","posts\u002F2026\u002F20260528","2026-05-28 12:00",{"title":1980,"path":1981,"stem":1982,"date":1983,"type":1971,"children":-1},"常见问题分类汇总","\u002F2026\u002F2026-frontend-interview-topic-summary","posts\u002F2026\u002F2026-frontend-interview-topic-summary","2026-05-28 20:00",1779968289640]