冴羽的博客

关于作者

• 博客：https://yayujs.com/
• 社群：“低调务实优秀中国好青年”前端社群
• 成长：社群茶话会、我的茶话会、微信读书
• 翻译：TypeScript 中文文档、Svelte 中文文档、Solid 中文文档
• 小册：《Next.js 开发指南》、《Svelte 开发指南》、《Astro 开发指南》
• 专栏：掘金、思否、语雀、公众号：冴羽（#yayujs）
• 星球：冴羽·前端大佬成长之路，用一年时间，十倍成长，一鸣惊人

公众号

作为准前端开发专家的你，第一时间获取前端资讯、技术干货、AI 课程，那不得关注下我的公众号「冴羽」？

最新单篇

1. 10 个被严重低估的 JS 特性，直接少写 500 行代码
2. JavaScript 异步循环踩坑指南
3. 为什么在 JavaScript 中 NaN !== NaN？背后藏着 40 年的技术故事
4. 从 useState 到 URLState：为什么大佬们都在删状态管理代码？
5. 涨见识了，Error.cause 让 JavaScript 错误调试更轻松
6. 前端性能革命：200 行 JavaScript 代码实现 Streaming JSON
7. 2025 年最火的前端项目出炉，No.1 易主！
8. CSS 新特性！瀑布流布局的终极解决方案
9. JavaScript Date 语法要过时了！以后用这个替代！]
10. 2026 年 Web 前端开发的 8 个趋势！
11. 2026 年前端必须掌握的 4 个 CSS 新特性！
12. 2025 年 HTML 年度调查报告公布！好多不知道！
13. 2025 年 HTML 年度调查报告亮点速览！
14. 现代 CSS 颜色使用指南
15. 现代 CSS 颜色使用指南进阶篇
16. 20 周年之际！jQuery 4.0 正式发布！轻装上阵
17. 2025 年 CSS 年度调查报告亮点速览
18. 回首 jQuery 20 年：从辉煌到没落
19. 微软发布了 2026 年 AI 发展的 7 个趋势
20. 1 分钟 CSS 小技巧让你的 UI 看起来贵 10 倍
21. Vercel 团队 10 年 React 性能优化经验：10 大核心策略让性能提升 300%
22. Flexbox水太深，你把持不住
23. 2026 年的 Node.js 已经不是那个你认识的 Node.js 了
24. 我没想到 CSS if 函数这么强
25. 2026 年 JavaScript 框架 3 大趋势
26. 100s 带你了解 Bun 为什么这么火
27. 写给自学前端同学的编程法则

Nano Banana Pro 系列

1. 6 个白嫖 Nano Banana Pro 的网站
2. 一次找齐！1000 个 Nano Banana Pro 提示词
3. Nano Banana Pro 很强，但你要学会写提示词才能为所欲为
4. 10 个 Nano Banana Pro 专业级生图技巧
5. 疯传的 Nano Banana Pro 像素级拆解提示词
6. 不知道怎么写 Nano Banana Pro 提示词？分享你一个结构化示例，复刻任意图片
7. 太好看了！3 个动漫变真人 Nano Banana Pro 提示词
8. Nano Banana Pro 零基础快速上手

前端工程师系统成长系列

2025 年，我在知识星球更新了一套名为“前端大佬成长之路”的课程。课程不再拘泥于技术，而是总结了我这 10 年来的工作生活经验，讲解技术人成长的方方面面，帮助你实现快速成长。

星球文章目录如下：

成长之路·服务指引

• 冴羽：新版·必看·服务指引
• 冴羽：如何有效学习课程和使用社群，实现真正的成长？
• 冴羽：社群资源分享（8T大小，持续更新中）

冴羽·认知升级篇·提升思考力（18）

