
# Performance API 实战:用 Navigation/Resource Timing 做前端性能监控(Web Vitals)我第一次正儿八经做前端性能监控,是被用户逼的。那会儿线上有个活动页,运营天天在群里 @ 我:"…

# Fetch + AbortController + Streams 实战:现代请求的中断与流式读取(进度/取消)去年做一个"大文件下载 + 进度条 + 取消按钮"的需求时,我拍着胸脯跟产品经理说"这个简单,fetch 一把梭就行"。…

# JavaScript Decorators 装饰器实战:用 @ 重构类与方法(TC39 Stage 3)去年我在给一个跑了三年的老项目做 TypeScript 迁移的时候,信心满满地往代码里怼了一堆 @log、@readonly、@…

# CSS Houdini 实战:用 Paint/Animation Worklet 突破原生 CSS 限制(自定义绘制)我至今记得三年前那个下午。产品甩过来一个需求:给后台的监控大盘做个"会呼吸的网格背景",要能跟着主题色换颜色、跟着…

# Web Share API 实战:调用浏览器原生分享面板(Web Share Target 接入)我以前做分享功能那叫一个狼狈。产品甩过来一句"要能分享到微信、微博、QQ、钉钉、邮件,还得有复制链接",我二话不说就哐哐哐堆了一排按钮…

# ResizeObserver 与 MutationObserver 实战:监听元素尺寸与 DOM 变化(告别轮询)我至今记得那个让我加班的周五下午。当时我在做一个数据看板,左边是一棵树形菜单,右边是一坨图表,需求很简单:窗口变大图表…

# PHP Generators 生成器实战:用 yield 处理百万级数据流(内存友好迭代)去年我接手一个老系统的"订单导出"功能,运营同学要导出过去一整年的订单做对账。我那时候图省事,直接写了一句 `SELECT * FROM or…

# PHP 8.1 Enums 枚举实战:用 backed enum 取代常量字典(方法/接口/Switch 重构)去年线上出了个特别蠢的 bug:订单状态莫名其妙变成了一个根本不存在的值,数据库里落了个 `"pendng"`(少个字母…

Web Components 实战:用原生 API 封装可复用自定义元素(Shadow DOM 与插槽全解析)
用原生 customElements 与 Shadow DOM、slot 从零封装可复用自定义元素,讲透样式隔离、内容分发与生命周期回调。

Canvas 2D 绘图入门:从画矩形到 requestAnimationFrame 动画
从 getContext 到 requestAnimationFrame,手把手讲透 Canvas 2D 绘图、状态管理与逐帧动画入门。

WebAssembly 入门:让前端也能跑接近原生的性能(instantiateStreaming 与线性内存)
从原理到实战讲透 WebAssembly:用 C/Rust 编译的 .wasm 在浏览器跑接近原生性能,详解 instantiateStreaming 与 instantiate 加载方式、线性内存 Memory 与 JavaScript 的数据交换,以及图像、加密、物理等适用场景。

CSS Grid 网格布局完全指南:从网格线到 auto-fit 响应式
CSS Grid 是二维网格布局系统,通过 grid-template 定义行列轨道、用网格线编号与 grid-area 命名区域定位,fr 分配剩余空间,repeat()+auto-fit+minmax() 实现零媒体查询的响应式自适应列。

PWA 离线应用实战:Service Worker 缓存策略与 manifest 配置
从零搭建可安装可离线的 PWA:详解 manifest.json 配置与 Service Worker 生命周期及 precache、stale-while-revalidate 缓存策略。

Intersection Observer API 实战:高性能滚动触发动画与懒加载
用懒加载、滚动揭示动画、无限滚动三个实战,讲清 IntersectionObserver 的配置项与回调在主线程、防抖等关键注意事项。

CSS 变量(Custom Properties)实战:一行 var() 搞定全局主题切换
CSS 变量(Custom Properties)用 :root 定义、var() 取值,支持级联覆盖与 calc() 联动,配合 [data-theme] 一行切换即可实现全局主题与暗黑模式,比预处理器变量更动态。

Three.js 零基础入门:四要素手搓一个会转的 3D 立方体
用场景、相机、渲染器、几何体加材质四要素手搓一个会转的 3D 立方体,零基础入门 Three.js 的世界。

前端无障碍(Accessibility)指南:ARIA、键盘导航与对比度那些事
前端无障碍以语义化 HTML 为地基,配合 ARIA、键盘导航、对比度与屏幕阅读器测试,让残障及各类受限情境下的用户都能顺畅使用网页。

Proxy 与 Reflect 元编程:从拦截器到 Vue3 响应式原理
一篇文章讲透 Proxy 的 13 个拦截陷阱与 Reflect 的正确转发姿势,并手撕迷你版 Vue3 响应式原理。

BroadcastChannel 实战:同源多标签页实时通信(登录态同步与状态广播)
# BroadcastChannel 实战:同源多标签页实时通信(登录态同步与状态广播)去年做后台管理系统的时候,我被一个 bug 折磨了整整一个下午。用户在 A 标签页点了退出登录,切到 B 标签页还能正常操作菜单,直到他点了某个按钮…

WebGPU 计算着色器实战:用 WGSL 在浏览器里跑并行计算(矩阵乘法与工作组)
# WebGPU 计算着色器实战:用 WGSL 在浏览器里跑并行计算(矩阵乘法与工作组)去年我做了个前端小工具,要把一堆图片做一次高斯模糊再加个色彩矩阵变换,数据量不大但算起来 CPU 直接原地去世——主线程卡成 PPT,风扇狂转,用户…
友情链接
- 1Web Components 实战:用原生 API 封装可复用自定义元素(Shadow DOM 与插槽全解析)47
- 2Canvas 2D 绘图入门:从画矩形到 requestAnimationFrame 动画45
- 3WebAssembly 入门:让前端也能跑接近原生的性能(instantiateStreaming 与线性内存)38
- 4CSS Grid 网格布局完全指南:从网格线到 auto-fit 响应式34
- 5PWA 离线应用实战:Service Worker 缓存策略与 manifest 配置34
- 6Intersection Observer API 实战:高性能滚动触发动画与懒加载34
- 7CSS 变量(Custom Properties)实战:一行 var() 搞定全局主题切换33
- 8Three.js 零基础入门:四要素手搓一个会转的 3D 立方体31
- 9前端无障碍(Accessibility)指南:ARIA、键盘导航与对比度那些事31
- 10Proxy 与 Reflect 元编程:从拦截器到 Vue3 响应式原理30
