F2E-Awesome

更新时间：2021-02-18
难度等级：☆ 为初级，☆☆ 为中级，☆☆☆ 为高级。
标签体系：开发工具、HMTL5、CSS、JS、主流框架、优化、Web服务器端、Serverless、源码学习、必学原理、前端类库、移动端、PWA、WebAssembly、小程序、Canvas、WebGL、SVG、Graphql、模块化编程、算法、排序、加密、数据结构、数据库、包管理、Python、设计模式、网络协议、函数式编程、DOM、跨域、事件模型、安全、Git、前端规范、Nginx、DNS、CDN、V8 引擎、Linux、Electron、抓包工具、Hadoop、测试、容器化、监控、浏览器、数据可视化、前端工程化、物联网、消息队列、开发模式、微前端、LowCode、架构、AI、面试、ECMAScript标准、前端组织、学习网站、技术杂谈

开发工具

Sublime Text ☆☆
VS Code ☆☆☆
Atom ☆☆
WebStorm ☆☆☆

前端类库

JS 类库
- jQuery ☆
- zepto ☆
- underscore ☆☆
- lodash ☆☆
UI 库 ☆
- Bulma
- EasyUI
- Bootstrap
- Meterial Design
- Wired Elements(手绘风格 UI 库)
- 移动端
- SUI Mobile
- MUI
软件
- PS ☆
- AI ☆
- 精品 MAC 应用分享 ☆
视觉网站
- Behance ☆☆
- Dribbble ☆☆
原型工具
- Axure ☆
- Sketch ☆

移动端

Native App
- React Native ☆☆
- Weex ☆☆
- NativeScript
Hybird App
- Ionic ☆☆
- Cordova ☆☆
- Phonegap ☆☆
Web App ☆
响应式布局
- rem ☆
webview
- 页面通信 ☆
- 原理 ☆☆
关于 Hbuilder ☆
移动端 Touchend 事件不触发解决方案 ☆
移动Web UI库（H5框架）有哪些 ☆
H5 移动调试全攻略 ☆☆
Flutter
- Awesome-Flutter ☆
- 闲鱼Flutter互动引擎系列 ☆☆
- 深入了解 Flutter 的高性能图形渲染 ☆☆☆

PWA

官网 ☆☆
第一本 PWA 中文书 ☆☆
PWA（Progressive Web App）初探总结 ☆
讲讲 PWA
React 同构应用 PWA 升级指南 ☆
9 amazing PWA secrets ☆☆☆
awesome-progressive-web-apps 打造 PWA 的资源集合
pwa.rocks 一些优秀的 PWA 集合

WebAssembly

WebAssembly，Web 的新时代 ☆☆
来谈谈 WebAssembly 是个啥？为何说它会影响每一个 Web 开发者？ ☆
WebAssembly 系列（四）WebAssembly 工作原理 ☆☆☆
如何评论浏览器最新的 WebAssembly 字节码技术？ ☆☆

Canvas

玩转「Canvas」 ☆
Canvas 实现单机版贪吃蛇 ☆☆☆
用 Canvas 画一个进度盘 ☆☆

WebGL

WebGL技术储备 ☆☆
WebGL的实际使用 ☆☆
WebGL 3D版俄罗斯方块 ☆☆☆

SVG

走进 SVG ☆☆
SVG 类库 snap.svg.js ☆☆

Elasticsearch

Elasticsearch 官网
基于 Elasticsearch 实现搜索建议

Graphql

graphql
apollo
apollo-blog 需要翻墙

模块化编程

CMD ☆
- SeaJS ☆
AMD ☆
- Requirejs ☆
JS 模块化编程之彻底弄懂 CommonJS 和 AMD/CMD！ ☆
AMD 和 CMD 的区别有哪些？ ☆

算法

前端数据结构与算法入门 ☆
算法练习 ☆☆
JavaScript 算法与数据结构 ☆☆☆
算法入门 ☆☆
贪心算法
动态规划
搜索
图论
计算几何
数学
大数问题
矩阵计算
十大经典排序算法动画

排序

