培训计划
F2E-Awesome
- 更新时间：2019-3-16
- 难度等级：☆ 为初级，☆☆ 为中级，☆☆☆ 为高级。
- 标签体系：开发工具、HMTL5、CSS、JS、主流框架、优化、Web服务器端、源码学习、前端类库、移动端、PWA、WebAssembly、小程序、Canvas、WebGL、SVG、Graphql、模块化编程、算法、排序、加密、数据结构、数据库、包管理、Python、设计模式、网络协议、函数式编程、DOM、跨域、事件模型、安全、Git、前端规范、Nginx、DNS、CDN、V8 引擎、Linux、Electron、抓包工具、Hadoop、测试、部署、监控、浏览器、数据可视化、前端工程化、物联网、消息队列、开发模式、架构、面试、ECMAScript标准、前端组织、学习网站、技术杂谈
开发工具
- Sublime Text ☆☆
- VS Code ☆☆☆
- Atom ☆☆
- WebStorm ☆☆☆
HTML5
- 初级 ☆
- 语义化
- Audio 和 Video
- Web Storage
- 中级 ☆☆
- 高级 ☆☆☆
- Communication
- Web Workder
- requestAnimationFrame
- requestIdleCallback
- 扩展
CSS
- 初级 ☆
- CSS 实用概要
- CSS 实用 Tips
- CSS 三大特性
- 盒模型
- box-sizing
- IconFont
- CSS 实现水平垂直居中的 10 种方式
- 中级 ☆☆
- 高级 ☆☆☆
- 扩展
JS
- 初级 ☆
- 中级 ☆☆
- 高级 ☆☆☆
- TypeScript
- You-Dont-Know-JS
- exploring ES6
- JavaScript 如何工作
- 扩展
主流框架
- Angular
-
Vue
- Mint-UI ☆
- Element.UI ☆
- VUE2 ☆☆
- VUEX ☆☆
- Nuxtjs ☆
- Axios ☆
- Vue-Router
- Vue-Router 实现原理 ☆☆☆
- Vue-Loader ☆☆
- Vue.js 技术揭秘 ☆☆☆
- React
- 脚手架 ☆
- Create React App
- Codesandbox
- Rekit
- 30 seconds of React ☆☆
- How Does React Tell a Class from a Function? ☆☆
- Ant Design ☆☆
- 虚拟 Dom ☆☆
- Diff 算法 ☆☆☆
- react-app-rewired
- Dva ☆☆
- 探路 Roadhog ☆☆
- Redux
- 深入理解 Redux 中间件 ☆☆☆
- Redux 中文文档 ☆☆
- Redux-Saga ☆☆☆
- TakeLatest ☆☆☆
- React 16 新特性 ☆☆
- React-Router@4 ☆☆
- React 性能优化 ☆☆☆
- React Hooks
- UmiJS ☆☆
- Next.js ☆☆
- Ts + React + Mobx 实现移动端浏览器控制台
- 阿里飞冰组件库 ☆☆
- 脚手架 ☆
优化
- 初级 ☆
- 合并
- 压缩
- 混淆
- Css sprits
- 减少 HTTP 请求
- Gzip
- GZIP 的压缩原理与日常应用 ☆☆☆
- Keep-Alive
- DNS
- 中级 ☆☆
- 高级 ☆☆☆
- 彻底弄懂 HTTP 机制及原理
- 缓存
-
HTML 和 HTTP 头文件设置
Storage
- 服务端缓存
- 扩展
- 网站性能优化实战——从 12.67s 到 1.06s 的故事 ☆
- 用 100 行代码提升 10 倍的性能 ☆☆
- 美团网页首帧优化实践 ☆☆
- 前端性能提升秘笈！ ☆☆
- 网站优化实战 ☆☆☆
- 工具
- YSlow
- Performance
- Google PageSpeed
Web 服务器端
-
Nodejs
- 基础 web 框架
- Express ☆
-
Koa
- 阮一峰 Koa 入门教程 ☆
- kick-off-koa ☆
- koajs examples ☆☆
- koa workshop ☆☆
- hapijs ☆☆
- restify
- fastify
- thinkjs
- nextjs ☆☆
- node中比较棘手的问题
- node内存泄漏排查
- node错误处理机制
- node.js cluster
- PM2 初体验 ☆
- Forever ☆☆
- 高度集成 web 框架
- egg ☆☆☆
- nest
- thinkjs
- loopback
- sails ☆☆
- nohup ☆☆
- Nodejs 事件循环机制: 结合libuv和 nodejs 官网的blog
- 剖析 nodejs 的事件循环
- Stream ☆☆
- Buffer ☆☆
- 多进程 ☆☆
- eleme node-interview ☆☆☆
- node debug ☆☆
- 内存相关 ☆☆☆
- js snapshot 相关 ☆☆☆
- node技术进阶与实践 ☆☆☆
- 基础 web 框架
- deno ☆☆
- nexus 搭建 npm 私服 ☆☆☆
- Nginx ☆☆☆
- nodejs 结合 dubbo 服务 node-zookeeper-dubbo ☆☆☆
- thrifty -> nodejs实例 ☆☆
- nodejs-learning-guide ☆☆☆
- 互联网架构为什么要做服务化？☆☆
- 什么是微服务
- 服务化架构的演进与实践☆☆
- 服务化实战之 dubbo、dubbox、motan、thrift、grpc等RPC框架比较及选型☆☆
- Nodejs 最佳实践 ☆☆☆
源码学习
- Lodash 源码分析（一）“Function” Methods ☆☆☆
- Webpack 源码 ☆☆☆
- React 源码剖析系列 － 不可思议的 react diff ☆☆☆
- React 源码解析 ☆☆☆
- 逐行阅读 Redux 源码 ☆☆
- 解密 JQuery ☆☆☆
- Promise 的实现及解析 ☆☆☆
- 浅析 Redux-Saga 实现原理 ☆☆☆
- Antd 源码解读 ☆☆☆
- Vue.js 源码解析 ☆☆☆
- 自己动手做一个 Vue ☆☆☆
- vue-come-true ☆☆☆
- Vue.js 源码学习笔记 ☆☆☆
- 高效阅读 Github 源代码 ☆
- 从头实现一个 koa 框架 ☆☆☆
前端类库
- JS 类库
- jQuery ☆
- zepto ☆
- underscore ☆☆
- lodash ☆☆
- UI 库 ☆
- 软件
- PS ☆
- AI ☆
- 精品 MAC 应用分享 ☆
- 视觉网站
- 原型工具
- Axure ☆
- Sketch ☆
移动端
- Native App
- React Native ☆☆
- Weex ☆☆
- NativeScript
- Hybird App
- Ionic ☆☆
- Cordova ☆☆
- Phonegap ☆☆
- Web App ☆
- 响应式布局
- rem ☆
- webview
- 页面通信 ☆
- 原理 ☆☆
- 关于 Hbuilder ☆
- 移动端 Touchend 事件不触发解决方案 ☆
- 移动Web UI库（H5框架）有哪些 ☆
- H5 移动调试全攻略 ☆☆
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 字节码技术？ ☆☆
小程序
- 快速上手小程序 ☆☆
- 细数小程序的坑 ☆☆
- 小程序开发 Tips ☆☆
- Taro 多端统一开发框架
Canvas
- 玩转「Canvas」 ☆
- Canvas 实现单机版贪吃蛇 ☆☆☆
- 用 Canvas 画一个进度盘 ☆☆
WebGL
- WebGL技术储备 ☆☆
- WebGL的实际使用 ☆☆
- WebGL 3D版俄罗斯方块 ☆☆☆
SVG
- 走进 SVG ☆☆
- SVG 类库 snap.svg.js ☆☆
Elasticsearch
Graphql
- graphql
- apollo
- apollo-blog 需要翻墙
模块化编程
算法
- 算法练习 ☆☆
- 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 ☆☆☆
数据结构
- 分类
- 数组
- 栈
- 队列
- 链表
- 树
- 二叉树
- 图
- 堆
- 散列表
- 链表
- 单向链表
- 双向链表
- 环链表
- Data Structures for Beginners ☆☆
数据库
- MySQL ☆☆☆
- Redis ☆☆☆
- Memcached ☆☆☆
- 三种基本的存储引擎比较 ☆☆☆
包管理
- npm ☆
- cnpm ☆
- yarn ☆
- homebrew ☆
- bower ☆
Python
- 初级 ☆
- Python 入门指南
- Python 官方文档
- Python 笔记
- 中级 ☆☆
- 30s Python
- 爬虫
- Web 框架
- Tornado
- Jinja2
- Flask
- Django
- 高级 ☆☆☆
- Cook Book
- 分布式
- Celery
- 移动端
- Kivy
- 数据分析
- Pandas
- 可视化
- Matplotlib
- Seaborn
- Plotly
- Bokeh
- 机器学习
- Tensorflow
- PyTorch
- MxNet
设计模式
- 菜鸟-设计模式 ☆☆
- JavaScript 设计模式 ☆
- 常用的 Javascript 设计模式 ☆☆
- 23 种设计模式全解析
- 创建型模式
- 工厂方法
- 抽象工厂
- 建造者
- 原型
- 单例
- 结构型模式
- 适配器
- 桥接
- 组合
- 装饰器
- 外观
- 享元
- 代理
- 行为型模式
- 解释器
- 模板方法
- 责任链
- 命令
- 迭代器
- 中介者
- 备忘录
- 观察者
- 状态
- 策略
- 访问者
网络协议
函数式编程
- 什么是函数式编程思维？ ☆☆☆
- 我眼中的 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
跨域
事件模型
- 观察者模式 ☆☆
- DOM0 级模型 ☆☆
- IE 事件模型 ☆☆
- DOM2 级模型 ☆☆
- JQuery Event 模型 ☆☆
- JS 事件模型 ☆☆
安全
- 如何防止 XSS 攻击？
- Web 安全之 XSS 和 CSRF ☆☆☆
- Web 安全的三个攻防姿势 ☆☆☆
- XSS 的原理分析与解剖 ☆☆☆
- 对于 XSS 和 CSRF 你究竟了解多少 ☆☆☆
- CSRF 攻击的应对之道 ☆☆☆
- SQL 注入 ☆☆☆
- HTTPS ☆☆☆
- 内网渗透 ☆☆☆
- DDos 攻击 ☆☆☆
- 点击劫持 ☆☆
- Session 劫持 ☆☆
- 短信接口攻击 ☆☆
Git
- Git 学习资源汇总 ☆
- Git 常规操作 ☆
- 如何配置 Git 对应多个 Repository ☆
- Git 实践系列一：初探 ☆
- Git 钩子的作用 ☆☆
- Git pre-push hook ☆☆
- 你可能会忽略的 Git 提交规范 ☆
- 一个维护版本日志整洁的 Git 提交规范
-
git-flow ☆☆
- git flow 的使用 ☆☆
前端规范
- ESLint ☆
- JSHint ☆
- styleLint ☆
- EditorConfig
- Airbnb JavaScript **
- 项目规范化开发探索 *
- 看看这些被同事喷的 JS 代码风格你写过多少 *
Nginx
- Nginx ☆☆
- Nginx 平滑的基于权重轮询算法分析 ☆☆☆
- Nginx ☆☆☆
- Nginx 解决跨域问题 ☆
- 关于负载均衡的一切 ☆☆
DNS
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
抓包工具
- Fiddler ☆☆
- Charles ☆☆
- HttpWatch ☆☆
- spy-debugger ☆☆
- 模拟请求
- Postman ☆☆
Hadoop生态
测试
- 单元测试
- 软件测试
- 你了解软件测试吗？ ☆☆
- 自动化测试 (程钧沅)
- selenium_webdriver ☆☆
- Appium移动自动化测试 ☆☆
- Appium移动自动化测试 ☆☆
-
UI自动化测试 ☆☆☆
网易UI自动化测试框架，开源的，结合AI，自动更新测试用例、自我学习和需求沉淀。智能测试方向！！！！
部署
- Docker
- Docker 构建统一的前端开发环境 ☆☆
- 私服推荐 Nexus ☆☆☆
- 大型企业级推荐 harbor ☆☆☆
- Docker 底层技术 ☆☆☆
- 精简 Docker 镜像的五种通用方法
- 什么是 Kubernetes ☆☆
- Jenkins ☆☆☆
监控
- APM ☆☆
- 前端错误日志收集方案 ☆
- 前端性能监控系统 ☆☆
- 前端代码异常监控实战 ☆☆
- 前端一站式异常捕获方案 ☆☆
- 前端错误收集 ☆☆
- 如何精确统计页面停留时长 ☆
- 如何优雅处理前端异常？ ☆
- 解决 Script Error 的另类思路 ☆☆
- 大前端时代前端监控的最佳实践 ☆☆☆
- 前端性能监控：window.performance
浏览器
- 再谈 IE 浏览器兼容问题 ☆☆
- 图解浏览器的基本工作原理 ☆☆
- what-happens-when(输入 URL 后浏览器发生了什么) ☆☆
- 浏览器工作原理 ☆☆☆
- 渲染进程的内部工作原理 ☆☆☆
- Compositor 是如何来提高交互性能的？ ☆☆☆
- 浏览器内核渲染：重建引擎
数据可视化
- 图表 ☆☆
- 地图 ☆☆
- 埋点统计 ☆☆
前端工程化
- Web 研发模式演变 ☆☆
- 我们是如何做好前端工程化和静态资源管理 京东 ☆☆☆
- 百度 fis ☆☆
- Scrat ☆☆
- Grunt ☆☆
- Gulp ☆☆
- Webpack
- Webpack 4 ☆☆☆
- 如何十倍提高你的 webpack 构建效率 ☆☆☆
- webpack 性能优化
- Rollup
- Browserify ☆☆
- Parcel ☆☆
- Babel
- 什么是 Kubernetes？
物联网
- ruff ☆☆☆
- ruff入门应用开发 ☆☆☆
- 要想成为一名物联网工程师，需要学习哪些知识？☆
消息队列
- 消息队列常见的 5 个应用场景
- ActiveMQ
- RabbitMQ
- ZeroMQ
- Kafka
- 了解 Kafka ☆☆
- Kafka 入门 ☆☆
- Kafka的架构原理，你真的理解吗？ ☆☆☆
- MetaMQ
- RocketMQ
- 消息队列mq总结 ☆☆
-
缓存淘汰算法--LRU算法 ☆☆☆
这个是各种消息队列的框架的核心算法，都是这个算法的变形
开发模式
架构
- 成为一名架构师得学习哪些知识？ ☆☆
- 如何画好架构图？ ☆☆
- Node.js 微服务实践 ☆☆☆
- 如何设计微服务 ☆☆☆
面试
- 30s 面试 ☆
- 面试精选之 http 缓存 ☆☆
- 张一鸣：10年面试2000人，我发现混的好的人，全都有同一个特质 ☆
- 2019 年前端面试都聊啥 ☆☆
- BAT 面试总结 ☆☆
- JavaScript 深入之 bind 的模拟实现 ☆☆
- 前端面试官的套路，你懂吗？ ☆☆
ECMAScript标准
- ECMAScript 标准 最新版 ☆☆☆
- ECMAScript 标准 历史版本 ☆☆☆
前端组织
学习网站
技术杂谈
-
一个程序员的成长之路 - 剖析别人，总结自己 ☆☆☆
张云龙，全民直播CTO，也是个前端工程师
-
秒杀系统优化思路 ☆☆☆
尽量将请求拦截在系统上游（越上游越好）, 读多写少的常用多使用缓存（缓存抗读压力）
-
客户端高可用建设体系
2000万日订单背后：美团外卖客户端高可用建设体系
-
缓存架构设计 ☆☆☆
微博应对日访问量百亿级的缓存架构设
-
前端重构方案 ☆☆
规范、技术选型、性能优化、构建工具、开发效率
-
Taro - 多端开发框架 ☆☆
京东多端统一开发框架 - Taro
- 你可能不知道的前端知识点 ☆☆
-
V8 并发标记 ☆☆☆
引擎V8推出“并发标记”，可节省60%-70%的GC时间
-
JS 的数据结构 ☆☆
谁说前端就不需要学习数据结构了？
-
简话开源协议 ☆
了解开源协议，选择最合适的协议
-
把前端监控做到极致 ☆☆
从 采集、数据处理、分析、报警 4 个维度进一步阐述如何把前端监控做到极致
-
设计一个百万级的消息推送系统 ☆☆☆
百万连接其实只是一个形容词，更多的是想表达如何来实现一个分布式的方案，可以灵活的水平拓展从而能支持更多的连接。
-
蚂蚁金服核心技术：百亿特征实时推荐算法揭秘
文章提出一整套创新算法与架构，通过对TensorFlow底层的弹性改造，解决了在线学习的弹性特征伸缩和稳定性问题，并以GroupLasso和特征在线频次过滤等自研算法优化了模型稀疏性