• 冴羽：从影响一生的「战略」开始说起
• 冴羽：如何做出一个好的年度规划？
• 冴羽：如何修正自己的负面信念？
• 冴羽：快速成长的关键 —— 绿灯思维
• 冴羽：如何克服内心的焦虑？
• 冴羽：如何停止精神内耗？
• 冴羽：为什么道理我都懂，但依然过不好这一生？
• 冴羽：明明知道最应该做的事情是什么，但就是不去做，为什么？
• 冴羽：目标不重要，行为体系才重要
• 冴羽：克服拖延的 15 种方法
• 冴羽：你为什么没有行动起来？

冴羽·技术成长篇·提升技术力（22）

• 冴羽：如何系统学习前端？
• 冴羽：如何系统学习 Tailwind CSS？
• 冴羽：响应式设计指南
• 冴羽：理解全栈框架的 CSR、SSR、SSG、ISR、RSC、SPA、Streaming SSR 等概念
• 冴羽：手写 React SSR
• 冴羽：手写 React SSG 和 ISR
• 冴羽：手写 RSC 实现（上）
• 冴羽：手写 RSC 实现（中）
• 冴羽：手写 RSC 实现（下）
• 冴羽：手写 Streaming
• 冴羽：手写 Server Actions
• 冴羽：Svelte5 快速上手实战
• 冴羽：Signals 快速上手指南
• 冴羽：Prisma 快速上手指南
• 冴羽：设置网站图标的最佳实践
• 冴羽：Docker 快速上手指南
• 张渔歌：3 个月刷穿 900 道算法

冴羽·高效学习篇·提升学习力（17）

• 冴羽：如何读一本书？分享我的读书方法
• 冴羽：如何写出一条好的读书笔记？
• 冴羽：如何构建自己的笔记系统？（上）
• 冴羽：如何构建自己的笔记系统？（下）
• 冴羽：25 个常见笔记法一览（上）
• 冴羽：25 个常见笔记法一览（下）
• 冴羽：如何构建自己的知识管理系统？（上）
• 冴羽：如何构建自己的知识管理系统？（下）
• 冴羽：如何构建高质量的信息源？
• 冴羽：分享我的知识管理流程
• 冴羽：如何构建自己的知识体系？
• 冴羽：10 个学习相关的核心实验结论
• 冴羽：10 个学习相关的理论模型
• 冴羽：从生物学的角度谈如何高效学习
• 冴羽：费曼学习法为什么是世界公认的顶级学习法？
• 冴羽：如何大幅提升学习能力？
• 冴羽：如何学习更有计划性、提升更稳更快？

冴羽·习惯养成篇·提升行动力（13）

• 冴羽：改变人生的，不是大道理，而是小习惯
• 冴羽：习惯养成的方法论，其实养成好习惯很简单
• 冴羽：习惯养成的注意事项，别踩坑，浪费时间
• 冴羽：语言是有能量的，修正自己的语言习惯
• 冴羽：阅读，如何培养阅读习惯？
• 冴羽：记录，一定要大量地记录自己，频繁地记录
• 冴羽：复盘，变优秀最直接的方法
• 冴羽：冥想，为什么练习冥想很重要？
• 冴羽：冥想，如何练习冥想，从专注到开放
• 冴羽：这些顺手的微习惯，让生活不知不觉变好
• 冴羽：如何戒除坏习惯？
• 冴羽：我的习惯养成经历
• 冴羽：习惯养成篇总结

冴羽·职场工作篇·提升表达力（3）

• 冴羽：你累死累活做业务，绩效还不怎么样，我只能帮你到这了……
• 冴羽：如何面对他人的否定、打压、指责、批评？
• 冴羽：在职场如何做好“向上管理”？
• 冴羽：如何在工作中打造影响力，带动同事？
• 冴羽：怎么平衡工作与生活？

冴羽·前端面试篇·成为收割机（13）

