本文是作者的 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