web：前端500知识点/速查手册

HTML基础（1～40）

CSS核心（41～90）

JavaScript原生（91～160）

ES6+/TypeScript（161～200）

浏览器原理与网络（201～240）

Vue3全家桶（241～280）

React18全家桶（281～320）

前端工程化（321～360）

Node.js基础（361～390）

前端性能优化（391～420）

前端安全与跨域（421～440）

跨端、可视化、测试（441～470）

大高频（471～500）

1、HTML是什么？ 超文本标记语言，搭建网页语义结构，非编程语言，无逻辑执行能力。

2、HTML5相比HTML4新增核心能力 语义标签、音视频、Canvas/SVG、本地存储、WebWorker、地理定位、表单增强、Web Components。

3、语义化标签作用与常用标签 提升可读性、SEO、无障碍；header/footer/article/section/nav/aside/main/figure。

4、块级、行内、行内块元素区别 块级独占一行，宽高可设；行内同行展示，宽高失效；行内块同行，支持宽高。

5、a标签target属性取值 _self当前页、_blank新窗口、_parent父框架、_top顶层页面。

6、a标签锚点跳转实现 href="#id" 匹配页面内元素id，滚动到对应位置。

7、img标签alt、src、loading作用 alt图片加载失败占位文字+SEO；src资源地址；loading="lazy"图片懒加载。

8、HTML表单核心表单元素 input/select/textarea/label/button/fieldset，label绑定input提升点击区域。

9、input type常用类型 text/password/number/email/radio/checkbox/file/range/date/time。

10、表单提交两种方式 form原生submit按钮、JS监听submit事件preventDefault手动发请求。

11、form标签action、method、enctype含义 action提交接口；method GET/POST；enctype文件上传multipart/form-data。

12、script标签defer与async区别 defer顺序执行、DOM解析完执行；async下载完成立刻执行，无序；均不阻塞HTML解析。

13、script放在head底部/body末尾原因 body末尾DOM加载完成，JS可直接操作DOM，无需监听DOMContentLoaded。

14、DOMContentLoaded与load事件区别 DOMContentLoaded DOM树构建完成；load页面所有资源（图片/视频）加载完毕。

15、viewport视口meta移动端必备配置<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> 适配手机屏幕。

16、meta标签常用功能 字符编码、视口适配、页面描述SEO、关键词、禁止缓存、页面自动跳转。

17、HTML5本地存储两类API localStorage永久存储、sessionStorage会话级存储，仅存字符串，容量5M左右。

18、localStorage与cookie区别 存储量大、仅前端操作、无自动携带请求；cookie小、每次请求自动上传、可设置过期。

19、cookie四大属性 Expires过期时间、Path路径、Domain域名、HttpOnly禁止JS读取防XSS。

20、WebStorage存储限制 同源策略隔离、仅字符串、无法跨域共享、清除缓存即删除。

21、indexedDB特点 浏览器内置数据库，异步存储，支持二进制、大容量，适合离线复杂数据。

22、Canvas与SVG核心区别 Canvas位图，JS绘制，放大模糊；SVG矢量图，标签绘制，放大不失真。

23、audio/video多媒体属性 autoplay自动播放、loop循环、controls控制面板、muted静音、preload预加载。

24、Web Worker作用 开启浏览器子线程，复杂计算不阻塞主线程渲染，无法操作DOM。

25、Web Worker通信方式 postMessage传递数据，主线程与worker双向监听message事件。

26、iframe优缺点 快速嵌入页面；缺点阻塞主页面加载、安全风险、样式隔离、通信复杂。

27、iframe跨域通信API window.postMessage，不受同源策略限制，需校验来源origin防攻击。

28、button标签type默认值 submit（放在form内默认提交表单），手动设button阻止提交。

29、表单禁用属性readonly与disabled区别 readonly仅输入不可改，可提交；disabled禁用，表单不携带该值。

30、HTML5拖放API核心事件 dragstart/drag/dragend、dragenter/dragover/drop，dragover必须preventDefault才能触发drop。

31、下载文件两种实现 a标签download属性、Blob二进制文件流。

32、无障碍A11y基础概念 适配屏幕阅读器，aria-label/aria-hidden语义增强，兼容残障用户。

33、br换行与p段落区别 br强制换行无间距；p天然段落，自带上下外边距，语义分段。

34、列表三种类型 ul/ol/dl ul无序列表；ol有序数字列表；dl定义列表（dt标题dd描述）。

35、table表格核心标签 table/thead/tbody/tr/th/td，th自带加粗居中语义表头。

36、HTML实体字符作用 转义<>&"等特殊符号，避免标签解析冲突，如<代表<。

37、doctype作用 声明文档类型，告诉浏览器使用标准模式渲染页面，必须放在页面首行。

38、标准模式与怪异模式区别 标准盒模型严格按CSS规范；怪异模式兼容旧浏览器，宽高包含边框内边距。

39、缓存控制meta标签meta http-equiv="Cache-Control"，控制页面浏览器缓存策略。

40、HTML5离线缓存Manifest淘汰原因 兼容性差、更新逻辑复杂，现用Service Worker替代。

41、CSS三种引入方式优先级 行内样式 > ID选择器 > 类/属性/伪类 > 标签/伪元素，权重逐级叠加。

42、CSS选择器权重计算规则 行内1000、ID100、类10、标签1，无进位叠加。

43、!important作用 强制覆盖所有样式，优先级最高，项目中尽量少用，破坏样式层叠逻辑。

44、CSS盒模型两种标准 W3C标准：width=内容宽，border/padding向外撑开；IE怪异盒box-sizing:border-box，宽高包含边框内边距。

45、box-sizing两个取值 content-box标准盒、border-box边框盒（移动端布局首选）。

46、BFC块级格式化上下文定义 独立渲染区域，内部布局不影响外部，解决浮动塌陷、margin重叠。

47、触发BFC的常用方式 overflow:hidden、float非none、position:absolute/fixed、display:inline-block/flex/grid。

48、BFC三大作用 清除浮动、阻止垂直margin合并、实现两栏自适应布局。

49、浮动float原理与副作用 元素脱离普通文档流；父元素高度塌陷、文字环绕、布局错乱。

50、清除浮动四种方案父级overflow:hidden、伪元素:after、父级开启BFC、空div clear:both。

51、position五大定位取值 static默认、relative相对自身、absolute相对最近非static父级、fixed视口固定、sticky粘性定位。

52、sticky粘性定位生效条件 设置top/left阈值、父容器无overflow:hidden、滚动父容器触发吸附。

53、z-index失效场景 元素未开启定位、父层z-index更低、未形成层叠上下文。

54、层叠上下文Stacking Context 页面分层渲染，父层层叠级别限制子元素z-index，absolute/fixed/opacity<1等会创建上下文。

55、Flex弹性布局核心适用场景 一维水平/垂直排列，居中、等分、自适应列表，替代浮动布局。

56、flex容器常用属性 flex-direction主轴、justify-content主轴对齐、align-items交叉轴对齐、flex-wrap自动换行。

57、flex子项flex属性缩写 flex:grow shrink basis；flex:1代表等分剩余空间。

