posts

Posts

全部文章 Game Golang SaaS Rust 游戏开发 客户端开发 GameDev Lua 写作 小说
frontend

现代浏览器 API 与 Web 平台能力地图

系统性梳理现代浏览器原生 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 页面通信与报告。

6 分钟阅读
browser-apis web-platform javascript
frontend

前端安全进阶:XSS、CSP、SRI 与供应链安全

系统性前端安全深度指南: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 安全配置。

4 分钟阅读
security xss csp
frontend

Web 可访问性(a11y):合规标准、技术实现与用户体验

系统性 Web 可访问性指南:WCAG 2.1/2.2 标准解读(感知性/可操作性/可理解性/健壮性四大原则)、语义化 HTML 与 ARIA 正确使用、键盘导航与焦点管理、屏幕阅读器兼容(NVDA/JAWS/VoiceOver)、色彩对比度与色觉障碍、减少动态内容(prefers-reduced-motion)、表单可访问性、可访问性测试工具(axe-Core/Lighthouse/pa11y)、法律合规(ADA/EN 301 549/中国无障碍环境建设法)。附 Vue/React 实战代码。

9 分钟阅读
a11y accessibility wcag
frontend

PWA 与 Service Worker:离线化、缓存策略与服务扩展

系统性 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 完整配置。

7 分钟阅读
pwa service-worker workbox
frontend

前端测试策略:单元、E2E、视觉回归与验收测试

系统性前端测试体系建设:测试金字塔分层(单元/集成/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 实践模式。

6 分钟阅读
testing vitest cypress
frontend

微前端与模块联邦:架构设计与落地实战

系统性微前端技术指南:微前端架构模式(Module Federation / iframe / Web Components / qiankun / single-spa)选型对比、Webpack Module Federation 原理与配置、Vite Module Federation(@originjs/vite-plugin-federation)实战、公共依赖共享与版本冲突解决、跨应用通信、路由整合、样式隔离、qiankun 沙箱与快速启动、微前端 DevOps 与独立部署。附完整架构决策树。

6 分钟阅读
micro-frontend architecture module-federation