交换排序
- 冒泡排序
- 快速排序
插入排序
- 直接插入排序
- 希尔排序
选择排序
- 直接选择排序
- 堆排序
- 归并排序

加密

初探加密算法 ☆☆☆
算法分析密码: as75 ☆☆☆
程序员实用算法密码: mmap ☆☆☆
对称加密
- DES ☆☆☆
- 3DES ☆☆☆
- TDEA ☆☆☆
- Blowfish ☆☆☆
- RC2 ☆☆☆
- RC4 ☆☆☆
- RC5 ☆☆☆
- IDEA ☆☆☆
- SKIPJACK ☆☆☆
- AES ☆☆☆
非对称加密
- RSA ☆☆☆
- ECC（移动设备用） ☆☆☆
- Diffie-Hellman ☆☆☆
- El Gamal ☆☆☆
- DSA（数字签名用） ☆☆☆
Hash 加密
- MD2 ☆☆☆
- MD4 ☆☆☆
- MD5 ☆☆☆
- HAVAL ☆☆☆
- SHA ☆☆☆
综合实践
- OAuth2.0 的四种授权方式 ☆☆

数据结构

分类
- 数组
- 栈
- 队列
- 链表
- 树
  - 二叉树
- 图
- 堆
- 散列表
- 链表
  - 单向链表
  - 双向链表
  - 环链表
Data Structures for Beginners ☆☆

数据库

MySQL ☆☆☆
Redis ☆☆☆
- Redis 教程
- 读完这篇，你一定能真正理解 Redis 持久化
Memcached ☆☆☆
- Memcached 教程
三种基本的存储引擎比较 ☆☆☆

包管理

npm ☆
cnpm ☆
yarn ☆
homebrew ☆
bower ☆

Python

初级 ☆
- Python 入门指南
- Python 官方文档
- Python 笔记
  - 简单语法
  - 常用操作
  - Open 文件操作
  - ...
中级 ☆☆
- 30s Python
- 爬虫
  - Scrapy
- Web 框架
  - Tornado
  - Jinja2
  - Flask
  - Django
高级 ☆☆☆
- Cook Book
- 分布式
  - Celery
- 移动端
  - Kivy
- 数据分析
  - Pandas
- 可视化
  - Matplotlib
  - Seaborn
  - Plotly
  - Bokeh
- 机器学习
  - Tensorflow
  - PyTorch
  - MxNet

设计模式

菜鸟-设计模式 ☆☆
JavaScript 设计模式 ☆
常用的 Javascript 设计模式 ☆☆
23 种设计模式全解析
创建型模式
- 工厂方法
- 抽象工厂
- 建造者
- 原型
- 单例
结构型模式
- 适配器
- 桥接
- 组合
- 装饰器
- 外观
- 享元
- 代理
行为型模式
- 解释器
- 模板方法
- 责任链
- 命令
- 迭代器
- 中介者
- 备忘录
- 观察者
- 状态
- 策略
- 访问者

网络协议

TCP ☆☆☆
UDP ☆☆☆
HTTP 协议入门 ☆
HTTP2 ☆☆☆
HTTPS ☆☆
- 一个故事讲完 HTTPS
- 图文还原 HTTPS 原理
计算机网络的 7 层协议 ☆☆☆

函数式编程

什么是函数式编程思维？ ☆☆☆
我眼中的 JavaScript 函数式编程 ☆☆☆
防抖和节流原理分析
参数个数 Arity
高阶组件 Higher-Order Functions (HOF)
偏应用函数 Partial Application
柯里化 Currying
闭包 Closure
自动柯里化 Auto Currying
函数合成 Function Composition
Continuation
纯函数 Purity
副作用 Side effects
幂等 Idempotent
Point-Free Style
断言 Predicate
约定 Contracts
范畴 Category
JavaScript 函数式编程术语大全
...

DOM

JavaScript HTML DOM ☆☆

跨域

JSONP ☆☆
CORS ☆☆
Nginx ☆☆

事件模型

观察者模式 ☆☆
DOM0 级模型 ☆☆
IE 事件模型 ☆☆
DOM2 级模型 ☆☆
JQuery Event 模型 ☆☆
JS 事件模型 ☆☆

安全