58、flex:0 1 auto与flex:1区别 前者不放大、可缩小；后者自动占满剩余空间。

59、min-width:0在Flex场景作用 解决文字超长挤压不换行，允许子元素收缩小于内容宽度。

60、Grid网格布局特点 二维布局，同时控制行和列，复杂卡片、栅格系统首选。

61、Grid核心属性 grid-template-columns/rows 定义行列尺寸，fr等分单位，repeat简化重复尺寸。

62、CSS三种居中方案（水平垂直） flex居中、grid居中、absolute+transform平移。

63、隐藏元素三种方案区别 display:none不渲染不占空间；visibility:hidden渲染占空间；opacity:0透明可交互。

64、CSS3过渡transition 监听属性变化，实现平滑动画，需触发hover/JS修改样式。

65、CSS动画animation 关键帧@keyframes，自动循环播放，无需交互触发。

66、transition与animation区别 过渡依靠状态切换触发；动画独立定义关键帧，可控循环、延迟、次数。

67、移动端1px细线问题成因 Retina屏幕设备像素比2/3，1css像素映射2/3物理像素，线条变粗。

68、1px细线解决方案 transform:scale缩放、媒体查询dpr、border-image渐变。

69、响应式布局实现方案 媒体查询@media、flex/grid弹性布局、rem/vw/vh相对单位。

70、rem、vw、px区别 px固定像素；rem基于根字体；vw基于视口宽度，移动端主流适配单位。

71、CSS变量var()使用 –color:#fff定义变量，var(–color)读取，支持JS动态修改，主题切换利器。

72、伪类与伪元素区别 伪类匹配元素状态(:hover/:active)；伪元素创建虚拟元素(::before/::after)，需content。

73、常用伪类选择器 :hover/:active/:focus/:nth-child/:not/:disabled/:checked。

74、图片适配 object-fit取值 fill拉伸、cover裁切铺满、contain完整显示不裁切。

75、background复合属性顺序 color image repeat position/size attachment。

76、CSS模块化三种方案 CSS Modules、Scoped CSS、Tailwind原子化CSS。

77、Sass/Less预处理器优势 变量、嵌套、混合mixin、函数、循环，简化重复CSS代码。

78、BEM命名规范 Block块__Element元素–Modifier修饰，避免选择器冲突，便于维护。

79、margin垂直重叠规则 相邻块元素上下margin取最大值，开启BFC可消除合并。

80、文字溢出省略号三行代码 white-space:nowrap; overflow:hidden; text-overflow:ellipsis;

81、多行文字省略号实现 -webkit-line-clamp，兼容性仅webkit内核浏览器。

82、cursor鼠标光标样式 pointer手型、not-allowed禁止、wait加载、text文本。

83、@media媒体查询断点写法 适配手机、平板、PC多端屏幕尺寸，覆盖不同布局。

84、will-change优化渲染 提前告知浏览器元素将变化，提前分配渲染资源，优化动画卡顿。

85、GPU硬件加速开启方式 transform:translateZ(0)，分离图层，动画更流畅，不宜滥用。

86、CSS继承属性 font系列、color、text-align、line-height等自动继承父样式；盒模型、定位不继承。

87、calc()计算函数 混合单位运算，width:calc(100% – 20px)，适配自适应布局。

88、aspect-ratio比例属性 快速实现等比容器，aspect-ratio:16/9视频容器，替代padding方案。

89、阴影box-shadow/text-shadow 盒子阴影、文字阴影，分层视觉效果，不占用页面空间。

90、CSS渲染顺序优化优先transform/opacity动画，仅触发合成层；top/left修改触发回流重绘，性能差。

91、JS数据类型两大类 原始值（基本类型）、引用类型（对象）。

92、7种原始数据类型 String/Number/Boolean/Null/Undefined/Symbol/BigInt。

93、引用数据类型 Object、Array、Function、Date、RegExp等，存储堆内存地址。

94、null与undefined区别 null空对象，主动赋值；undefined变量声明未赋值、函数无返回值。

95、typeof判断各类型返回值 typeof null === 'object' bug；无法区分数组与普通对象。

96、精准判断数组方式 Array.isArray()，弥补typeof缺陷。

97、精准判断对象通用方案 Object.prototype.toString.call()，返回[object Type]。

98、==与===严格相等区别 ==隐式类型转换；===类型与值同时对比，推荐全程使用===。

99、0.1+0.2不等于0.3原因 JS采用IEEE754双精度浮点数，二进制存储小数丢失精度。

100、解决浮点数精度方案 放大整数运算、使用decimal.js库。

101、变量提升机制 var声明变量、function函数声明提升到作用域顶部；let/const存在暂时性死区不提升。

102、暂时性死区TDZ let/const变量在声明前不可访问，从块顶部到声明行区间为死区，防止未定义使用。

103、var/let/const三大区别 var函数作用域、可重复声明、变量提升无TDZ；let块级作用域、不可重复；const常量，引用类型地址不变，属性可修改。

104、作用域三种类型 全局作用域、函数作用域、块级作用域（let/const生成）。

105、作用域链定义 查找变量时逐层向上访问父级作用域，直到全局作用域，形成链式查找。

106、闭包定义 内层函数引用外层函数变量，外层执行完毕变量不销毁，形成私有变量。

107、闭包使用场景 模块化私有变量、防抖节流、柯里化、定时器保存上下文。

108、闭包内存泄漏风险 长期持有DOM/大数组无法被GC回收，用完手动置空释放。

109、this指向四大场景 全局this=window；普通函数调用this=window；对象方法this=调用对象；new实例this指向新对象；箭头函数无this继承外层。

110、call/apply/bind区别 call参数逐个传、apply数组传，两者立即执行；bind返回新函数，不立即执行，永久绑定this。

111、箭头函数特点 无this、无arguments、不可new生成实例、无原型prototype，简化回调写法。

112、原型与原型链 每个函数有prototype原型对象；实例__proto__指向构造函数原型，逐层查找形成原型链。

113、new关键字执行四步 创建空对象、绑定原型、绑定this执行构造函数、无显式return返回当前对象。

114、继承三种实现方式 原型链继承、构造函数继承、组合继承、ES6 class extends继承。

115、class本质 语法糖，底层仍是原型+构造函数，不存在真正类。

116、深拷贝浅拷贝区别 浅拷贝仅复制一层，嵌套引用共享内存；深拷贝递归复制所有层级，完全独立互不影响。

117、浅拷贝实现方式 Object.assign、展开运算符…、slice数组拷贝。

118、JSON.parse(JSON.stringify)深拷贝优缺点 简单易用；无法拷贝函数/Symbol/正则/循环引用、丢失undefined。

119、手写递归深拷贝完整逻辑 判断类型、数组/对象递归遍历、处理循环引用缓存。

120、数组常用遍历方法 for/forEach/map/filter/reduce/some/every/find/findIndex。

121、map与forEach区别 map返回新数组，有返回值；forEach无返回，仅遍历执行逻辑。

122、reduce强大用途 数组求和、去重、转对象、分组、扁平化，万能数组迭代器。

123、数组去重四种方案 Set去重、双层循环、filter+indexOf、Map哈希去重。

