本文是作者的 Web 前端阅读资源汇总,根据个人阅读的认可度给出以下标签分类:
- 可选:文章内容不具备普适性,阅读该文或许可以扩展知识面
- 推荐:文章内容具有普适性,但不一定具备实用性,阅读该文或许可以获得必要的知识面提升
- 必读:文章内容具备普适性,且具备实用性,阅读该文或许可以获得必要的技能提升
- 进阶:文章内容具备一定深度,阅读该文需要扎实的基础知识
温馨提示:文中列出的标签不一定精准,例如作者文章给出的标签有 BUFF 加成~
概览
整理收藏夹其实也是自我总结的一个过程,这里更新 2019 前端年度总结 之后的技术结构图:

温馨提示:图片较大,加载可能比较缓慢。
作者文章
- 进阶V8 编译浅谈
- 必读在阿里我是如何当面试官的
- 必读前端面试知识点(一)
- 必读前端面试知识点(二)
- 推荐2019 前端年度总结
- 可选桌面端混合开发总结
- 可选技术文章的写作技巧分享
面试
- 必读在阿里我是如何当面试官的
- 必读前端面试知识点(一)
- 必读前端面试知识点(二)
- 必读前端进阶之道 [电子书]
- 可选中高级前端开发高频面试题
- 可选阿里前端社招面试总结
- 可选前端内参
- 可选阿里前端社招面试总结
Awesome
- 推荐awesome-vue
- 推荐awesome-css
- 可选awesome
- 可选awesome-awesome
- 可选Front-End-Develop-Guide (前端开发所使用语言的主流学习资源)
- 可选knowledge (前端技术架构图谱)
- 可选awesome-javascript-cn (JavaScript 资源大全中文版)
- 可选awesome-wechat-weapp - 微信小程序开发资源汇总
- 可选awesome-github-wechat-weapp (微信小程序开源项目库汇总)
- 可选awesome-nuxt
- 可选awesome-mac
- 可选awesome-gulp
- 可选awesome-npm
- 可选Font Awesome
- 可选awesome-resume (程序员简历例句)
- 可选awesome-webpack-cn (webpack 优秀中文文章)
- 可选awesome-architecture (架构师技术图谱)
- 可选awesome-books (开发者推荐阅读的书籍)
- 可选awesome-programming-books (经典技术书籍推荐)
- 推荐NodeJS 开发工具栈(开发工具箱)
TypeScript
- 推荐TypeScript [文档]
- 推荐深入理解 TypeScript [电子书]
- 推荐TypeScript Deep Dive [电子书]
- 可选TypeScript 入门教程 [电子书]
- 可选TypeScript- this入参
JavaScript
- 必读ECMAScript 6 入门 [电子书]
- 必读Tasks, microtasks, queues and schedules(宏任务、微任务、队列)
- 推荐lodash [文档] (A modern JavaScript utility library delivering modularity, performance & extras)
- 可选JavaScript与有限状态机 (阮一峰)
- 可选ECMAScript 规范的中文翻译 [文档]
- 可选前端基础漫游指南 [电子书]
- 可选前端工程师手册 [电子书]
- 可选JS内存模型
- 可选codemirror [库]
- 可选debug [库]
- 可选perfect-scrollbar [库]
- 可选superagent [库]
- 可选jQuery [文档]
- 可选zTree [库]( jQuery Tree Plugin)
- 可选InversifyJS 中文文档 [文档]
- 可选RxJS 中文 [文档]
- 可选RxJS [文档]
- 可选Redux-observable [文档]
- 可选Redux-observable 中文 [文档]
- 可选学习 RxJS [电子书]
- 可选moroshko/rxviz: Rx Visualizer - Animated playground for Rx Observables (Rx 可视化工具)
- 可选RxViz - Animated playground for Rx Observables (Rx 可视化工具)
- 可选jaredly/rxvision: visualizer debugger for reactive streams (Rx 可视化工具)
- 可选staltz/rxmarbles: Interactive diagrams of Rx Observables (图解 Rx)
- 可选RxMarbles: Interactive diagrams of Rx Observables (图解 Rx)
- 可选RxJS in Action [书]
- 可选RxJS v6 学习指南
- 可选RxJS 学习中文资料
- 可选从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理 (全面了解JS单线程)
- 可选如何实现一个深拷贝
HTML
- 可选浏览器沙盒是什么
- 可选浏览器沙箱模型
- 可选Web Components 入门实例教程 (阮一峰)
- 可选你真的了解回流和重绘吗
CSS
- 推荐BEM [文档](Class命名规范)
- 推荐CSS [文档](MDN web docs)
- 推荐Flex 布局教程 (阮一峰)
- 推荐Less 中文网 [文档]
- 推荐Sass [文档]
- 推荐PostCSS [文档]
- 可选SASS用法指南 (阮一峰)
- 可选CSS in JS 简介 (阮一峰)
- 可选FLEXBOX FROGGY (学 Flex 的小游戏)
- 可选CSSOM视图模式(CSSOM View Module)相关整理 (张鑫旭)
- 可选CSS相对定位|绝对定位(五)之z-index篇 (张鑫旭)
- 可选获取元素CSS值之getComputedStyle方法熟悉 - 张鑫旭
- 可选我对CSS vertical-align的一些理解与认识 - 张鑫旭
- 可选我所知道的几种display:table-cell的应用 (张鑫旭)
- 可选等高分栏布局小结
- 可选CSS定位属性详解
- 可选真正了解CSS3背景下的@font face规则 (张鑫旭)
React
- 推荐React [文档]
- 推荐Create React App 中文文档 [文档]
- 推荐React Router [文档]
- 推荐Redux [文档]
- 推荐Redux Toolkit [文档]
- 推荐React Lifecycle
- 可选React源码解析 [电子书]
- 可选Redux Toolkit [文档]
- 可选reduxjs/cra-template-redux: The official Redux+JS template for Create React App [库]
- 可选redux-toolkit-example-ts (示例代码)
- 可选Redux 入门教程(一):基本用法 (阮一峰)
- 可选Redux 入门教程(二):中间件与异步操作 (阮一峰)
- 可选Redux 入门教程(三):React-Redux 的用法 (阮一峰)
- 可选React路由鉴权
Vue
- 推荐Vue.js 3 中文 [文档]
- 推荐Vuex [文档]
- 推荐Vue Router [文档]
- 推荐Vue CLI [文档]
- 推荐Vue Loader [文档]
- 推荐Vue.js [文档]
- 推荐Vue 插件开发指南 [文档]
- 推荐eslint-plugin-vue [文档]
- 推荐VuePress [文档] (Vue 驱动的静态网站生成器)
- 可选剖析 Vue.js 内部运行机制 [电子书]
- 可选DMQ/MVVM (剖析Vue实现原理,如何实现双向绑定mvvm)
- 可选Vue.js 技术揭秘 [电子书]
- 可选Vue SSR 指南 [文档]
- 可选Nuxt [文档] (Vue.js 服务端渲染)
- 可选Vue Apollo [文档] (在 Vue.js 应用中集成 GraphQL)
- 可选Vue I18n [文档] (国际化插件)
- 可选Vue Test Utils [文档] (Vue.js 官方的单元测试实用工具库)
- 可选vue-cli-plugin-i18n [库]
- 可选nuxt-property-decorator [库]
- 可选vue + typescript 新项目起手式 (Vue 2.x 版本)
- 可选vue + typescript 进阶篇 (Vue 2.x 版本)
- 可选美团点评点餐 Nuxt.js 实战 (Vue 2.x 版本)
- 可选浅谈使用 Vue 构建前端 10w+ 代码量的单页面应用开发底层 (Vue 2.x 版本)
- 可选Vue2.0 探索之路——生命周期和钩子函数的一些理解 (Vue 2.x 版本)
- 可选vue-cli3 项目从搭建优化到docker部署 (Vue 2.x 版本)
- 可选离职后才搞懂vue项目开发流程中的疑惑点 (Vue 2.x 版本)
- 可选Vuex 带来全新的编程体验 (Vue 2.x 版本)
- 可选vue-cli3 从搭建到优化 (Vue 2.x 版本)
- 可选少年,撸猫吗 (Vue 2.x 版本)
- 可选结合vue-cli来谈webpack打包优化 (Vue 2.x 版本)
HTTP
- 可选计算机通识 [电子书]
- 可选跨域资源共享 CORS 详解 (阮一峰)
- 可选浏览器缓存知识小结及应用
- 可选Cookie
- 可选前端跨域整理
Git
- 推荐Git教程 (廖雪峰)
- 推荐commit_msg (git 钩子文档)
- 推荐语义化版本 2.0.0 (语义化版本控制规范)
- 可选Git 分支 - 变基
- 可选cz-cli (cz工具)
- 可选cz-customizable (cz适配器)
- 可选@commitlint/config-conventional (cz适配器)
- 可选commitlint (cz校验工具)
- 可选commitlint-config-cz (cz校验工具的校验规则)
- 可选validate-commit-msg (cz校验工具)
- 可选conventional-changelog (cz日志生成器)
- 可选如何使用 Issue 管理软件项目?(阮一峰)
- 可选Git 工作流程 (阮一峰)
Node.js
- 推荐Node.js [文档]
- 推荐ts-node [库]
- 推荐NodeJS 开发工具栈 [Awesome](开发工具箱)
- 推荐awesome-nodejs [Awesome]
- 可选mongoose [文档]
- 可选mongoose 中文 [文档]
- 可选ORM 实例教程
- 可选TypeORM [库]
- 可选TypeORM 中文 [文档]
- 可选linkerd2 [文档]
- 可选Express [文档]
- 可选Koa [文档]
- 可选Egg [文档]
- 可选Socket.io [文档]
- 可选Node Redis [文档]
- 可选Midway [文档]
- 可选GraphQL [文档]
- 可选Prisma OSS Documentation [文档]
- 可选Apollo Client [文档]
- 可选node-inspector [库](Node.js debugger based on Blink Developer Tools)
- 可选execa [库]
- 可选parse-json [库]
- 可选gitbeaker [库]
- 可选node-fetch [库]
- 可选node-inspector [库]
- 可选Forcing Garbage Collection in node.js and JavaScript (强制垃圾回收)
- 可选Open Sourcing GraphQL Middleware - A Library to Simplify Your Resolvers
- 可选手把手教你做爬虫
- 可选关于爬虫,就此封键盘
CI/CD
- 推荐大公司里怎样开发和部署前端代码?(张云龙)
- 可选GitHub Actions [文档]
- 可选GitHub Actions 入门教程(阮一峰)
- 可选pm2 (The Most Advanced Production Process Manager for Node.js)
- 可选Jenkins
- 可选nginx [文档]
- 可选Nginx开发从入门到精通 [电子书]
Font
- 可选Font Awesome
- 可选Font Awesome
- 可选Free Icons
- 可选[译] 深入浅出 SVG
测试
- 推荐Jest [文档]
- 推荐JavaScript 程序测试 (阮一峰)
- 可选Nightwatch.js [文档]
- 可选Mocha [文档]
- 可选Chai [文档]
- 可选Karma [文档]
- 可选awesome-jest [Awesome]
- 可选前端测试框架 Jest
- 可选测试框架 Mocha 实例教程 (阮一峰)
Chrome DevTools
- 推荐Chrome DevTools Protocol [文档]
- 推荐Chrome DevTools Frontend 运行原理浅析 [电子书]
- 可选Chrome DevTools 中文手册 [电子书]
- 可选Chrome 开发工具指南 [电子书]
- 可选chii(远程调试工具)
- 可选devtool
- 可选devtools-protocol [库]
- 可选chrome-remote-interface [库]
- 可选awesome-chrome-devtools [Awesome]
- 可选devtools-frontend [库]
- 可选揭秘浏览器远程调试技术
Service Worker
扩展
- 推荐什么是微内核架构设计?
- 推荐插件开发指南 | Vue CLI [文档]
- 可选Chrome Extension 官方 [文档]
- 可选How to build a plugin system on the web and also sleep well at night
组件库
- 推荐Ant Design [文档]
- 推荐Element Plus [文档](基于 Vue 3,面向设计师和开发者的组件库)
- 推荐Element [文档] (基于Vue2.0的饿了么桌面端组件库)
- 推荐Ant Design Vue [文档]
- 推荐Ant Design Pro [文档] (开箱即用的中台前端/设计解决方案)
- 推荐Antd ProComponents [文档]
- 可选Salt UI [文档] (高效、简洁的移动端UI组件库)
- 可选Ant Design Mobile 5.0 [文档]
- 可选ant-design-pro-vue [文档] (开箱即用的中台前端/设计解决方案)
- 可选vue-antd-admin [库] (一个开箱即用的中后台前端/设计解决方案)
- 可选Fusion [文档]
- 可选Muse-UI [文档] (基于 Vue 2.0 优雅的 Material Design UI 组件库)
- 可选Vue Material [文档]
- 可选Bootstrap [文档]
- 可选Bootstrap Table [文档]
- 可选Bulma [文档]
性能优化
工程化
- 推荐Git 中文 [文档]
- 推荐Webpack 中文 [文档]
- 推荐Gulp 中文 [文档]
- 推荐npm 中文 [文档]
- 推荐yarn 中文 [文档]
- 推荐Lerna 中文 [文档]
- 推荐Lerna 文档 [电子书]
- 推荐Babel [文档]
- 推荐飞冰 - 基于 React 的研发解决方案 [文档]
- 推荐ESLint (可组装的 JavaScript 和 JSX 检查工具)
- 推荐Prettier (An opinionated code formatter)
- 可选深入浅出Webpack [电子书]
- 可选webpack-chain [库] (生成和修改 Webpack 配置信息的链式API集)
- 可选CKEditor 4 (Smart WYSIWYG HTML editor)
- 可选75 Best Node.js Command Line Apps & Utilities | FireBear [Awesome]
- 可选Webpack 入门指迷
- 可选Webpack 大法之 Code Splitting (缩小打包体积)
- 可选前端构建秘籍
- 可选webpack4入门
- 可选@vue/babel-preset-app (Vue CLI3 的Babel插件集)
- 可选@babel/preset-env (Babel插件集)
- 可选你真的会用Babel吗? (全面了解Babel)
- 可选Node.js 命令行程序开发教程 (阮一峰)
- 可选Vue ClI 源码探索 | Vue Learn Share [电子书]
- 可选rollup.js 中文 [文档]
- 可选gulp-typescript [库]
- 可选热重载原理研究和探索
- 可选Why you should use a single repository for all your company’s projects (多项目单仓库思考)
- 可选Open Sourcing CloudFlare’s UI Framework (使用 Lerna 开源的 UI 框架设计)
- 可选monorepo 新浪潮 | introduce lerna (Lerna 介绍)
监控 & 稳定性
- 可选把前端监控做到极致
- 可选有赞前端质量保障体系
客户端
- 推荐Flutter中文网
- 可选Flutter实战 [电子书]
- 可选flutter凉了吗?
- 可选JSBridge实战
- 可选H5 键盘兼容性小结
- 可选移动端布局适配
微前端
- 推荐微前端的核心价值
- 推荐qiankun [文档]
- 推荐single-spa [文档]
- 可选探索微前端的场景极限
- 可选微前端入门
- 可选了解什么是微前端
- 可选[译] 微前端
小程序
- 可选Minifish
Rust
可视化
- 可选OpenLayers [文档]
- 可选OpenLayers 3 Primer [电子书] (OpenLayers 3使用的入门教程)
低代码
风格指南
编程指南
- 必读函数式编程指北 [电子书]
- 可选函数式编程初探 (阮一峰)
- 可选函数式编程入门教程 (阮一峰)
- 可选Pointfree 编程风格指南 (阮一峰)
- 可选函数式编程,真香
- 可选Java SPI机制详解
- 可选InversifyJS [文档]
- 可选reflect-metadata [库]
- 可选Reflect
- 可选主要的编程范例
- 可选Programming paradigms for dummies: what every programmer should know | the morning paper
- 可选面向接口编程详解(一)
- 可选响应式编程的实践
- 可选什么是响应式编程?
- 可选响应式编程到底是什么?
- 可选响应式编程总览
解决方案
- 推荐漫画:什么是中台?
- 推荐IaaS,PaaS,SaaS 的区别 (阮一峰)
- 可选MicroSoft Power Platform (低代码)
- 可选DDD 模式从天书到实践
- 可选微服务架构入门
- 可选微服务简介
- 可选大前端架构思考与选择
编译器相关
- 推荐ANTLR 4简明教程 [电子书]
- 可选ANTLR [文档]
- 可选MiniDecaf 编译实验 [电子书]
- 可选antlr4 [库]
- 可选grammars-v4 [库]
- 可选antlr4ts [库]
- 可选riscv-pk [库]
- 可选minidecaf [库]
- 可选homebrew-riscv [库]
- 可选Antlr4 简介
- 可选antlr4-demo
- 可选Antlr4简明使用教程
- 可选Antlr4简易快速入门
工具
- 推荐Google翻译 (Chrome 插件)
- 推荐Vue.js devtools (Chrome 插件)
- 可选Homebrew [文档]
- 可选sindresorhus/emoj: Find relevant emoji from text on the command-line [库]
- 可选uTools
- 可选WoX
- 可选Alfred
- 可选O'RLY Cover Generator(书籍封面生成器)
- 可选Octotree (Chrome 插件)
- 可选马克飞象 (Chrome 插件)
- 可选Can I use (查询浏览器兼容性)
- 可选ESLint (VS Code 插件)
- 可选Prettier (VS Code 插件)
- 可选Vuetur (VS Code 插件)
- 可选函数图像绘制工具
- 可选Desmos
- 可选coolors (颜色搭配设计)
- 可选ohmyzsh
- 可选iterm2
- 可选dash
- 可选Worktile - 团队协作
- 可选图表秀
- 可选简明 VIM 练级攻略
算法
- 可选《算法导论》答案 [电子书]
- 可选目錄:演算法與資料結構 [电子书]
- 可选javascript-algorithms [库]
- 可选CLRS [库]
小技能
- 推荐CMD 命令速查手册
- 可选Mac 上“磁盘工具”中可用的文件系统格式(是否区分文件名大小写)
- 可选理解 CRLF,LF
- 可选UML系列
总结
- 推荐2021 JavaScript Rising Stars(包含 2016 年 ~ 2021 年的 Github 明星项目)
- 可选有赞开源项目最佳实践
- 可选滴滴后市场前端技术体系
- 可选前端技术全景展望
- 可选前端技术体系大局观
- 可选精读《前端未来展望》
V8 引擎
编译原理
- 推荐V8: 连接 Ignition 与 Turbofan [PPT]
- 推荐Ignition: 快速启动的 V8 解释器 [PPT]
- 推荐Ignition: V8 解释器 [PPT]
- 推荐V8 中的反优化
- 推荐Launching Ignition and TurboFan(全面使用 Ignition + TurboFan 以及带来的优势说明)
- 可选TurboFan 的故事
- 可选TurboFan IR
- 可选动态语言的快速算法
- 可选代码缓存
- 可选惰性优化的实习经历 [PPT]
- 可选后台编译(多线程编译提升编译速度)
- 可选改进代码缓存
- 可选JIT-less V8
- 可选Blazingly fast parsing, part 1: optimizing the scanner(扫描器性能优化)
- 可选Blazingly fast parsing, part 2: lazy parsing(预解析性能优化)
垃圾回收
- 可选免费获取垃圾回收
- 可选Jank 克星第一部分(如何提升垃圾回收机制的性能)
- 可选V8 的并发标记
性能优化
- 必读V8 中的快属性
- 可选V8 extras(创建 V8 内置 JavaScript API)
- 可选优化 V8 内存消耗
- 可选Optimizing hash tables: hiding the hash code(哈希表中的索引存储优化)
- 可选Lazy deserialization(惰性内置和反序列化)
- 可选从 JS 追踪到 DOM 并返回 (调试内存泄漏的小技巧)
- 可选Chrome 的一小步,V8 的一大堆(内存泄漏相关)
- 可选Embedded builtins(减少内置 API 的运行内存)
- 可选Getting things sorted in V8(V8 中排序算法的性能优化)
- 可选更轻量的 V8
- 可选V8 发布 v7.8
- 可选V8 中的指针压缩
- 可选短内置调用
WebAssembly
- 可选Liftoff: a new baseline compiler for WebAssembly in V8(WebAssembly 的基线编译器 Liftoff)
- 可选Outside the web: standalone WebAssembly binaries using Emscripten
ECMAScrit 规范
其他资源
- 推荐V8 blogs [专栏]
- 可选Google 漫画
- 可选Celebrating 10 years of V8(V8 10 周年历史概述)
- 可选JIT 编译器快速入门
- 可选V8中的快属性与内联缓存
- 可选认识 V8 引擎
计算机
- 可选寄存器和栈的关系
- 可选序列化理解起来很简单
- 可选DSL 的误区
- 可选什么是图灵完备?
- 可选编译原理
- 可选[编译原理]概览
- 可选漫话CPU指令集架构
- 可选CPU 是怎样工作的?
- 可选浅谈STM32的启动过程
- 可选交叉编译
博客
- 可选Hexo (Hexo 是一个快速、简洁且高效的博客框架)
- 可选Next (Elegant Theme for Hexo)
- 可选icarus (A simple, delicate, and modern theme for the static site generator Hexo)
- 可选LeanCloud (博客评论)
书籍
周刊
- 可选奇舞周刊
- 可选HelloGitHub
 
        