如何防止 XSS 攻击？
Web 安全之 XSS 和 CSRF ☆☆☆
Web 安全的三个攻防姿势 ☆☆☆
XSS 的原理分析与解剖 ☆☆☆
对于 XSS 和 CSRF 你究竟了解多少 ☆☆☆
CSRF 攻击的应对之道 ☆☆☆
SQL 注入 ☆☆☆
HTTPS ☆☆☆
内网渗透 ☆☆☆
DDos 攻击 ☆☆☆
点击劫持 ☆☆
Session 劫持 ☆☆
短信接口攻击 ☆☆
CC

Git

Git 学习资源汇总 ☆
Git 常规操作 ☆
如何配置 Git 对应多个 Repository ☆
Git 实践系列一：初探 ☆
Git 钩子的作用 ☆☆
Git pre-push hook ☆☆
你可能会忽略的 Git 提交规范 ☆
一个维护版本日志整洁的 Git 提交规范
git-flow ☆☆
- git flow 的使用 ☆☆

前端规范

ESLint ☆
JSHint ☆
styleLint ☆
EditorConfig
Airbnb JavaScript **
项目规范化开发探索 *
看看这些被同事喷的 JS 代码风格你写过多少 *
谷歌工程实践 - Code Review 标准 **

Nginx

Nginx ☆☆
Nginx 平滑的基于权重轮询算法分析 ☆☆☆
Nginx ☆☆☆
Nginx 解决跨域问题 ☆
关于负载均衡的一切 ☆☆
负载均衡的算法 ☆☆
几种常用负载均衡架构 ☆☆

DNS

DNS 缓存中毒
例解 DNS 递归/迭代名称解析原理 ☆☆☆
浏览器输入网址后台是如何运作的 ☆☆

CDN

什么是 CDN？ ☆☆
CDN 带来这些性能优化 ☆☆☆

V8 引擎

Google V8 引擎运用了哪些优秀的算法？ ☆☆☆
V8 引擎详解 ☆☆☆
Google V8 ☆☆☆
V8 并发标记 ☆☆☆
V8 引擎的 5 个优化技巧 ☆☆☆

Linux

ls/cd/rm/cat/chmod/chown/useradd/df/du/ps/top/head/tail ☆☆
Linux ☆☆
掌握 Linux 命令 Grep ☆☆
Linux 实用命令 ☆☆
Mac 下查看端口占用情况 ☆☆
程序员必备的 Linux 基础知识 ☆☆
网络操作
- curl
- netstat
- lsof
- ifconfig
- ssh
- tcpdump
- iptables
grep ☆☆
sed ☆☆
awk ☆☆☆
commander 将介绍如何利Javascript做为服务端脚本
chalk 命令行彩色输出
chokidar node文件监控

Electron

初探 Electron - 理论篇 ☆☆
初探 Electron - 升华篇 ☆☆
初探 Electron - 实践篇 1 ☆☆
初探 Electron - 实践篇 2 ☆☆

抓包工具

Fiddler ☆☆
Charles ☆☆
HttpWatch ☆☆
spy-debugger ☆☆
模拟请求
- Postman ☆☆

Hadoop生态

Google 三驾马车：GFS、MapReduce 和 Bigtable
Hadoop 生态系统
Hbase
Hbase 中文参考指南
HIVE 和 HBASE 区别

测试

单元测试
- Jest ☆☆☆
- Jasmine ☆☆☆
- mocha ☆☆☆
- chai ☆☆☆
- Karma ☆☆☆
软件测试
- 你了解软件测试吗？ ☆☆
自动化测试
- selenium_webdriver ☆☆
- Appium移动自动化测试 ☆☆
- Appium移动自动化测试 ☆☆
- UI 自动化测试 ☆☆☆
  
  网易UI自动化测试框架，开源的，结合AI，自动更新测试用例、自我学习和需求沉淀。智能测试方向！！！！
应用
- React单元测试策略及落地
- 使用 Jest 和 Enzyme 测试 React 组件

容器化