124、数组flat扁平化 flat(Infinity)多层数组一键展开，替代递归。

125、数组splice、slice区别 splice修改原数组，增删改；slice截取，返回新数组不改变原数组。

126、对象遍历三种方式 for…in遍历可枚举属性、Object.keys/values/entries、Reflect.ownKeys包含Symbol。

127、for…in遍历缺陷 遍历原型链上继承属性，需hasOwnProperty过滤自身属性。

128、事件流三个阶段 捕获阶段→目标阶段→冒泡阶段，addEventListener第三个参数true开启捕获。

129、事件委托原理 利用事件冒泡，父元素统一监听子元素事件，减少事件绑定，适配动态DOM。

130、event.preventDefault()与stopPropagation preventDefault阻止默认行为（a跳转、表单提交）；stopPropagation停止冒泡/捕获。

131、防抖debounce 频繁触发延迟执行，连续触发重置计时器，搜索输入框常用。

132、节流throttle 固定间隔执行一次，滚动、窗口resize、鼠标移动防频繁执行。

133、异步发展历程 回调函数→Promise→Generator→async/await，解决回调地狱。

134、Promise三种状态 pending进行中、fulfilled成功、rejected失败，状态不可逆。

135、Promise链式调用特点 then返回新Promise，串行执行，catch捕获整条链错误。

136、Promise静态方法 all全部成功才返回、race最快完成、allSettled全部完成无论成败、any任一成功。

137、async/await本质 Generator语法糖，同步写法处理异步，内部自动封装Promise。

138、await捕获异常方式 try/catch包裹，或Promise后链式catch。

139、宏任务与微任务队列 宏任务：script整体、setTimeout、ajax、UI渲染；微任务：Promise.then、MutationObserver、queueMicrotask。

140、事件循环Event Loop执行顺序 执行同步代码 → 清空所有微任务 → 执行一个宏任务 → 循环往复。

141、setTimeout延时不准原因 主线程阻塞、宏任务排队等待，最小延迟4ms。

142、JS垃圾回收GC机制 标记清除算法，标记可达对象，回收未标记废弃内存。

143、内存泄漏常见场景 全局变量、闭包常驻、未清除定时器/事件监听、DOM引用未释放、循环引用。

144、DOM与BOM区别 DOM文档对象模型，操作页面元素；BOM浏览器对象模型，操作窗口、导航、定时器。

145、BOM核心对象window属性 location地址、history路由、navigator设备信息、screen屏幕。

146、location常用API href完整地址、search查询参数、hash哈希、reload刷新、assign跳转。

147、history路由API pushState/replaceState无刷新修改地址，前端路由底层原理。

148、正则表达式两大创建方式 字面量/RegExp构造函数，构造函数支持动态拼接正则。

149、正则常用修饰符 g全局匹配、i忽略大小写、m多行匹配。

150、正则捕获组与非捕获组 ()捕获分组可提取内容；(?:)仅分组不捕获，节省性能。

151、JSON规范限制 键必须双引号、仅支持基础类型、不能有注释、不支持函数。

152、本地存储封装工具函数 统一处理JSON序列化/反序列化，简化localStorage操作。

153、表单校验原生JS实现 正则匹配手机号/邮箱/身份证，校验长度、非空。

154、文件FileReader读取本地文件 读取图片预览、文本内容，上传前本地预览方案。

155、Blob与File区别 File继承Blob，额外携带文件名、修改时间，专门处理文件。

156、URL.createObjectURL作用 二进制文件生成临时预览地址，图片视频本地预览。

157、Math常用API random随机数、floor向下取整、ceil向上、round四舍五入、max/min极值。

158、Date日期对象常用方法 getFullYear/getMonth/getDate，时间戳转换、格式化日期。

159、Generator生成器函数 function*、yield暂停执行，迭代器，实现异步流程控制。

160、Iterator迭代器协议 对象部署Symbol.iterator，支持for…of遍历，数组/Set/Map内置迭代器。

161、ES6核心特性清单 let/const、解构、展开运算符、模板字符串、箭头函数、Promise、class、模块化、Set/Map、async/await。

162、模板字符串``优势 支持换行、${}插值，替代字符串拼接。

163、对象解构赋值 快速提取对象属性，支持默认值、重命名变量。

164、数组解构 交换变量、函数多返回值接收、截取数组元素。

165、展开运算符…三种场景 数组拷贝、合并数组、函数剩余参数、对象浅拷贝。

166、剩余参数rest …args 收集函数多余参数，替代arguments类数组。

167、Set集合特点 元素唯一，去重专用，add/delete/has/clear API。

168、Map哈希表优势 键支持任意类型（对象/数字/Symbol），弥补Object键只能字符串缺陷。

169、WeakSet/WeakMap弱引用 键弱引用，GC自动回收无内存泄漏，无法遍历，适合缓存DOM对象。

170、Symbol作用 生成唯一标识，避免对象属性名冲突，私有模拟键。

171、可选链操作符?. 对象深层属性安全读取，不存在返回undefined，杜绝Cannot read property报错。

172、空值合并运算符?? 仅null/undefined取默认值，区分0/''有效假值，替代||。

173、对象简写语法 属性名与变量同名省略赋值、方法简写省略function。

174、ES6模块化import/export 前端标准模块化，静态导入，编译期解析，支持tree-shaking。

175、默认导出export default与命名导出 default导入可自定义名称；命名导出必须匹配变量名，支持多导出。

176、ES7 Array.includes() 判断数组是否包含元素，替代indexOf !== -1。

177、ES8 async/await 异步同步化，基于Promise封装，简化异步代码阅读。

178、ES10 flat/flatMap数组扁平化 多维数组展开，flatMap映射后自动扁平化一层。

179、ES11 可选捕获catch(err?) catch参数可选，无需接收错误对象。

180、ES13 #私有类字段 class内部#修饰变量，外部无法访问，真正私有属性。

181、TypeScript定位 JS超集，静态类型检查，编译时捕获类型错误，大型项目维护必备。

182、TS基础原始类型 string/number/boolean/null/undefined/symbol/bigint。

183、TS复合类型 数组、对象字面量、元组Tuple、枚举Enum、联合类型|、交叉类型&。

184、元组Tuple 固定长度、固定位置类型数组，如[type, id]。

185、枚举Enum 固定常量集合，数字枚举、字符串枚举，管理状态码。

186、any与unknown区别 any关闭类型校验，任意赋值；unknown未知类型，赋值前必须类型缩小。

187、类型断言as 手动指定变量类型，绕过TS类型推断，两种写法：val as Type / val。

188、接口interface 定义对象结构，可扩展、可继承，约束对象形状。

189、type类型别名与interface区别 type支持联合/交叉/元组；interface专注对象，支持多继承扩展。

190、可选属性、只读修饰符?/readonly ?属性可省略；readonly禁止修改属性值。

191、函数类型定义 参数类型、返回值类型、可选参数、默认参数、剩余参数类型标注。

192、泛型Generic 类型参数化，组件复用兼容多种类型，如Array、Promise。

193、泛型约束extends 限制泛型必须具备指定属性，缩小类型范围。

