posts

Posts

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

Web 资源加载深度优化:图片、字体、视频、缓存与 CDN

系统性 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)、关键渲染路径优化。

6 分钟阅读
performance optimization images
frontend

Web 性能指标全解析:Core Web Vitals 与真实用户监控(RUM)

系统性解读 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 接入。

5 分钟阅读
performance web-vitals core-web-vitals
frontend

TypeScript 工程化实战:从类型体操到架构安全

系统性 TypeScript 工程化指南:tsconfig 严格模式配置、高级类型体操(条件类型、映射类型、模板字面量、infer)、类型守卫与 Narrowing、泛型约束与协变逆变、类型安全边界(noUncheckedIndexedAccess、exactOptionalPropertyTypes)、monorepo 类型共享、API 类型自动同步(OpenAPI → TS)、品牌类型(Branded Types)与名义类型系统。附 Vue/React/Node.js 实战配置。

7 分钟阅读
typescript type-safety engineering