标签

#前端

共 14 篇文章

CSS

前端

技术

CSS 容器查询实战：从媒体查询到组件级响应式

媒体查询基于视口，容器查询基于父容器。本文从 @container 语法讲到 polyfill 兼容方案，再给出 6 个真实组件的容器查询改造案例。

Next.js 15 App Router 实战：从 RSC 到 Route Handlers

Next.js 15 把 params / searchParams 都变成了 Promise。本文讲 App Router 的 6 层缓存、generateStaticParams 与 ISR、Route Handlers 的 streaming，再到 10 个迁移踩坑点。

React Native 新架构实战：Fabric 与 TurboModules

RN 新架构（Fabric + TurboModules + JSI）相比旧架构性能提升 3-5 倍。本文讲 JSI 直调 C++、Fabric 同步渲染、Codegen 类型生成，再到 5 个迁移踩坑点。

React Server Components 实战与踩坑：从 RSC payload 到流式渲染

React Server Components 不是 SSR。本文从 RSC wire protocol 讲到 use client 边界划分，再列出 8 个生产环境踩过的坑，帮你避开 RSC 落地的所有暗礁。

Tailwind CSS v4 迁移实战：从 config 到 CSS-first

Tailwind v4 把配置从 JS 搬到 CSS。本文讲 @theme 令牌、@plugin、@custom-variant、@apply 的语义变化，再到 6 个真实迁移踩坑点。

TypeScript 5.x 装饰器实战：从元数据到依赖注入

TS 5.0 标准化装饰器，与旧 reflect-metadata 方案完全不同。本文讲新装饰器 API、metadata 提案、手写一个 IoC 容器，再到 NestJS 风格的路由装饰器实现。

Vite 6 冷启动优化：从依赖预构建到插件缓存

大型项目 Vite 冷启动 40s → 3s 的真实优化过程。讲依赖预构建、按需 optimizeDeps、插件 cacheDir、worker 池调优，以及 8 个常见冷启动慢的根因。

Web Worker 实战：OffscreenCanvas 与 SharedArrayBuffer

主线程长任务 800ms → 12ms。本文讲 Worker 的 6 种创建方式、Transferable 对象、OffscreenCanvas 渲染、SharedArrayBuffer 多线程共享内存，再到 Comlink RPC 封装。

Web 性能监控实战：从 PerformanceObserver 到 LCP 归因

LCP 1.2s 到 3.8s 的真实排查过程。本文讲 PerformanceObserver API、Web Vitals 指标体系、LCP 元素归因、CLS 预测布局偏移，再到 RUM 上报方案。

Zustand 与 Jotai 实战：React 状态管理选型

Redux 时代结束了。本文讲 Zustand 的 store 模型、Jotai 的原子模型，再到 8 个真实场景下的选型决策树。

浏览器原生 API 实战：View Transitions 与 Container Queries

不用框架、不用 GSAP，浏览器原生就能做流畅过渡动画。本文讲 View Transitions API、scroll-driven animations、popover API，再到 5 个渐进增强实战。

Vue 3.5 响应式系统实战：从 ref 到 shallowReactive

Vue 3.5 的响应式系统经过多次重构，本文从 ref/reactive/computed 的底层实现讲到 effect 依赖追踪，再到 6 个生产环境踩坑点。

Vue 编译器优化实战：从静态提升到 PatchFlag

Vue 编译器在编译期做了大量优化。本文讲静态提升、PatchFlag、Block Tree、缓存事件处理器，再到 5 个真实性能优化案例。

Vue 3 状态管理实战：Pinia 与组合式 API 的选型

Vue 3 时代 Pinia 取代了 Vuex。本文讲 Pinia 的 store 模型、组合式 store、跨 store 依赖，再到与 provide/inject、useState 模式的选型决策。

2026年7月9日·16 分钟阅读