194、工具内置类型 Partial全部可选、Required全部必填、Readonly只读、Pick选取字段、Omit剔除字段、Record键值映射。

195、类class TS类型增强 成员修饰符public/private/protected、构造函数参数简写、抽象类abstract。

196、抽象类abstract 不能实例化，包含抽象方法强制子类实现，模板设计模式。

197、类型守卫is 自定义函数缩小联合类型，简化分支类型判断。

198、命名空间namespace 隔离全局类型，老项目模块化兼容方案，新项目优先ES Module。

199、TS编译配置tsconfig.json target编译JS版本、module模块化、outDir输出、strict严格模式、types类型包。

200、@types类型声明包 第三方库无TS源码时，提供类型定义文件.d.ts，IDE代码提示。

201、浏览器五大组成模块 用户界面、浏览器引擎、渲染引擎、JS引擎、网络模块。

202、主流浏览器JS引擎 Chrome V8、Firefox SpiderMonkey、Safari JavaScriptCore。

203、V8引擎执行JS流程 解析生成AST → 字节码生成 → 解释器执行 → 热点代码JIT编译机器码。

204、输入URL到页面完整渲染流程 DNS解析域名 → TCP三次握手建立连接 → HTTP请求发送 → 服务器返回HTML → 解析HTML生成DOM树 → 解析CSS生成CSSOM树 → 合成Render树 → 布局Layout回流 → 绘制Paint → 分层合成Composite展示页面。

205、DNS缓存层级 浏览器缓存 → 系统hosts → 本地DNS服务器 → 根域名服务器。

206、TCP三次握手目的 确认收发双方收发能力，同步序列号，建立可靠连接。

207、TCP四次挥手 双方分别告知关闭发送，等待剩余数据传输完毕再断开连接。

208、HTTP1.0/1.1/2/3核心差异 1.0短连接；1.1长连接、管线化；HTTP2二进制多路复用、头部压缩；HTTP3基于QUIC UDP无队头阻塞。

209、HTTP请求报文结构 请求行（方法/地址/版本）、请求头、空行、请求体。

210、HTTP响应报文结构 状态行（版本/状态码）、响应头、空行、响应体。

211、常用请求方法语义 GET查询、POST新增、PUT全量更新、PATCH局部更新、DELETE删除、OPTIONS预检跨域。

212、HTTP状态码分类 1xx信息、2xx成功、3xx重定向、4xx客户端错误、5xx服务端错误。

213、高频状态码含义 200成功、204无返回内容、301永久重定向、302临时、304协商缓存命中、400参数错误、401未登录、403无权限、404不存在、500服务异常、503服务不可用。

214、HTTP缓存两大类 强缓存、协商缓存，减少重复请求，提升页面速度。

215、强缓存响应头 Expires绝对过期时间、Cache-Control max-age相对过期，优先级高于Expires。

216、协商缓存两对标识 Last-Modified/If-Modified-Since文件修改时间；ETag/If-None-Match资源唯一指纹，精度更高。

217、缓存命中判断流程 先判断强缓存是否过期，未过期直接读取本地；过期携带协商标识请求服务器，返回304复用缓存。

218、缓存控制Cache-Control常用值 public共享缓存、private仅浏览器缓存、no-cache强制协商缓存、no-store禁止缓存。

219、请求头Cookie、User-Agent、Referer、Origin作用 Cookie携带登录凭证；UA设备浏览器标识；Referer来源页面防盗链；Origin跨域校验源。

220、HTTPS与HTTP区别 HTTPS基于SSL/TLS加密传输，防窃听、篡改、中间人劫持，默认443端口。

221、HTTPS握手流程 客户端发起加密套件 → 服务器下发证书 → 证书CA校验 → 非对称加密传输随机密钥 → 对称加密传输业务数据。

222、对称加密与非对称加密分工 对称加密传输业务数据速度快；非对称加密传递对称密钥，验证证书身份。

223、跨域同源策略定义 协议、域名、端口任一不同即跨域，浏览器拦截跨域AJAX请求，安全隔离。

224、跨域六大解决方案 CORS后端配置、JSONP、Nginx反向代理、postMessage、WebSocket、代理服务器。

225、CORS简单请求与预检OPTIONS请求区分 简单请求GET/POST/HEAD，无复杂头；自定义请求头/Content-Type=application/json触发OPTIONS预检。

226、CORS响应核心头 Access-Control-Allow-Origin 允许跨域域名，*允许所有域名，生产建议指定域名。

227、Access-Control-Allow-Credentials 允许跨域携带Cookie，Origin不能设为*。

228、JSONP原理 利用script标签不受同源限制，后端返回包裹回调函数的JSON数据，仅支持GET请求。

229、浏览器渲染三大阶段回流/重绘/合成 回流Layout：元素尺寸位置变化，开销最大；重绘Paint：颜色背景变化；合成Composite：分层动画transform/opacity，无回流重绘性能最优。

230、触发回流的操作 修改宽高、margin、top/left、读取offsetWidth/scrollTop布局属性。

231、强制同步布局坑 循环读写布局属性，浏览器无法批量优化，多次回流严重卡顿。

232、避免频繁回流优化方案 批量修改DOM、文档碎片DocumentFragment、离线修改display:none、使用transform动画。

233、渲染分层条件 transform3D、will-change、video/canvas、css动画元素，独立合成层。

234、DOM树、CSSOM、RenderTree关系 DOM存结构，CSSOM存样式，RenderTree只包含可见DOM节点+对应样式。

235、阻塞渲染资源 无defer/async的JS阻塞HTML解析与渲染；未加载完成CSS阻塞页面渲染。

236、图片加载不阻塞DOM解析，但阻塞页面load事件。

237、浏览器缓存位置划分 Memory Cache内存缓存（页面关闭清空）、Disk Cache磁盘持久缓存。

238、Service Worker作用 浏览器后台独立线程，离线缓存、请求拦截、推送通知，PWA核心技术。

239、PWA渐进式网页应用优势 离线可用、桌面图标、推送通知、接近原生APP体验。

240、WebSocket与HTTP区别 HTTP单向短轮询；WebSocket长连接双向实时通信，低延迟聊天室/实时大屏。

241、Vue2与Vue3核心底层区别 Vue2 Object.defineProperty劫持；Vue3 Proxy代理整对象，支持数组/新增属性监听。

242、Proxy优势 监听数组下标、新增删除属性、嵌套对象递归简化、性能更好，弥补Object.defineProperty缺陷。

243、Vue3两大API风格 Options API选项式、Composition API组合式，大型项目推荐Composition。

244、setup执行时机 组件创建前，beforeCreate之前，无this，替代data/methods逻辑聚合。

245、ref与reactive区别 ref处理基础类型，底层封装对象；reactive代理对象/数组，直接解构丢失响应式。

246、toRefs作用 解构reactive对象，保持属性响应式，模板直接使用变量。

247、computed计算属性特点 依赖缓存，依赖不变不重新执行，有get/set读写模式。

248、watch与watchEffect区别 watch精准指定监听源；watchEffect自动收集依赖，无需指定监听字段。

249、生命周期组合式钩子 onMounted/onUpdated/onUnmounted/onBeforeMount，对应Options生命周期。

