前端必会能力 - 汇总篇

前端必会能力模块一基石与底层核心原理链接:前端必会能力 - 底层核心原理-CSDN博客本模块为前端所有上层能力的底层支撑所有框架、工程、业务问题最终均可溯源到底层原理是面试与架构落地的核心内功。1. JavaScript 核心原理体系词法作用域与闭包核心本质、实战应用场景、闭包内存泄漏风险、WeakMap/WeakSet 优雅优化方案执行机制核心执行上下文、调用栈、变量提升、事件循环机制宏任务/微任务执行顺序精准推演、浏览器与 Node 环境差异垃圾回收机制V8 引擎标记清除、分代回收策略、新生代/老生代回收逻辑、弱引用机制与内存优化落地原型链与继承原型、原型链核心规则、继承实现方案、this 四大绑定规则、箭头函数特殊绑定逻辑高频手写源码防抖、节流、深拷贝循环引用优化、Promise/A 完整实现、Promise.all/allSettled/race、异步并发调度器2. 浏览器通信机制WebWorker浏览器主线程与子线程隔离机制、postMessage 通信、线程销毁 terminate、大数据计算离线处理方案SSE服务端推送单向长连接原理、AI 流式输出落地、自动重连、断线容错、适配低延迟静态推送场景WebSocket全双工通信协议原理、心跳保活机制、断线重连策略、离线消息队列、实时聊天/大屏/IM 业务落地跨页面/跨窗口通信postMessage 跨域通信、BroadcastChannel 广播通信、SharedWorker 共享线程通信方案3. 前端内存泄漏定位与修复四大高频内存泄漏场景全局变量滥用、闭包滞留、DOM 引用未销毁、定时器/事件监听未清除Chrome DevTools 内存分析堆快照抓取、内存对比、Allocation 时序分析、泄漏点位精准定位与修复方案模块二客户端存储与安全设计链接:前端必会能力 - 客户端存储与安全设计-CSDN博客模块核心价值所有前端业务均依赖客户端存储承载身份凭证、业务配置、离线缓存、用户偏好数据。存储选型错误、使用不当会直接引发 XSS 信息泄露、CSRF 攻击、SSR 首屏报错、身份认证失效、状态错乱等核心问题。本模块贯通「原理-选型-安全-工程-SSR 同构落地」是高级前端必备基建能力。1. 三大基础客户端存储深度解析与差异对比CookieHTTP 协议层安全存储本质隶属于 HTTP 协议的服务端可控存储请求上行自动携带服务端可读写、前端可受限操作核心安全属性HttpOnly禁止 JS 读取防御 XSS 窃取凭证、Secure仅 HTTPS 环境生效、SameSiteLax/Strict/None防御 CSRF 攻击、Domain/Path限制作用域缩小暴露范围容量与生命周期单条约 4KB同域总容量有限支持会话临时存储浏览器关闭销毁、持久化存储Max-Age/Expires 自定义时效核心适用场景登录身份凭证存储、跨子域状态共享、CSRF Token 安全载体、SSR 首屏状态同步sessionStorage会话级临时存储特性严格标签页隔离同源不同标签不共享标签页关闭数据立即销毁同步读写 API适用场景多步骤表单临时草稿、临时路由参数、单次会话临时业务数据禁忌不存储持久化数据、不存储身份凭证localStorage同源持久化静态存储特性同源跨标签页共享、永久持久化手动清除才会销毁、同步 API、支持 storage 跨页监听事件适用场景用户主题、语言偏好、静态配置缓存、非敏感业务数据持久化核心红线规范严禁存储 RefreshToken、用户会话、隐私凭证等敏感数据极易被 XSS 攻击直接窃取2. 大容量离线存储 IndexedDB核心特性浏览器原生数据库、GB 级动态配额、异步非阻塞读写不阻塞主线程、支持索引查询、二进制文件存储、事务机制适用场景PWA 离线资源缓存、超大表单数据存储、图片/静态资源离线缓存、大数据列表本地持久化工程落地原生 API 繁琐企业级项目统一封装Dexie.js简化开发兼容多浏览器定位规范仅用于纯业务大数据缓存绝不承载任何身份凭证、鉴权数据3. 前端存储选型决策表数据类型最优推荐方案绝对禁止方案RefreshToken/长期会话凭证HttpOnly Cookie限定精准 Path、Domain最小权限原则localStorage / sessionStorage / 全局内存变量AccessToken短期鉴权令牌全局内存状态Pinia/Redux页面刷新自动失效所有持久化 Storage避免长期滞留泄露主题/语言/UI非敏感偏好SSR 项目用 Cookie、SPA 项目用 localStorage无多步骤表单临时草稿sessionStorage会话隔离关闭即清localStorage避免页面残留脏数据离线大数据/资源缓存IndexedDBDexie.js 封装Web Storage容量不足、性能卡顿4. 存储相关安全攻击与完整防御方案XSS脚本窃取Token攻击核心防御——敏感凭证全部存入 HttpOnly Cookie阻断 JS 读取链路配合 CSP 内容安全策略禁止非可信脚本执行从源头拦截恶意注入CSRF跨站请求伪造攻击核心防御——Cookie 配置 SameSiteLax/Strict 阻断跨站携带叠加后端 CSRF Token 二次校验形成双重防御前端敏感数据泄露风险核心原则——前端所有存储均不可信任所有鉴权、权限校验、数据脱敏必须依赖服务端二次兜底验证前端仅做展示与临时存储5. SSR 框架同构存储方案Nuxt / Next 落地核心痛点SSR 服务端环境无 window/document 浏览器 API直接调用 localStorage/sessionStorage 会导致服务端渲染报错、客户端服务端注水不匹配、首屏状态错乱。Nuxt 3 同构存储方案useCookie同构响应式 Cookie API服务端基于 Event 上下文读取、客户端基于 document 操作自动抹平环境差异useStorage通用同构 KV 存储服务端落地内存/文件、客户端自动映射 localStorage适配全局配置持久化Next.js App Router 同构存储方案服务端组件通过原生cookies()直接读取、解析 Cookie 状态完成首屏数据脱水Server Actions通过cookies().set()安全修改凭证规避客户端存储安全风险客户端组件基于useSyncExternalStore封装自定义 useLocalStorage Hook解决注水不一致问题保证渲染稳定核心会话凭证统一存入 HttpOnly Cookie 防范 XSS 窃取短期鉴权 Token 仅存内存避免持久化泄露非敏感 UI 配置根据 SPA/SSR 场景分别使用 localStorage 和 Cookie。SSR 项目全程使用框架同构 API 抹平服务端与客户端环境差异杜绝首屏报错和状态不匹配问题同时配合 SameSite、CSP 策略构建完整存储安全体系。模块三网络请求 高可用封装 鉴权权限体系链接:前端必会能力 - 网络请求 高可用封装 鉴权权限体系-CSDN博客1. Axios 企业级高可用封装多实例隔离区分业务请求、文件上传、内部接口独立配置拦截器拦截器体系请求拦截注入 Token、时间戳、签名、全局 loading响应拦截剥离后端包装层、统一状态码处理、全局错误弹窗提示请求防抖节流基于 AbortController 取消重复请求、路由跳转取消 pending 请求容错机制超时/5xx 服务异常有限次数重试、弱网/断网兜底提示类型约束TS 泛型封装统一请求入参、响应出参类型杜绝类型报错2. 双 Token 无感刷新方案企业级核心方案分层存储策略AccessToken 短期鉴权、仅存全局内存RefreshToken 长期续期、存入 HttpOnly 安全 Cookie无感刷新核心逻辑接口 401 过期拦截 全局刷新锁 并发请求队列同一时间仅执行一次刷新其余 pending 请求排队等待容错兜底刷新成功批量重试队列请求刷新失败清空凭证、跳转登录页、重置全局状态跨域适配统一开启withCredentials: true保证 Cookie 正常上行携带3. RBAC 权限管控架构核心模型用户-角色-资源权限 三维关联模型四层权限管控路由权限动态 addRoute 注册、无权限拦截、菜单权限后端返回权限树、前端递归渲染、按钮权限全局指令 v-permission 控制显隐、接口权限后端二次兜底校验防止前端绕过高阶能力SSO 单点登录、跨系统票据 ticket 校验、全局会话共享、登录状态同步模块四前端安全、埋点监控 SDK链接:前端必会能力 - 前端安全、埋点监控 SDK-CSDN博客1. 资源防盗与全方位安全防御体系基础防护页面水印、禁止右键、禁止复制基础防爬适配展示类业务企业级防护Nginx 配置 Referer 白名单、资源 URL 时效 Token 签名、IP 访问限流、静态资源防盗链核心攻防防御XSS 注入防御数据转义 CSP 策略 HttpOnly、CSRF 伪造防御Token 校验 SameSite、点击劫持防御X-Frame-Options 禁止嵌套2. 自研埋点 SDK 五层架构体系初始化层单例模式、全局配置、采样率控制、环境白名单、埋点开关采集监听层自动采集 JS 运行错误、Promise 异步异常、接口报错、PV/UV 路由跳转、页面性能指标PerformanceObserver数据加工层统一埋点数据格式、用户隐私信息脱敏、参数过滤、数据聚合调度上报层内存队列节流、空闲时机上报、页面卸载通过 navigator.sendBeacon 兜底上报、离线数据 localStorage 缓存联网补发容错层错误去重防爆炸、测试环境屏蔽、上报失败重试、异常捕获兜底模块五全链路性能优化链接:前端必会能力 - 全链路性能优化-CSDN博客1. 性能定位核心工具Network 网络分析、Performance 运行时性能、Lighthouse 整体评分、Memory 内存监控、Chrome 性能分析全家桶2. 五大通用优化维度业务/面试万能体系网络层优化浏览器缓存策略强缓存/协商缓存、Gzip/Brotli 压缩、图片 WebP/AVIF 格式适配、CDN 静态资源加速、HTTP/2 多路复用构建打包优化路由组件懒加载、Tree-Shaking 剔除无效代码、轻量化第三方依赖、核心库 CDN 外置、按需引入减少体积页面渲染优化虚拟滚动处理大数据列表、减少 DOM 操作频次、规避批量重排重绘、合理开启 GPU 加速JS执行优化长任务拆分、耗时计算移入 WebWorker、脚本 defer/async 异步加载、requestIdleCallback 空闲执行低优先级任务用户体验优化骨架屏、资源预加载 preload/prefetch、图片懒加载、路由预渲染、加载状态兜底3. 可视化专项性能优化ECharts 大数据抽样渲染、分片加载、关闭冗余动画、实例 dispose 销毁释放内存、防止页面卡顿内存溢出模块六工程化 构建工具链接:前端必会能力 - 工程化 构建工具-CSDN博客1. Vite 与 Webpack 底层原理深度对比开发环境Vite 基于 ESM 按需即时编译、无打包过程Webpack 全量打包构建、启动速度慢构建内核Vite 开发端 esbuild 预构建、生产端 Rollup 打包Webpack 全流程自研构建体系场景差异Vite 适配现代项目、启动快热更新优Webpack 生态成熟、兼容老旧项目2. 生产环境八大工程化优化方案Tree-Shaking 剔除死代码、自定义分包策略、组件/工具按需引入、静态资源压缩与合理 base64 转换、生产环境移除 console、构建缓存提速、开启 Gzip/Brotli 打包压缩、剔除无用依赖与冗余文件模块七调试与线上问题排查实战落地能力链接:前端必会能力 - 调试与线上问题排查实战落地能力-CSDN博客源码调试Sources 普通断点、条件断点、Watch 监听、调用栈溯源样式调试Elements 盒模型解析、样式优先级覆盖、伪类/继承样式排查网络调试Network 弱网模拟、接口重试、请求参数/响应数据精准排查线上排查SourceMap 源码还原、vConsole 移动端调试、Chrome USB 远程真机调试、线上日志分析复盘模块八高阶扩展高级前端 → 架构师进阶链接:前端必会能力 - 高阶扩展高级前端 → 架构师进阶-CSDN博客TypeScript 高阶能力高级类型、泛型编程、类型体操、类型约束与推导、全局类型封装框架底层原理Vue3 响应式原理、虚拟 DOM、Diff 算法React18 Fiber 架构、并发模式、任务调度机制高阶架构方案微前端qiankun/Module Federation、SSR/SSG 服务端渲染、BFF 中间层架构工程运维CI/CD 自动化流水线、灰度发布、版本迭代策略、线上风险管控复杂业务方案大文件 MD5 校验、分片上传、断点续传、秒传机制、超大文件并发控制