Blog README

The project's README from github.com/mqyqingfeng/Blog. As one markdown file: README.md.

冴羽的博客

关于冴羽

公众号

冴羽 冴羽 AI

知识星球：冴羽 · 前端开发者的破局之路

8 大专栏、10 年经验总结、100 篇深度长文、总计 70W 字的原创内容
几乎篇篇都是 6000 字以上的深度长文，加入即看
送你一张优惠券，最低价加入星球
不用纠结，星球三天无理由退款，没有帮助就退

最新活动（倒序）

  1. 从副业五位数到独立创业，本周五晚 8 点我们邀请了一人公司掌舵人流年为大家带来一场……
  2. 这个活动我们办了 4 年了!

我的思考

  1. 我一直想搞套自动化创作工作流，结果……

技术单篇

  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. 写给自学前端同学的编程法则
  28. 2026 年前端开发工程师应该学什么？
  29. 来自顶级大佬 TypeScript 之父的 7 个启示
  30. AI 时代前端开发不变的 3 个原则
  31. 资深前端都在用的 9 个调试偏方
  32. 前端开发者的迷茫，其实是认知跃迁的前夜
  33. 在浏览器控制台调试的 6 个秘密技巧
  34. 先收藏！3000 个网站设计案例供你参考！
  35. 等等，浏览器竟然有这功能？！10 个被低估的 Web API
  36. 请愿书：Node.js 核心代码不应该包含 AI 代码！
  37. 2026 年的 JavaScript 已经不是你认识的 JavaScript 了
  38. 最大的 React 性能杀手不就是你？
  39. 一个 70 行的文件，6 万 Star：Karpathy 的 AI 编程守则
  40. 写了 10 年代码，我才发现最该学的其实是…
  41. AI 需要学，你更需要学的 56 条软件工程定律
  42. 3 招让你的 Shadcn 出海应用性能提升 40 倍
  43. 超越Vibe Coding —— AI 辅助编程指南
  44. 快速夯实 JavaScrilpt 基础的 33 个概念

前端周报

  1. 前端周报：TypeScript 7.0 重写、Vercel 安全事件、第二次 API 开放浪潮
  2. 前端周报：Rolldown 1.0 正式发布、TanStack 遭遇史诗级供应链攻击、Bun 全面迁移至 Rust

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 零基础快速上手

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 中国大陆许可协议进行许可。

Blog (mqyqingfeng/Blog)

Searching Database…

31.1K ·GitHub
Blog
这是什么东西?这是开发者 mqyqingfeng(冴羽)的中文前端博客,以深入的 JavaScript 文章系列而闻名;始于 2017 年,最初规划了四个系列,后来内容早已远超原计划,目前已收获 31k+ star。
这是需要安装的软件,还是只是用来读的文章?纯阅读材料——就是一份按系列链接到 Markdown 文章的目录,没有任何需要安装、构建或运行的代码,而且全部内容都是中文写的。
主要有哪几个系列?我应该从哪里开始看?先从经典的《JavaScript 深入系列》(原型、闭包、this)入手,然后是《专题系列》(防抖、节流、深拷贝)和 20 篇的 ES6 系列;如果想更深,还有 15 篇的 React 源码阅读系列。
博客上的内容都是免费的吗?仓库里的文章是免费的,但这只是作者产出的一部分:Next.js、Svelte 和 Astro 的小册以及付费社区(100+ 篇长文)都是另外收费的产品。
这是给新手看的,还是给有经验的开发者看的?面向中高级前端开发者:这些深入讲解都默认你已掌握 JS 基础;另有一个专门的面试系列,提供面向校园招聘和社招的淘宝求职指南。
我可以转载或重新发布这些文章吗?可以,文章采用 CC BY-NC-SA 3.0 China 协议:署名后可自由分享和改编,但不得用于商业用途,且须以相同协议发布。
这个博客还在更新吗?还在更新——README 里在经典文章旁列出了 2025-2026 年的新作:前端趋势盘点、涵盖 TypeScript 7.0 和 Bun 的每周摘要、Vercel 的 React 性能分析文章,以及 Nano Banana Pro 提示词系列。
除了这个仓库,作者还发布过什么?TypeScript、Svelte 和 Solid.js 文档的中文翻译,三本付费小册(Next.js、Svelte 和 Astro 指南),两个微信公众号,以及一个付费社区——号称包含 8 个专栏、100+ 篇深度文章和 10 年经验。
它讲的是现代前端内容,还是只有老的 JS 基础?两者都有——除了 ES5 时代的深入讲解,还有关于 React 19 hooks、Next.js v14/v15 和 Server Actions 的文章,2026 年 JavaScript、CSS 和框架趋势,AI 辅助编程指南,以及现代 CSS 颜色和布局技巧。
这个仓库为什么这么火?它的《JavaScript 深入系列》在中文前端社区被广泛用作面试准备:既有一手依据规范的讲解,涵盖原型链、执行上下文和闭包,还有 call、bind 和 new 的手写实现。
What are similar projects?markyun, blog, react-redux-links, fe-interview, Awsome-Front-End-learning-resource, CS-Interview-Knowledge-Map, top-javascript-interview-questions, 33-js-concepts
Which topics is it in?advanced, astro, blog, es6, svelte, interview, curriculum, interview-preparation, nextjs, guide, learning-resources, learning
Creator
mqyqingfeng
Size
4.7 MB
Stars
31.1K
Updated
CommitJun 09
Age
9y
Commits · 90 Days