250、v-if与v-show区别 v-if销毁重建DOM，切换开销大；v-show仅display:none隐藏，频繁切换优先v-show。

251、v-for必须绑定key作用 唯一标识虚拟DOM节点，diff算法高效复用节点，避免错乱。

252、key禁止使用index弊端 数组删除中间项，index变化导致节点复用错误，产生渲染bug。

253、Vue diff算法核心流程 同层对比，key映射快速查找，头/尾/最长递增子序列优化移动逻辑。

254、虚拟DOM VNode作用 JS对象描述DOM结构，减少真实DOM操作，跨平台渲染统一适配。

255、组件通信八种方案 props父传子、emit子传父、provide/inject跨层级、pinia全局、ref获取实例、eventBus、$attrs/$listeners、Vue3 mitt。

256、provide/inject适用场景 深层祖孙组件传值，穿透多层组件，非响应式需包裹ref/reactive。

257、Props校验规范 类型校验、默认值default、必填required，提升组件健壮性。

258、单向数据流规则 子组件不可直接修改props，需拷贝本地变量或emit通知父修改。

259、自定义v-model双向绑定 Vue3组件modelValue参数 + update:modelValue事件，支持多v-model。

260、Pinia替代Vuex优势 去除mutations、API简洁、模块化自动拆分、TS友好、无命名空间繁琐写法。

261、Pinia核心概念 State/Getters/Actions State状态仓库；Getters计算属性；Actions同步/异步修改状态。

262、Vue Router4路由核心API createRouter、createWebHistory/HashHistory，history模式无#哈希。

263、hash与history路由区别 hash基于#，后端无需配置；history真实路径，刷新404需后端配置重定向。

264、路由守卫分类 全局前置/后置、路由独享、组件内守卫，鉴权登录拦截核心。

265、路由懒加载实现 import()动态导入，打包代码分割，首屏减少js体积。

266、keep-alive缓存组件 组件不销毁，缓存DOM状态，include/exclude匹配组件名。

267、SFC单文件组件scoped原理 CSS添加唯一data-v前缀，样式隔离不污染全局，避免选择器冲突。

268、Teleport传送门组件 将DOM挂载到body外层，解决弹窗父级overflow:hidden遮挡问题。

269、Suspense异步组件加载 异步组件加载时展示fallback占位，配合setup async。

270、自定义指令钩子函数 v-xxx指令created/beforeMount/mounted/update，封装通用DOM操作。

271、Vue3 Fragment多根节点 无需外层根div，直接多个根标签，简化DOM层级。

272、setup语法糖 Vue3组合式API语法糖，无需手动return变量、无需定义setup函数，简化代码结构，支持直接使用props、emit、路由等API，是目前Vue3主流开发写法。

273、defineProps/defineEmits setup语法糖专属编译宏，无需导入，用于声明组件props参数和自定义事件，支持类型校验、默认值配置，仅在274、defineExpose组件暴露属性语法糖模式下组件属性默认私密，通过defineExpose主动暴露方法/变量，供父组件通过ref调用。

275、useAttrs与useSlots useAttrs获取组件透传的所有属性，规避$attrs繁琐写法；useSlots精准获取插槽内容，适配自定义插槽渲染逻辑。

276、Vue3响应式丢失场景与解决 直接解构reactive对象、函数参数解构、赋值新对象会丢失响应式，通过toRefs/toRef、局部声明变量修复。

277、shallowRef/shallowReactive浅层响应式 仅监听顶层属性变化，深层不劫持，适合大型复杂对象/数据，大幅提升响应式性能。

278、readonly只读响应式 生成只读响应式数据，禁止修改，用于全局状态、常量数据保护，修改会触发控制台警告。

279、watch精准监听进阶 配置immediate立即监听、deep深度监听、flush同步/异步触发，适配不同数据监听场景。

280、Vue3全局属性挂载 app.config.globalProperties挂载全局方法/变量，组件内直接调用，替代Vue2原型挂载方式。

281、React18核心更新 并发渲染、自动批处理更新、Suspense服务端渲染、自动移除冗余渲染、新hooks、严格模式双渲染。

282、React与Vue核心区别 React JSX语法、JS驱动逻辑、函数式编程、自由度高；Vue模板语法、声明式、上手快、生态集成度高。

283、JSX语法规则 单一根节点、className替代class、htmlFor替代for、驼峰样式、表达式{}嵌入、注释写法特殊。

284、React组件两大类型函数组件（主流）、类组件（废弃老旧写法），函数组件无this、靠hooks管理状态。

285、组件Props特性 只读不可修改、父子传值、支持默认值、类型校验PropTypes、批量展开传参。

286、State状态更新规则 状态不可变，必须setState/setX更新，直接修改不会触发视图更新。

287、React18自动批处理 异步回调、定时器内多次更新自动合并，减少渲染次数，提升性能。

288、useState基础原理 定义组件状态，返回状态值和更新函数，异步更新、批量合并渲染。

289、useEffect副作用钩子 处理副作用请求、定时器、DOM操作，依赖项控制执行时机，支持清理函数。

290、useEffect依赖项规则 空依赖挂载执行一次、依赖更新触发执行、无依赖每次渲染都执行。

291、useRef三大用途 获取DOM节点、保存可变变量、存放定时器/实例对象，值变更不触发重渲染。

292、useContext跨组件传值 全局创建Context，Provider注入数据，子组件useContext消费，替代多层props穿透。

293、useReducer状态管理 复杂状态、多操作逻辑场景，集中管理状态更新，类似Redux核心思想。

294、useMemo缓存计算结果 缓存复杂计算值，依赖不变不重复计算，避免无效算力消耗。

295、useCallback缓存函数 缓存函数引用，防止子组件频繁接收新props引发重渲染，配合memo使用。

296、React.memo组件缓存 浅比较props，props不变阻止组件重渲染，函数组件性能优化关键。

297、useImperativeHandle 配合forwardRef，暴露子组件指定DOM方法，禁止父组件随意操作子DOM。

298、useLayoutEffect DOM绘制前同步执行，可读取布局信息，解决渲染闪烁问题，阻塞视图渲染慎用。

299、React18新增useId 生成唯一稳定ID，适配服务端渲染，避免客户端服务端ID不匹配。

300、React18新增useTransition 区分紧急更新与过渡更新，优先响应用户输入，流畅渲染大列表。

301、useDeferredValue 延迟更新非紧急数据，防抖式更新，优化大数据渲染卡顿。

302、React合成事件 统一封装原生事件，抹平浏览器兼容，事件委托到根节点，性能更优。

303、阻止React事件冒泡与默认行为 e.stopPropagation()阻止冒泡、e.preventDefault()阻止默认行为。

304、React组件渲染机制 状态/props变更 → 生成新虚拟DOM → diff对比 → 最小粒度更新真实DOM。

305、React diff算法策略 同层对比、key唯一标识、优先复用节点、优化移动/删除/新增逻辑。

306、key作用与禁忌 标识虚拟DOM节点，提升diff效率，禁止用index、随机数做key。

307、组件性能优化核心方案 memo+useCallback+useMemo、减少不必要渲染、拆分组件、懒加载。

