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）

一、HTML基础（1~40）

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替代。

二、CSS核心（41~90）

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修改触发回流重绘，性能差。

三、JavaScript原生（91~160）

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内置迭代器。

四、ES6+/TypeScript（161~200）

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~240）

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长连接双向实时通信，低延迟聊天室/实时大屏。

六、Vue3全家桶（241~280）

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原型挂载方式。

七、React18全家桶（281~320）

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~360）

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、工程化最佳实践 规范校验、缓存优化、代码分割、资源压缩、环境隔离、自动化部署闭环。

九、Node.js基础（361~390）

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~420）

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~440）

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~470）

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~500）

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