本文是作者的 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 入门教程 [电子书]可选TypeScriptthis入参
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