308、React路由React Router6变化移除Switch改为Routes、路由element属性、编程式useNavigate、嵌套路由简化。

309、常用路由钩子 useNavigate跳转、useParams获取路由参数、useLocation获取路由信息、useRoutes配置路由。

310、路由懒加载与Suspense lazy+Suspense实现组件按需加载，首屏提速，展示loading占位。

311、Redux状态管理核心 Store仓库、State状态、Action动作、Reducer纯函数、Dispatch派发更新。

312、Redux三大原则 单一数据源、状态只读、纯函数修改状态。

313、Redux中间件作用 处理异步、日志、持久化，核心redux-thunk处理异步Action。

314、Redux Toolkit优势 简化Redux冗余代码、内置immer支持可变写法、自动合并reducer、无需手动switch。

315、RTK核心API createSlice创建模块、createAsyncThunk处理异步、configureStore配置仓库。

316、React表单受控与非受控组件 受控值绑定state、实时同步；非受控靠ref获取值，适合简单表单。

317、React严格模式作用 检测不安全生命周期、废弃API、副作用异常，开发环境双重渲染校验。

318、SSR服务端渲染原理 服务端生成HTML、注水hydrate激活交互，首屏快、利于SEO。

319、Next.js核心优势 基于React的SSR/SSG框架、路由即文件、自动优化、适配多端渲染。

320、React常用UI库 Ant Design、Material UI、Tailwind UI、Arco Design，企业级快速开发方案。

321、前端工程化核心意义 解决代码混乱、兼容性、打包压缩、模块化、团队协作、工程规范、自动化构建问题。

322、工程化核心工具栈 包管理、构建打包、代码校验、格式化、自动化部署、工程规范体系。

323、npm/yarn/pnpm核心区别 npm原生默认、yarn速度快锁版本、pnpm硬链接节省磁盘、速度最快、无幽灵依赖。

324、package.json核心字段 name版本、scripts脚本、dependencies生产依赖、devDependencies开发依赖、main入口、module模块化入口。

325、依赖版本号规则 ^兼容次版本、~兼容补丁版本、*任意版本、固定版本号锁定。

326、CommonJS与ES Module区别 CJS运行时加载、同步、导出对象；ESM编译时解析、静态、支持tree-shaking。

327、Tree-Shaking原理 基于ESM静态语法，剔除未引用代码，减小打包体积，CJS不支持。

328、Webpack核心五大概念 Entry入口、Output出口、Loader转换器、Plugin插件、Mode模式。

329、Loader与Plugin区别 Loader转换文件资源（css/less/ts）；Plugin贯穿构建生命周期，处理整体流程。

330、常用Loader作用 babel-loader转ES6+、css-loader解析css、style-loader插入页面、file-loader处理静态资源。

331、常用Plugin作用 HtmlWebpackPlugin生成html、CleanWebpackPlugin清空目录、DefinePlugin定义环境变量。

332、Webpack热更新HMR 模块热替换，修改代码局部刷新，不刷新整页、保留页面状态。

333、Webpack打包优化方案 代码分割、懒加载、缓存、压缩、tree-shaking、externals剥离依赖。

334、Vite相比Webpack优势 基于ESBuild预构建、原生ESM、无打包开发启动极速、按需编译、热更新更快。

335、Vite核心原理 开发环境不打包，浏览器原生加载ESM，拦截请求处理依赖，生产环境Rollup打包。

336、ESBuild优势 Go语言编写、极速编译、TS/ES6+一键转换、大幅提升构建速度。

337、Babel作用与原理 编译高版本JS/TS为低版本，解析AST、转换、生成代码三步流程。

338、Babel核心包 @babel/core核心、@babel/preset-env智能预设、@babel/plugin-*插件。

339、持久化缓存原理 webpack持久化缓存、vite预构建缓存，二次构建提速80%以上。

340、代码分割策略 入口分割、动态导入分割、第三方依赖单独分割、公共代码抽离。

341、Externals剥离依赖 打包忽略vue/react等框架，CDN引入，减小打包体积、提速构建。

342、ESLint代码校验 检查语法错误、代码风格、规避bug，统一团队代码规范。

343、Prettier代码格式化 统一代码缩进、换行、空格，解决格式不统一问题，配合ESLint共存。

344、Git规范与提交校验 husky拦截git钩子、lint-staged校验暂存区代码、commitlint规范提交信息。

345、Commit规范格式 feat新功能、fix修复、docs文档、style格式、refactor重构、test测试、chore构建。

346、模块化演进历程 全局变量→IIFE→CommonJS→AMD→ESM，从混乱到标准化。

347、静态资源处理方案 图片字体压缩、资源CDN、路径解析、资源内联、按需引入。

348、环境变量区分 开发/测试/生产环境区分，不同环境接口、打包策略、日志配置不同。

349、Mock数据方案 vite-plugin-mock、mockjs、接口预模拟，前端独立开发不依赖后端。

350、前端CI/CD流程 代码提交→校验构建→单元测试→打包上传→部署服务器，自动化流水线。

351、Docker部署前端 镜像打包静态资源、Nginx托管、容器化部署、环境统一。

352、Monorepo工程方案 单仓库管理多包、统一版本、共享依赖、适配大型组件库/框架开发。

353、pnpm workspace能力 多包联动、本地依赖互通、统一脚本、高效管理monorepo项目。

354、组件库工程化 文档站点、单元测试、版本管理、按需打包、主题定制、发布npm。

355、TS工程化配置 严格模式、路径别名、类型检查、编译过滤、声明文件生成。

356、路径别名优化 @匹配src目录，简化导入路径，避免层级混乱。

357、打包体积分析工具 webpack-bundle-analyzer可视化依赖体积，定位大文件优化。

358、Gzip压缩部署 打包生成gzip文件，Nginx配置解析，大幅减小传输体积、提升加载速度。

359、按需引入优化 babel-plugin-import、tree-shaking，剔除未使用组件与代码。

360、工程化最佳实践 规范校验、缓存优化、代码分割、资源压缩、环境隔离、自动化部署闭环。

361、Node.js定位与特点 基于V8引擎的后端JS运行环境、单线程、事件驱动、非阻塞IO、适合高并发IO场景。

362、Node与浏览器JS区别 Node无DOM/BOM、内置文件/网络/进程模块、可操作本地资源、服务端能力。

363、Node单线程优缺点 优点无线程竞争、开销小；缺点CPU密集型阻塞主线程、利用多核困难。

364、Node事件循环六阶段 timers定时器、pending延迟IO、idle空闲、poll轮询IO、check setImmediate、close关闭回调。

365、process进程核心API process.env环境变量、process.argv命令行参数、process.cwd()运行目录、process.exit()退出进程。

366、全局变量与模块作用域 Node无window，全局global；模块私有作用域，变量不污染全局。

367、CommonJS模块加载流程 路径解析→文件读取→编译包装→执行导出→缓存复用，重复加载读取缓存。

368、module.exports与exports区别 module.exports为真正导出对象；exports是引用指针，直接赋值失效。

369、__dirname与__filename __dirname当前文件目录路径；__filename当前文件完整路径。