• 冴羽：如何写出一份好的简历？
• 冴羽：面试前应该做哪些准备工作？
• 冴羽：如何漂亮地回答面试官的问题？
• 冴羽：面试中的开放类问题该如何回答？
• 冴羽：面试后如何复盘，让自己不断精进？
• 冴羽：分享一些前端面试技巧和心态
• 冴羽：分享一批前端面试资源，面试题目+指导教程+简历模板+真实简历
• 小燕子：裸辞半年，内心煎熬，终拿字节阿里 offer 的经历
• 柚子茶：如何轻松拿到大厂前端 offer
• 冴羽：前端，校招，面淘宝，指南
• 冴羽：前端，社招，面淘宝，指南
• 冴羽：Next.js 面试题及解析（一）
• 冴羽：Next.js 面试题及解析（二）

Astro 系列

第 3 本小册（21 篇）

1. 《Astro 实战指南》

Svelte 系列

翻译

1. 翻译并搭建了中文站点：Svelte 中文文档

第 2 本小册（44 篇）

1. 《Svelte 开发指南》

Solid.js 系列

翻译

1. 翻译并搭建了中文站点： Solid.js 中文文档

专栏

1. 《这个比 React 更 react 的框架 —— Solid.js 最新中文文档来了！》

Next.js 系列

第 1 本小册（82 篇）

1. 《Next.js 开发指南》

专栏

1. 理解 Next.js 的 CSR、SSR、SSG、ISR、RSC、SPA、Streaming SSR 等概念
2. Next.js 写 Server Actions 的利器 —— next-safe-action
3. Next.js Server Actions 如何进行错误处理？
4. Next.js 写什么 useState，放 URL 里！
5. 分享一个好用的 AI 聚合平台，快速接入国内外主流 AI 模型
6. Next.js 如何实现导航时的过渡动画？（使用 Framer Motion）
7. Next.js 如何处理表单？（TS + Tailwind CSS + Shadcn UI + RHF + Zod + useOptimistic）
8. Next.js 项目写 Tailwind CSS 基本都会遇到的两个问题
9. React 19 新 hook —— useActionState 与 Next.js Server Actions 绝佳搭配
10. Next.js 极简实现 Authentication
11. Next.js 实现下载 m3u8 视频
12. Next.js 项目接入 AI 的利器 —— Vercel AI SDK
13. Next.js v15 要来了，有哪些更新？附升级指南
14. Next.js v14 如何实现 SSE、接入 ChatGPT Stream?
15. Next.js App Router + Socket.IO 实现简易聊天室
16. Next.js 跨域问题的各种解法
17. Next.js 常见错误 Hydration Failed 该如何解决？
18. 使用 Next.js App Router 常犯的 10 个错误
19. Next.js v14 的 cookies()、header() 函数实现原理 —— AsyncLocalStorage
20. Next.js v14 报 document is not defined 这种错怎么办？基本都会遇到，深入解析，收藏备用
21. Next.js v14 如何为多个根布局自定义不同的 404 页面？竟然还有些麻烦！欢迎探讨
22. （技巧）当 Next.js 遇到频繁重复的数据库操作时，记住使用 React 的 cache 函数
23. Next.js v14 实现乐观更新，面向未来的 UI 更新方式，你可以不去做，但你不应该不了解
24. 如何用 Next.js v14 实现一个 Streaming 接口？
25. Next.js v14 的模板（template.js）到底有啥用？

React 系列

1. React 之元素与组件的区别
2. React 之 Refs 的使用和 forwardRef 的源码解读
3. React 之 Context 的变迁与背后实现
4. React 之 Race Condition
5. React 之 Suspense
6. React 之从视觉暂留到 FPS、刷新率再到显卡、垂直同步再到16ms的故事
7. React 之 requestAnimationFrame 执行机制探索
8. React 之 requestIdleCallback 来了解一下
9. React 之从 requestIdleCallback 到时间切片
10. React 之最小堆（min heap）
11. React 之如何调试源码
12. React 之 Scheduler 源码解读（上）
13. React 之 Scheduler 源码解读（下）
14. React 之 Scheduler 源码中的三个小知识点，看看你知不知道？
15. 300 行代码实现 React 的调度器 Scheduler

