前端核心知识体系

一、JavaScript 核心原理1. 函数柯里化原理将多参数函数转为嵌套单参数函数利用闭包缓存参数参数足够时统一执行。作用参数复用、延迟执行、动态适配场景。标准实现参数不足返回新函数继续收参参数足够执行原函数。2. JS 继承组合继承原型链 借用构造函数。寄生组合继承最优方案避免父类构造函数重复执行。ES6 class语法糖底层基于寄生组合继承。3. 遍历方式区别for…in遍历键名会遍历原型链适合对象。for…of遍历值不遍历原型适合数组、Map、Set。4. 浏览器垃圾回收GC标记清除主流方案能处理循环引用存在内存碎片。引用计数老方案无法处理循环引用易造成内存泄漏。5. Promise 统一错误捕获通过 Babel 遍历 AST自动为所有 Promise 注入 catch 回调。二、TypeScript 核心type 与 interface 区别interface用于描述对象 / 类结构支持继承、自动合并。type可定义任意类型不支持重复定义组合能力更强。as 断言仅编译期提示不执行真实类型转换。.d.ts 声明文件提供类型提示不参与编译运行。三、Vue 2/Vue 3 全家桶1. 响应式原理Vue2Object.defineProperty 劫持 getter/setter无法监听数组索引 / 新增属性。Vue3Proxy Reflect支持全场景监听性能更优支持 Map/Set。2. 核心 APIcomputed依赖收集 缓存依赖不变不重新计算。watch主动监听支持异步无缓存。ref包装基本类型对象底层自动走 reactive。reactive深度代理对象实现响应式。3. 组件高级用法递归组件必须设置 name 属性循环调用自身。provide/inject传递 ref/reactive 可保持响应式。keep-alive 刷新动态 include、动态 key、onActivated。4. v-model 原理语法糖props: modelValue event: update:modelValue。5. Vue3 优化点Proxy 响应式Composition API 逻辑复用Tree shaking 减小体积Fragment 多根节点异步组件 SuspensePatchFlag 最长递增子序列 Diff 算法四、React 核心原理设计理念声明式、组件化、单向数据流。虚拟 DOM不可变数据结构更新时生成新 VNode。Diff 算法分层对比时间复杂度 O (n)React18 支持并发中断。Hooks 原理基于链表存储必须在顶层调用保证顺序不变。Redux 原理单一状态树、纯函数 reducer、单向数据流。流程dispatch (action) → reducer 更新 state → 订阅触发渲染。五、前端 SOLID 原则 设计模式1. SOLID 五大原则单一职责一个组件 / 函数只负责一项职责。开放封闭对扩展开放对修改关闭。里氏替换子类可安全替换父类不破坏逻辑。接口隔离只依赖自身需要的接口 / Props。依赖倒置依赖抽象不依赖具体实现。2. 常用设计模式组件模式基础 / 业务 / 页面三级拆分。单例模式全局 Store、工具类、全局弹窗。工厂模式根据 type 动态创建组件 / 请求实例。观察者 / 发布订阅EventBus、状态更新、DOM 事件。装饰器模式HOC、权限、日志、性能埋点。代理模式Vue3 Proxy、请求拦截、组件懒加载。3. 组件库开发规范单一职责、高可配置、高可扩展、跨技术栈兼容。Props 精简、样式隔离、异常兜底、完善文档。六、微前端 qiankun核心目标解决单体臃肿、技术栈锁定、老项目重构。核心能力HTML Entry加载子应用完整 HTML。JS 沙箱Proxy 快照隔离全局变量。样式隔离Shadow DOM 或选择器前缀隔离。生命周期bootstrap/mount/unmount/update。应用通信initGlobalState 发布订阅模式。适用场景多团队、多技术栈、独立部署、灰度发布。七、低代码平台开源方案Vue3 Element Plus后台系统快速开发。React Formily复杂表单场景。amis百度开源JSON 配置直接生成页面。商业方案宜搭、氚云、Mendix。核心思想可视化拖拽 JSON Schema 组件工厂。八、工程化Webpack / Vite1. Vite 优势开发环境使用浏览器 ESM 按需加载不打包。esbuildGo 编写预构建依赖速度极快。模块级热更新。2. 打包优化代码分割、Tree shaking、压缩混淆。图片压缩、WebP/AVIF、懒加载。Gzip/Brotli、CDN、preload/prefetch。第三方依赖单独分包。3. Hash 策略hash项目级。chunkhashChunk 级。contenthash文件内容级生产环境推荐。4. 打包内存溢出增加 Node 内存--max-old-space-size4096。合理分包、压缩资源、移除无用依赖。九、浏览器与网络1. 浏览器缓存强缓存200 from memory/disk cache。协商缓存304由 ETag/Last-Modified 控制。最佳实践HTML 设置 no-cache静态资源 contenthash 永久缓存。2. 跨域解决方案CORS生产环境首选。Proxy 代理开发环境首选。JSONP仅支持 GET兼容老旧浏览器。Nginx 反向代理、postMessage、WebSocket。3. OPTIONS 预检请求跨域 非简单请求非 GET/POST、自定义头、application/json。4. 全局错误捕获Vueapp.config.errorHandler。同步错误window.error。Promise 错误unhandledrejection。十、前端性能优化FCP / LCP1. 监测工具Lighthouse查看 FCP、LCP、CLS、FID 指标。Performance分析长任务、主线程阻塞、资源加载。2. 资源加载优化图片压缩、WebP、懒加载、响应式尺寸。JS路由懒加载、代码分割、压缩、拆分长任务。CSS内联关键 CSS、异步非关键 CSS、压缩。网络CDN、HTTP2/3、强缓存 协商缓存。3. 渲染优化减少 DOM 操作、避免布局抖动。动画使用 transform/opacity避免重排。Reactmemo/useMemo/useCallback。Vuev-once/v-memo。优先加载 LCP 元素使用 preload。4. 冷启动优化路由懒加载、首屏精简、分包加载。小程序主包 ≤2M分包按需加载。5. 增量更新 离线缓存增量更新contenthash仅更新变化资源。离线缓存Service Worker / PWA。6. WebWorker适用场景大量计算、数据解析、加解密、导出、复杂算法。特点不阻塞主线程不能操作 DOM。十一、CI/CD 自动化部署目标自动构建→校验→测试→部署降低人为失误。标准流程代码提交 → 安装依赖 → Lint → 单元测试 → Build → 自动部署。环境测试 → 预发 → 生产支持灰度。要点环境隔离、权限控制、敏感信息放环境变量、支持快速回滚。十二、地图可视化大屏Mapbox GL二维矢量 / 影像地图、热力图、轨迹。Cesium三维地球、地形、倾斜摄影、智慧城市大屏。十三、微信小程序审核发布流程本地调试 → 上传代码 → 提交审核 → 发布。审核重点类目匹配、权限合理、隐私合规、提供测试账号。体积规范主包 ≤2M分包按需加载。十四、CSS 核心flex:1 flex-grow:1; flex-shrink:1; flex-basis:0%。Grid 居中place-items: center。层叠上下文positionz-index、opacity1、transform 等。可继承属性文字、字体、颜色相关。十五、高并发架构百万级访问前端CDN、缓存、懒加载、分包、本地存储。后端负载均衡、Redis 缓存、分库分表、MQ 削峰、微服务。运维集群、监控、容灾、限流熔断。