Docker
- Docker 边学边用 ☆☆
- Docker 构建统一的前端开发环境 ☆☆
- 私服推荐 Nexus ☆☆☆
- 大型企业级推荐 harbor ☆☆☆
- Docker 底层技术 ☆☆☆
- 精简 Docker 镜像的五种通用方法
K8s
- 什么是 Kubernetes ☆☆
- Kubernetes 架构简介 ☆☆
- 一文了解 Kubernetes ☆☆☆
Jenkins ☆☆☆
前端AB实验设计思路与实现原理 ☆☆☆

监控

APM ☆☆
前端错误日志收集方案 ☆
前端性能监控系统 ☆☆
前端代码异常监控实战 ☆☆
前端一站式异常捕获方案 ☆☆
前端错误收集 ☆☆
如何精确统计页面停留时长 ☆
如何优雅处理前端异常？ ☆
解决 Script Error 的另类思路 ☆☆
大前端时代前端监控的最佳实践 ☆☆☆
前端性能监控：window.performance

浏览器

再谈 IE 浏览器兼容问题 ☆☆
图解浏览器的基本工作原理 ☆☆
what-happens-when(输入 URL 后浏览器发生了什么) ☆☆
浏览器工作原理 ☆☆☆
渲染进程的内部工作原理 ☆☆☆
Compositor 是如何来提高交互性能的？ ☆☆☆
浏览器内核渲染：重建引擎
Chrome Devtools ☆☆☆
Chrome插件(扩展)开发全攻略 ☆

数据可视化

图表 ☆☆
- echarts
- highcharts
- g2
地图 ☆☆
- Google Map
- Mapbox
- 高德
- 百度
- 腾讯
- 蜂鸟室内地图
埋点统计 ☆☆
- 揭开 JS 无埋点技术的神秘面纱

前端工程化

Web 研发模式演变 ☆☆
我们是如何做好前端工程化和静态资源管理京东 ☆☆☆
百度 fis ☆☆
Scrat ☆☆
Grunt ☆☆
Gulp ☆☆
- Gulp
- Gulp 4
Webpack
- Webpack 4 ☆☆☆
  - Webpack 4 配置最佳实践
- 如何十倍提高你的 webpack 构建效率 ☆☆☆
- webpack 性能优化
  - 减小前端资源大小 ☆☆
  - 利用好持久化缓存 ☆☆☆
  - 监控和分析应用 ☆☆☆
Rollup
Browserify ☆☆
Parcel ☆☆
Babel
什么是 Kubernetes？ ☆☆
有赞前端质量保障体系 ☆☆☆
前端工程实践之可视化搭建系统 ☆☆
前端项目代码质量保障秘藉 ☆

物联网

ruff ☆☆☆
ruff入门应用开发 ☆☆☆
要想成为一名物联网工程师，需要学习哪些知识？☆

消息队列

消息队列常见的 5 个应用场景
ActiveMQ
RabbitMQ
ZeroMQ
Kafka
- 了解 Kafka ☆☆
- Kafka 入门 ☆☆
- Kafka的架构原理，你真的理解吗？ ☆☆☆
MetaMQ
RocketMQ
消息队列mq总结 ☆☆
缓存淘汰算法--LRU算法 ☆☆☆

这个是各种消息队列的框架的核心算法，都是这个算法的变形

开发模式

DevOps 简介 ☆
猪八戒网的 DevOps 进化论 ☆☆

微前端

了解什么是微前端 ☆
为什么大公司一定要使用微服务？ ☆
微前端如何落地？ ☆☆☆
用微前端的方式搭建类单页应用 ☆☆
Bifrost微前端框架及其在美团闪购中的实践 ☆☆
张克军：微前端架构体系 ☆☆☆
EMP for Vue&React 互相远程调用 ☆☆

LowCode

国内低代码平台 ☆☆☆

架构

前端架构师入门技能图谱 ☆
架构师成神路线图 ☆☆
成为一名架构师得学习哪些知识？ ☆☆
如何画好架构图？ ☆☆
Node.js 微服务实践 ☆☆☆
如何设计微服务 ☆☆☆
各大互联网公司架构演进之路汇总 ☆☆☆
开发十年，我是如何成长为一名优秀的架构师 ☆☆☆
淘宝从几百到千万级并发的十四次架构演进之路 ☆☆☆
设计图都不会画，还想做架构师？ ☆☆
12306的技术架构 ☆☆☆
一文读懂架构整洁之道 ☆☆☆
如何推动基础架构项目落地 ☆☆