370、fs文件系统核心能力 读写文件、创建删除目录、文件监听、流式读取大文件。

371、fs同步异步方法区别 sync后缀同步阻塞线程；异步回调/Promise写法不阻塞主线程。

372、path路径处理核心API path.join拼接路径、path.resolve绝对路径、path.extname后缀、path.dirname目录。

373、http模块搭建基础服务 创建服务、监听端口、解析请求报文、响应数据，原生实现接口服务。

374、req/res请求响应对象 req获取请求头/参数/体；res设置状态码、响应头、返回数据。

375、数据流Stream四类流 Readable可读、Writable可写、Duplex双工、Transform转换流，处理超大文件防内存溢出。

376、Buffer缓冲区作用 处理二进制数据、文件、网络流，弥补JS无二进制类型短板。

377、Node中间件原理 洋葱模型，req/res贯穿、逐层处理、next放行，Express/Koa核心机制。

378、Express核心特性 极简路由、中间件体系、静态资源托管、兼容原生http模块。

379、Koa相比Express优势 基于Promise、async/await、无回调地狱、洋葱模型更规范、轻量化。

380、跨域服务端解决方案 后端设置Access-Control-*响应头、允许跨域域名、携带cookie。

381、Node热更新原理 清除模块缓存、重新加载文件，无需重启服务更新代码。

382、Cluster多核利用 开启多进程、主进程管理、子进程工作，解决单线程无法利用多核CPU问题。

383、进程守护工具PM2 进程守护、自动重启、日志记录、负载均衡、性能监控。

384、Node异常捕获方案 同步try/catch、异步catch、全局unhandledRejection监听。

385、接口参数校验 Joi/Zod校验参数类型、长度、正则、必填，规避非法参数。

386、静态资源托管原理 匹配请求路径、读取本地文件、设置mime类型、返回文件流。

387、Node定时任务 setInterval定时、node-schedule cron表达式定时执行任务。

388、日志分级规范 info正常、warn警告、error错误、debug调试，区分生产日志级别。

389、JWT令牌鉴权原理 header+payload+signature，无状态、服务端不存会话，适配分布式服务。

390、Node性能瓶颈与优化 避开CPU密集任务、使用子进程/Worker、流式处理、缓存复用、异步解耦。

391、前端性能优化核心指标 FCP首次内容绘制、LCP最大内容绘制、FID交互延迟、CLS布局偏移，核心Web指标。

392、性能优化四大方向 加载优化、渲染优化、代码优化、用户体验优化。

393、首屏加载慢核心原因 资源体积大、请求过多、无缓存、阻塞渲染、大文件未拆分、首屏冗余代码。

394、网络加载优化方案 资源压缩、CDN加速、缓存策略、HTTP2多路复用、减少HTTP请求。

395、图片优化全套方案 无损压缩、WebP/AVIF格式、图片懒加载、合适尺寸、雪碧图、内联小图标。

396、JS加载优化 懒加载、代码分割、Tree-Shaking、移除冗余代码、第三方库按需引入。

397、CSS加载优化 内联首屏CSS、CSS压缩、去除无用样式、避免@import阻塞、样式预加载。

398、字体优化方案 字体压缩、WOFF2格式、字体懒加载、font-display:swap避免文字闪烁。

399、浏览器缓存分层优化 静态资源长期强缓存、接口数据协商缓存、频繁变动资源缩短缓存时间。

400、Gzip/Brotli压缩优势 服务端压缩文本资源，体积减少60%以上，大幅提升传输速度。

401、减少回流重绘策略 批量修改DOM、避免频繁读取布局属性、使用transform/opacity动画。

402、GPU加速优化动画 开启合成层，动画不走回流重绘，页面动画更流畅。

403、虚拟列表原理与场景 只渲染可视区域DOM，滚动动态替换数据，解决万级列表卡顿。

404、防抖节流性能优化 降低高频触发事件执行次数，减少CPU占用，适配滚动/输入/resize。

405、避免内存泄漏优化 及时销毁定时器、事件监听、清空引用、解除闭包占用。

406、首屏骨架屏作用 替代空白加载，提升用户感知体验，降低等待焦虑。

407、预加载与预连接 preload预加载关键资源、preconnect预连接域名、prefetch预加载未来资源。

408、长列表优化方案 虚拟滚动、分页加载、数据懒渲染、分批渲染避免一次性渲染大量DOM。

409、打包体积优化细节 移除无用依赖、替换轻量库、externals剥离大依赖、压缩混淆代码。

410、SSR/SSG性能优势 服务端直出HTML，首屏渲染快、减少客户端JS计算、利于SEO。

411、客户端水合优化 减少冗余水合、选择性水合、规避水合卡顿。

412、请求优化策略 接口合并、轮询改WebSocket、批量请求、缓存接口数据。

413、懒加载全覆盖场景 图片、视频、组件、路由、接口数据，按需加载减少首屏压力。

414、避免阻塞主线程 复杂计算拆分、WebWorker异步计算、任务分片执行。

415、LCP最大内容绘制优化 优化首屏大图、精简首屏JS、减少阻塞资源、提速DNS与连接。

416、CLS布局偏移优化 固定图片/广告尺寸、预留占位、避免动态插入元素挤压布局。

417、打包分析与性能监控 可视化体积占比、定位大文件、线上性能埋点监控。

418、移动端专属优化 适配视口、减少GPU滥用、避免超大图层、优化触摸响应。

419、性能兜底策略 弱网降级、资源兜底、超时重试、骨架占位。

420、性能优化落地流程 指标检测→定位瓶颈→针对性优化→复测对比→持续监控迭代。

421、前端三大核心安全漏洞 XSS跨站脚本、CSRF跨站请求伪造、SQL注入（前端拦截）。

422、XSS漏洞原理 恶意脚本注入页面，浏览器解析执行，窃取cookie、劫持页面、篡改内容。

423、XSS三种类型 存储型（入库持久危害）、反射型（URL参数触发）、DOM型（前端渲染触发）。

424、XSS全套防御方案 输入过滤、输出转义、CSP内容安全策略、HttpOnly cookie、禁止eval执行。

425、CSP防御原理 限制脚本、样式、资源加载域名，禁止内联脚本、禁止eval，从根源拦截恶意代码。

426、CSRF漏洞原理 利用用户登录态，诱导浏览器自动发起跨域请求，冒用用户身份操作。

427、CSRF防御方案 Token校验、Referer/Origin校验、SameSite Cookie、验证码拦截。

428、SameSite Cookie属性 Strict严格禁止跨站、Lax允许简单导航、None允许所有跨站需HTTPS。

429、点击劫持原理与防御 透明iframe覆盖页面，诱导误点击；X-Frame-Options禁止被嵌套。

430、接口防刷方案 频率限制、Token时效、验证码、请求签名、IP限流。

431、敏感数据保护策略 前端脱敏展示、传输HTTPS、禁止本地存储密码、接口加密。

432、HTTP请求劫持防御 全站HTTPS、证书校验、禁止HTTP明文传输。

433、跨域完整解决方案对比 CORS正式生产、Nginx代理通用、JSONP仅兼容GET、postMessage页面通信。