冴羽答读者问

1. 30 岁了， 现在开始努力，晚吗？
2. 何时能够像你一样优秀？
3. 怎么才能像你一样写文章如喝水？
4. 怎么才能像你一样长到180？
5. 冴羽哥哥 额爱你
6. 啦啦啦啦啦啦
7. 除代码外，就没别的优先级很高的爱好了吗？
8. 钱和成长，哪个更重要？
9. 悄悄过来蹭个回答
10. 怎么才能不焦虑？
11. 功利性学习的心态，你是否也会有？
12. 人生低谷时，如何快速调整、重回正轨？
13. 人生的意义是什么？
14. 你是怎么理解知行合一的？
15. 如何快速找到一个聊得来的人生伴侣？
16. 怎么平衡工作与生活？
17. 如果有机会，你会选择脱产学习深造吗？
18. 如何在工作中打造影响力，带动同事？
19. 如何学习更有计划性、提升更稳更快？
20. 过程比结果重要吗？
21. 冴羽，你为什么写起了鸡汤？

TypeScript 系列

翻译

1. 翻译并搭建了中文站点：TypeScript 中文文档

专栏

1. TypeScript之基础入门
2. TypeScript之常见类型（上）
3. TypeScript之常见类型（下）
4. TypeScript之类型收窄
5. TypeScript之函数
6. TypeScript之对象类型
7. TypeScript之泛型
8. TypeScript之Keyof 操作符
9. TypeScript之Typeof 操作符
10. TypeScript之索引访问类型
11. TypeScript之条件类型
12. TypeScript之映射类型
13. TypeScript之模板字面量类型
14. TypeScript之类（上）
15. TypeScript之类（下）
16. TypeScript之模块

博客搭建

1. 一篇带你用 VuePress + GitHub Pages 搭建博客
2. 一篇教你代码同步 GitHub 和 Gitee
3. 还不会用 GitHub Actions ？看看这篇
4. Gitee 如何自动部署 Pages？还是用 GitHub Actions!
5. 一份前端够用的 Linux 命令
6. 一份简单够用的 Nginx Location 配置讲解
7. 一篇教你博客如何部署到自己的服务器
8. 一篇域名从购买到备案到解析的详细教程
9. VuePress 博客优化之 last updated 最后更新时间如何设置
10. VuePress 博客优化之添加数据统计功能
11. VuePress 博客优化之开启 HTTPS
12. VuePress 博客优化之开启 Gzip 压缩
13. 从零实现一个 VuePress 插件
14. VuePress 博客优化之拓展 Markdown 语法
15. markdown-it 原理解析
16. markdown-it 插件如何写（一）
17. markdown-it 插件如何写（二）
18. markdown-it 插件如何写（三）
19. 有的时候我觉得我不会 Markdown
20. VuePress 博客优化之中文锚点跳转问题
21. 搭建 VuePress 博客，你可能会用到的一些插件
22. VuePress 博客如何开启本地 HTTPS 访问
23. VuePress 博客优化之兼容 PWA
24. VuePress 博客优化之开启 Algolia 全文搜索
25. VuePress 博客优化之增加 Valine 评论功能
26. VuePress 博客优化之增加 Vssue 评论功能
27. VuePress 博客之 SEO 优化（一）sitemap 与搜索引擎收录
28. VuePress 博客之 SEO 优化（二）重定向
29. VuePress 博客之 SEO 优化（三）标题、链接优化
30. VuePress 博客之 SEO 优化（四） Open Graph protocol
31. VuePress 博客之 SEO 优化（五）添加 JSON-LD 数据
32. VuePress 博客之 SEO 优化（六）站长工具
33. 搭建 VuePress 站点必做的 10 个优化
34. VuePress 博客搭建系列 33 篇正式完结！

一些单篇

1. 浏览器系列之 Cookie 和 SameSite 属性
2. 聊聊 npm 的语义化版本（Semver）

