光影少年

一、函数组件 vs 类组件 1️⃣ 函数组件（Function Component） 本质：就是一个函数，接收 props，返回 JSX 👉 现在主流写法（配合 Hooks） 特点： 更简洁 使用 u

一、虚拟 DOM（Virtual DOM） 1. 是什么 虚拟 DOM 本质就是一个 JS 对象，用来描述真实 DOM 结构。 例如 JSX： 会被转换成类似： 2. 为什么要有虚拟 DOM？ 核心目

一、整体思路 Webpack 构建性能问题通常分为两类： 构建速度慢（build time）：包括初次构建、增量构建（开发模式 HMR）。 打包体积大（bundle size）：影响生产环境首屏加载速

一、TypeScript开发框架是什么？ TypeScript 开发框架，本质上是指： 关键点： TypeScript：JavaScript 的超集，提供类型系统和编译期检查。 框架：封装常用功能（路

1️⃣ 页面渲染优化（整体性能） 核心目标：减少渲染时间、提升首屏速度、避免卡顿 资源优化 压缩 JS/CSS/图片（Webpack、Terser、imagemin） 按需加载（Code Splitt

一、最核心：减少不必要的渲染 这是 React 性能优化的本质。 1. React.memo 函数组件避免重复渲染： 👉 适用于： props 不常变 纯展示组件 2. useMemo（缓存计算结果）

前端里的 SSR（Server-Side Rendering） 和 SSG（Static Site Generation） 本质都是“提前把页面 HTML 准备好”，但它们的生成时机和适用场景完全不同

先把结论说清楚： 👉 你这个卡顿，大概率不是“请求多”，而是“加密 + 多请求 + 同步执行”把主线程卡死了，导致点击收起面板时要等 1~2 秒才有响应。 下面我给你按“真实工程排查 + 可落地优化”

🧠 一、先判断：卡顿是哪一类？ 不同类型，排查思路完全不同： 1️⃣ 渲染卡顿（最常见） 表现： 滚动掉帧 动画不流畅 页面“抖” 👉 本质：主线程被占满（>16ms） 2️⃣ 交互卡顿 表现： 点击