posts
系统性 API 设计与 BFF（Backend for Frontend）实践：RESTful API 设计规范（HTTP 方法/状态码/资源命名/分页/版本控制）、HATEOAS、OpenAPI 规范与自动化（生成客户端/文档/Mock）、GraphQL 类型系统与查询优化（N+1/DataLoader/缓存）、tRPC 端到端类型安全、tRPC 路由与中间件、BFF 架构设计（职责边界/API 聚合/权限转发）、前后端协作模式（契约测试/API First/Mock Server）、API 版本化策略与平滑迁移、gRPC-Web 在浏览器场景的应用。附 Node.js/Go 实战。
系统性 WebAssembly 前端实战：WASM 核心概念与运行模型（VM/线性内存/Table/Module/Instance）、主流编译工具链对比（Rust+wasm-pack / Go+wasm / C++/Emscripten / AssemblyScript）、WASM 与 JavaScript 互操作（export/import/memory/Table）、性能基准对比（WASM vs JS vs native）、前端典型应用场景（图像处理/编解码/加密/物理引擎/数据可视化）、WASM 模块异步加载与流式编译、多线程 WASM（SharedArrayBuffer + Atomics）、WASI（WebAssembly System Interface）演进。附 Rust→WASM 完整实战。
系统性梳理现代浏览器原生 API 能力地图：Web Workers / Shared Workers 多线程计算、IndexedDB / Cache API / Storage API 客户端存储、Intersection Observer / Resize Observer / Mutation Observer 布局观测、Web Share / Web Share Target / Contact Picker 社交集成、Clipboard API / File System Access / Drag & Drop 数据交互、Web Bluetooth / Web NFC / Web Serial / Web HID / Web USB 硬件连接、Web Speech / Web Audio / MediaRecorder 多媒体、Payment Request / Credential Management 身份与支付、BroadcastChannel / Beacon / Reporting API 页面通信与报告。
系统性前端安全深度指南：XSS 全分类（Reflected/Stored/DOM-based/mXSS）与防御矩阵（转义/CSP/DOMPurify/Trusted Types）、CSP（Content Security Policy）策略设计与部署、SRI（Subresource Integrity）校验、CSRF Token 与 SameSite Cookie、前端加密与密钥管理、npm 供应链安全（package-lock/audit/SBOM/openSSF Scorecard）、原型污染防御、eval/new Function 沙箱替代方案、浏览器安全头全览。附 Vue/React/Next.js 安全配置。
系统性 Web 可访问性指南：WCAG 2.1/2.2 标准解读（感知性/可操作性/可理解性/健壮性四大原则）、语义化 HTML 与 ARIA 正确使用、键盘导航与焦点管理、屏幕阅读器兼容（NVDA/JAWS/VoiceOver）、色彩对比度与色觉障碍、减少动态内容（prefers-reduced-motion）、表单可访问性、可访问性测试工具（axe-Core/Lighthouse/pa11y）、法律合规（ADA/EN 301 549/中国无障碍环境建设法）。附 Vue/React 实战代码。
系统性 PWA 实战指南：Service Worker 注册与生命周期（install/activate/fetch）、缓存策略（Cache-First/Network-First/Stale-While-Revalidate/Cache-Only/Network-Only）、Workbox 自动化缓存、Background Sync、Push 通知、Web App Manifest、Add to Home Screen（A2HS）、Service Worker 更新机制与版本控制、PWA 与 SPA/SSR 结合。附 Vue/React/Next.js 完整配置。
系统性前端测试体系建设：测试金字塔分层（单元/集成/E2E）、Vitest/Jest 单元测试实战、Vue Test Utils / React Testing Library 组件测试、MSW（Mock Service Worker）API 模拟、Cypress / Playwright E2E 对比、组件文档与测试结合（Storybook Interaction Tests）、视觉回归测试（Chromatic / Percy）、性能基准测试（Lighthouse CI）、测试覆盖率门禁与 CI 集成、TDD/BDD 实践模式。
系统性微前端技术指南：微前端架构模式（Module Federation / iframe / Web Components / qiankun / single-spa）选型对比、Webpack Module Federation 原理与配置、Vite Module Federation（@originjs/vite-plugin-federation）实战、公共依赖共享与版本冲突解决、跨应用通信、路由整合、样式隔离、qiankun 沙箱与快速启动、微前端 DevOps 与独立部署。附完整架构决策树。
系统性对比前端状态管理方案：Flux/Redux（RTK）、Zustand、Jotai、Recoil、Valtio、Pinia、Vuex、TanStack Query / SWR（服务端状态）、Context API、URL State、Local Storage State。按状态类型分类（服务端/客户端全局/本地/UI），给出选型决策树、性能对比、跨框架方案与实战代码。覆盖 Vue3 + React 生态。
系统性 Web 资源加载优化策略：图片格式选型（AVIF/WebP/JPEG XL）、响应式图片（srcset/sizes/picture）、懒加载（loading='lazy' + Intersection Observer）、字体加载策略（font-display/preload/subset）、视频与 iframe 懒加载、HTTP 缓存策略（Cache-Control/ETag/Last-Modified）、Service Worker 缓存、CDN 边缘加速与缓存规则、资源压缩（Brotli/Gzip）、HTTP/2 Server Push 替代方案（103 Early Hints/Preload）、关键渲染路径优化。
系统性解读 Web 性能指标体系：Core Web Vitals（LCP、INP、CLS）的测量原理、优化阈值与实战方案；TTFB/FCP/FID/TBT 等辅助指标；真实用户监控（RUM）与实验室测试（Lighthouse）的结合；Web Vitals JS API、Chrome UX Report（CrUX）、PerformanceObserver、Resource Timing；Vue/React 性能监控 SDK 接入。
系统性 TypeScript 工程化指南：tsconfig 严格模式配置、高级类型体操（条件类型、映射类型、模板字面量、infer）、类型守卫与 Narrowing、泛型约束与协变逆变、类型安全边界（noUncheckedIndexedAccess、exactOptionalPropertyTypes）、monorepo 类型共享、API 类型自动同步（OpenAPI → TS）、品牌类型（Branded Types）与名义类型系统。附 Vue/React/Node.js 实战配置。
系统梳理现代 CSS 工程化方案：Tailwind CSS 原子化设计哲学与原理、JIT 编译器、主题定制与插件开发；CSS 设计令牌（Design Tokens）、PostCSS 插件链、CSS-in-JS 对比（Styled Components vs Linaria）、CSS Modules 与 Scoped CSS、CSS 架构方法论（BEM/ACSS/Utility-first）。附 Vue、React、Next.js 实战配置。
全面梳理企业级前端工程化体系：Monorepo 与 Polyrepo 选型、包管理策略（npm/yarn/pnpm/bun）、代码规范工具链（ESLint/Prettier/Husky/lint-staged）、Git 工作流（Git Flow/GitHub Flow/trunk-based）、标准化 CI/CD 流水线（GitHub Actions/GitLab CI）、Docker 化部署与环境管理。附 Vue/React 项目实战模板。