434、CORS预检请求触发条件 非简单请求、自定义请求头、application/json、带Cookie跨域。

435、跨域携带Cookie条件 前端withCredentials=true、后端Allow-Credentials=true、禁止*通配域名。

436、Nginx反向代理跨域原理 同源访问本地代理、代理转发后端接口、服务器端无跨域限制。

437、WebSocket跨域特性 不受HTTP跨域限制，需后端校验Origin来源防恶意连接。

438、前端权限控制两层 接口权限（后端拦截）、页面按钮权限（前端隐藏禁用）。

439、Token安全存储方案 优先HttpOnly Cookie、规避localStorage被XSS窃取、定期刷新Token。

440、安全编码规范 禁止拼接HTML、优先textContent、参数校验、异常捕获、废弃接口下线。

441、跨端开发核心价值 一套代码多端运行、降低开发维护成本、统一多端体验。

442、主流跨端方案分类 Web跨端、React Native/Weex原生渲染、Flutter、小程序跨端。

443、React Native原理 JS驱动、原生渲染、JS桥接通信，兼顾开发效率与原生体验。

444、Uni-app跨端能力 一套代码编译H5/小程序/App，生态完善，国内小程序开发主流。

445、Taro跨端优势 支持React/Vue语法、多端一致性高、工程化完善。

446、小程序双线程机制 渲染线程+逻辑线程，分离渲染与计算，提升流畅度。

447、小程序性能优化 分包加载、预加载、图片压缩、减少setData频次、虚拟列表。

448、大屏可视化技术栈 ECharts/AntV、DataV、Three.js、WebGL、SVG可视化。

449、ECharts核心能力 常规图表、自适应、事件交互、数据动态更新、tooltip、图例联动。

450、AntV生态优势 图表更美观、定制性强、支持复杂拓扑、流程图、地理可视化。

451、大数据可视化优化 数据采样、防抖更新、虚拟渲染、离屏画布、分层绘制。

452、WebGL/Three.js场景 3D模型、动画场景、三维大屏、模型交互、粒子特效。

453、Canvas大屏适配方案 分辨率适配、等比缩放、自动重绘、窗口resize监听。

454、前端测试三大类型 单元测试、集成测试、E2E端到端测试。

455、单元测试作用 校验工具函数、核心逻辑、边界用例，保障代码重构不崩。

456、Jest单元测试框架 零配置、快照测试、模拟函数、异步测试、覆盖率统计。

457、React/Vue组件测试 @testing-library渲染组件、断言DOM、模拟用户交互。

458、E2E端到端测试 Cypress/Playwright模拟真实用户操作，全流程自动化测试。

459、测试覆盖率指标 语句覆盖、分支覆盖、函数覆盖、行覆盖，保障代码健壮性。

460、自动化测试落地流程核心逻辑单测→页面E2E→CI自动执行→报错拦截。

461、组件库测试规范 单测校验功能、视觉回归测试、多浏览器兼容测试。

462、多浏览器兼容方案 Babel兼容、autoprefixer补样式、polyfill补API、浏览器差异适配。

463、移动端兼容要点 机型适配、系统版本兼容、手势兼容、软键盘适配。

464、PWA核心能力 离线缓存、桌面图标、消息推送、秒开体验、接近原生。

465、微前端核心价值 大型项目拆分、独立部署、技术栈异构、增量迭代升级。

466、微前端主流框架 qiankun、single-spa、icestark，实现应用隔离、样式隔离、JS隔离。

467、微前端隔离方案 样式隔离scoped/Shadow DOM、JS沙箱隔离、全局变量隔离。

468、前端监控体系 错误监控、性能监控、用户行为监控、白屏监控、接口监控。

469、错误捕获全覆盖 同步错误、异步错误、资源加载错误、路由错误、全局未捕获异常。

470、日志上报策略 异步上报、合并上报、防抖上报、异常分级上报，不阻塞主业务。

471、手写防抖函数完整版 定时器延迟执行、连续触发重置计时、立即执行选项、取消防抖功能。

472、手写节流函数完整版 时间戳/定时器双版本、固定间隔执行、首尾执行、取消节流。

473、手写深拷贝完整代码 递归遍历、区分数组对象、处理循环引用、兼容函数/Symbol/正则。

474、手写Promise核心原理 状态管理、resolve/reject、then链式调用、异步队列、值穿透。

475、手写Promise.all/race/allSettled 批量处理Promise、统计完成状态、处理失败逻辑。

476、手写bind/call/apply 改变this指向、参数处理、返回新函数、原型保留。

477、手写new操作符 创建空对象、绑定原型、执行构造函数、判断返回值。

478、手写数组去重（多种方案） Set、Map、双层循环、filter、对象键值去重。

479、手写数组扁平化 递归实现、迭代实现、兼容多维数组、Infinity全展开。

480、手写发布订阅模式 事件中心、on订阅、emit发布、off取消、once单次订阅。

481、手写节流防抖应用场景 搜索框、滚动加载、窗口缩放、鼠标移动、按钮防重复点击。

482、异步串行/并行控制 批量异步、顺序执行、并发限制、异步队列调度。

483、长列表卡顿解决方案 虚拟列表、分批渲染、数据分片、防抖渲染、销毁不可见DOM。

484、首屏白屏问题排查与修复 资源阻塞、JS报错、样式缺失、渲染阻塞、网络异常兜底。

485、前端跨域问题全方位解决 开发代理、生产Nginx、服务端CORS、WebSocket、postMessage场景适配。

486、大数据渲染优化实战虚拟滚动、数据懒加载、WebWorker计算、分片渲染、避免循环读写布局。

487、React重复渲染终极优化 memo+useCallback+useMemo、状态下沉、拆分组件、消除无效依赖。

488、Vue性能优化实战 按需引入、缓存组件、虚拟列表、减少watch监听、合理使用v-if/v-show。

489、前端内存泄漏排查与修复 定时器清空、事件解绑、DOM引用释放、闭包置空、全局变量回收。

490、打包速度与体积双重优化 缓存优化、代码分割、Gzip、按需引入、剥离依赖、压缩资源。

491、权限系统前端实现方案 路由权限、按钮权限、接口权限、动态路由、权限缓存。

492、登录态过期与Token刷新方案 无感刷新、双Token机制、过期拦截、排队请求重发。

493、海量日志/数据前端处理 流式解析、分片处理、WebWorker、避免主线程阻塞。

494、图片批量上传与断点续传 文件切片、并发控制、进度监听、失败重试、断点缓存。

495、复杂表单校验与性能优化 统一校验规则、防抖校验、按需校验、缓存校验结果。

496、前端异常监控与上报 全局捕获错误、错误分类、堆栈解析、用户信息上报、告警机制。

497、弱网/断网适配方案 网络监听、资源兜底、缓存降级、重试机制、友好提示。

498、组件封装最佳实践 props校验、默认值、插槽扩展、事件透出、样式隔离、TS类型约束。

499、项目工程化落地完整流程 规范约束、校验格式化、提交规范、自动化构建、CI/CD部署、监控迭代。

500、前端高阶成长总结 夯实原生基础、吃透框架原理、精通工程化、深耕性能安全、具备场景落地与问题排查能力。