面试系列

1. 淘系前端校招负责人元彦直播答疑文字实录
2. 业务前端的困境
3. 前端，社招，面淘宝，指南
4. 前端，校招，面淘宝，指南

深入系列

1. JavaScript深入之从原型到原型链
2. JavaScript深入之词法作用域和动态作用域
3. JavaScript深入之执行上下文栈
4. JavaScript深入之变量对象
5. JavaScript深入之作用域链
6. JavaScript深入之从ECMAScript规范解读this
7. JavaScript深入之执行上下文
8. JavaScript深入之闭包
9. JavaScript深入之参数按值传递
10. JavaScript深入之call和apply的模拟实现
11. JavaScript深入之bind的模拟实现
12. JavaScript深入之new的模拟实现
13. JavaScript深入之类数组对象与arguments
14. JavaScript深入之创建对象的多种方式以及优缺点
15. JavaScript深入之继承的多种方式以及优缺点
16. JavaScript深入系列15篇正式完结！
17. JavaScript深入之浮点数精度
18. JavaScript深入之头疼的类型转换(上)
19. JavaScript深入之头疼的类型转换(下)

专题系列

1. JavaScript专题之跟着underscore学防抖
2. JavaScript专题之跟着underscore学节流
3. JavaScript专题之数组去重
4. JavaScript专题之类型判断(上)
5. JavaScript专题之类型判断(下)
6. JavaScript专题之深浅拷贝
7. JavaScript专题之从零实现jQuery的extend
8. JavaScript专题之如何求数组的最大值和最小值
9. JavaScript专题之数组扁平化
10. JavaScript专题之学underscore在数组中查找指定元素
11. JavaScript专题之jQuery通用遍历方法each的实现
12. JavaScript专题之如何判断两个对象相等
13. JavaScript专题之函数柯里化
14. JavaScript专题之偏函数
15. JavaScript专题之惰性函数
16. JavaScript专题之函数组合
17. JavaScript专题之函数记忆
18. JavaScript专题之递归
19. JavaScript专题之乱序
20. JavaScript专题之解读 v8 排序源码
21. JavaScript专题系列20篇正式完结！
22. JavaScript专题之花式表示26个字母

underscore 系列

1. underscore 系列之如何写自己的 underscore
2. underscore 系列之链式调用
3. underscore 系列之内部函数 cb 和 optimizeCb
4. underscore 系列之内部函数 restArgs
5. underscore 系列之防冲突与 Utility Functions
6. underscore 系列之实现一个模板引擎(上)
7. underscore 系列之实现一个模板引擎(下)
8. underscore 系列之字符实体与 _.escape
9. underscore 的源码该如何阅读？

ES6 系列

1. ES6 系列之 let 和 const
2. ES6 系列之模板字符串
3. ES6 系列之箭头函数
4. ES6 系列之模拟实现 Symbol 类型
5. ES6 系列之迭代器与 for of
6. ES6 系列之模拟实现一个 Set 数据结构
7. ES6 系列之 WeakMap
8. ES6 系列之我们来聊聊 Promise
9. ES6 系列之 Generator 的自动执行
10. ES6 系列之我们来聊聊 Async
11. ES6 系列之异步处理实战
12. ES6 系列之 Babel 将 Generator 编译成了什么样子
13. ES6 系列之 Babel 将 Async 编译成了什么样子
14. ES6 系列之 Babel 是如何编译 Class 的(上)
15. ES6 系列之 Babel 是如何编译 Class 的(下)
16. ES6 系列之 defineProperty 与 proxy
17. ES6 系列之模块加载方案
18. ES6 系列之我们来聊聊装饰器
19. ES6 系列之私有变量的实现
20. ES6 完全使用手册

勘误及提问

如果有疑问或者发现错误，可以在相应的 issues 进行提问或勘误。

如果喜欢或者有所启发，欢迎 star，对作者也是一种鼓励。

License

所有文章采用知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆许可协议进行许可。