AI

机器学习模型一览：监督型、半监督型和无监督型 ☆☆☆
如何在 1 秒内做到大数据精准去重？ ☆☆☆
大数据学习资源(Awesome Big Data) ☆☆☆
Tensorflow.js生态 ☆☆

面试

30s 面试 ☆
面试精选之 http 缓存 ☆☆
张一鸣：10年面试2000人，我发现混的好的人，全都有同一个特质 ☆
2019 年前端面试都聊啥 ☆☆
BAT 面试总结 ☆☆
JavaScript 深入之 bind 的模拟实现 ☆☆
前端面试官的套路，你懂吗？ ☆☆
前端 100 问
一个 TCP 连接上面能发多少个 HTTP 请求
彻底弄懂前端路由

ECMAScript标准

ECMAScript 标准最新版 ☆☆☆
ECMAScript 标准历史版本 ☆☆☆

前端组织

360奇舞团
腾讯Web前端团队（Alloy Team）
百度Web 前端研发部（FEX）
淘宝前端团队（FED）
大搜车无线团队
京东凹凸实验室
蚂蚁金服·数据体验技术团队
前端精读周刊
淘系前端团队

学习网站

Freecodecamp
CodePen
算法练习
Pluralsight
Code School
慕课网
妙味课堂
百度传课

技术杂谈

一个程序员的成长之路 - 剖析别人，总结自己 ☆☆☆

张云龙，全民直播CTO，也是个前端工程师
秒杀系统优化思路 ☆☆☆

尽量将请求拦截在系统上游（越上游越好）, 读多写少的常用多使用缓存（缓存抗读压力）
客户端高可用建设体系

2000万日订单背后：美团外卖客户端高可用建设体系
缓存架构设计 ☆☆☆

微博应对日访问量百亿级的缓存架构设
前端重构方案 ☆☆

规范、技术选型、性能优化、构建工具、开发效率
Taro - 多端开发框架 ☆☆

京东多端统一开发框架 - Taro
你可能不知道的前端知识点 ☆☆
V8 并发标记 ☆☆☆

引擎V8推出“并发标记”，可节省60%-70%的GC时间
JS 的数据结构 ☆☆

谁说前端就不需要学习数据结构了？
简话开源协议 ☆

了解开源协议，选择最合适的协议
把前端监控做到极致 ☆☆

从采集、数据处理、分析、报警 4 个维度进一步阐述如何把前端监控做到极致
设计一个百万级的消息推送系统 ☆☆☆

百万连接其实只是一个形容词，更多的是想表达如何来实现一个分布式的方案，可以灵活的水平拓展从而能支持更多的连接。
蚂蚁金服核心技术：百亿特征实时推荐算法揭秘

文章提出一整套创新算法与架构，通过对TensorFlow底层的弹性改造，解决了在线学习的弹性特征伸缩和稳定性问题，并以GroupLasso和特征在线频次过滤等自研算法优化了模型稀疏性
前端登录，这一篇就够了

文章列举了常见的登录方式，清晰易懂：Cookie + Session 登录、Token 登录、SSO 单点登录、OAuth 第三方登录

knowledge

F2E-Awesome

开发工具

HTML5

CSS

JS

主流框架

优化

Web 服务器端

Serverless

源码学习

必学原理

前端类库

移动端

PWA

WebAssembly

小程序

Canvas

WebGL

SVG

Elasticsearch

Graphql

模块化编程

算法

排序

加密

数据结构

数据库

包管理

Python

设计模式

网络协议

函数式编程

DOM

跨域

事件模型

安全

Git

前端规范

Nginx

DNS

CDN

V8 引擎

Linux

Electron

抓包工具

Hadoop生态

测试

容器化

监控

浏览器

数据可视化

前端工程化

物联网

消息队列

开发模式

微前端

LowCode

架构

AI

面试

ECMAScript标准

前端组织

学习网站

技术杂谈