前端开发
HTML · CSS · JavaScript · 框架 · 构建优化 · PWA 实战,从布局排版到工程选型的前端进阶指南。
动画性能与渲染优化实战
理解浏览器渲染管线,掌握合成器友好属性、rAF 与 FLIP 技术,让动效流畅不掉帧。
Web 无障碍实践:让产品对所有人可用
从语义化 HTML、ARIA 到键盘导航与焦点管理,把无障碍做进前端的每一个细节。
前端监控与错误上报实战:从捕获到告警
从 window.onerror、sourcemap 还原到性能与行为埋点,搭建可落地的前端监控体系。
CSS 工程化实战:变量、模块化与设计令牌
从 CSS 变量、BEM 命名到预处理器与设计令牌,构建可维护、可扩展的样式体系。
Vite 构建产物优化实战
从分包策略、代码分割到 gzip 压缩与缓存指纹,把首屏体积压到最小。
Service Worker 缓存策略实战
从注册生命周期、预缓存到运行时缓存,构建可离线、秒开、可控的现代 Web 应用。
WebSocket 实时通信实战
从 WebSocket 协议基础、浏览器客户端到 Node.js 服务端,讲清实时双向通信的完整实现。
前端安全:XSS 与 CSP 实战
从 XSS 攻击原理、防御手段到 CSP 内容安全策略,讲清前端安全的核心防护措施。
CSS 容器查询实战
从 container-type、@container 查询到响应式组件设计,讲清 CSS 容器查询如何让组件根据父容器尺寸自适应。
qiankun 微前端实战
从主应用配置、子应用注册到样式隔离与通信,讲清 qiankun 微前端框架的核心用法。
Vite 与模块联邦进阶实战
从 Vite 构建优化、HMR 原理到模块联邦跨应用共享代码,讲清前端构建工具的进阶用法。
前端组件测试实战:Vitest 与 Testing Library
从 Vitest 单元测试、组件测试到测试覆盖率,讲清前端组件测试的完整流程与最佳实践。
前端状态管理实战:Zustand 与 Pinia 对比
从状态管理的核心问题到 Zustand 与 Pinia 的实战对比,讲清前端状态管理库的选择与最佳实践。
Web Components 与 Shadow DOM 实战
从自定义元素、Shadow DOM 到组件封装与跨框架复用,讲清 Web Components 的核心概念与用法。
TypeScript 工程化进阶实战
从严格类型、泛型与工具类型到工程化配置,讲清 TypeScript 在大型项目中的进阶用法。
前端性能预算与构建优化实战
从性能预算设定、构建产物分析到分包压缩策略,建立一套可持续的性能管控流程。
CSS 布局进阶:Flex 与 Grid 实战
从主轴交叉轴到网格线,用弹性盒子与二维网格重构页面骨架,附一套可复用的布局自查清单。
JavaScript DOM 操作与事件机制
文档树、节点增删改与事件流三阶段,一次讲清绑定、冒泡与事件委托的正确姿势。
前端框架选型:Vue 与 React 对比实践
从模板与 JSX、状态管理到生态与性能,给出 Vue 与 React 的选型判断与落地路径。
响应式设计实战:一个页面适配所有屏幕
从媒体查询、流式布局到 clamp 与容器查询,用一套可落地的方法让页面同时在手机、平板和桌面站得住。
前端工程化实战:Vite 与构建产物优化
从 Vite 启动、配置到构建产物分包、压缩与缓存策略,把一个前端项目从开发到上线的工具链讲清楚。
CSS 动画与交互动效进阶:从 transition 到 keyframes
从 transition、animation 到 cubic-bezier 缓动与 keyframes,用实战例子讲清 CSS 动画与交互动效的核心用法与性能优化。
前端自动化测试实战:Vitest 与 Playwright
从 Vitest 单元测试到 Playwright 端到端测试,用实战例子讲清前端自动化测试的分层策略与工具链选型。
前端性能监控与体验优化实战
从 Web Vitals 核心指标到性能预算与优化手段,让你的前端页面快到用户感觉不到加载。
微前端架构实战:qiankun 与模块联邦
从微前端的核心概念到 qiankun 与模块联邦的实战落地,解决大型前端应用的拆分与协作问题。