F2E-Awesome

更新时间：2018-06-12
难度等级：☆ 为初级，☆☆ 为中级，☆☆☆ 为高级。
标签体系：HMTL5、CSS、JS、产品设计、移动端、PWA、WebAssembly、小程序、Canvas、WebGL、SVG、动画、模块化编程、源码学习、算法、数据结构、主流框架、Nodejs、Python、设计模式、网络协议、函数式编程、优化、DOM、缓存、跨域、事件模型、安全、打包构建、Git、代码规范、Nginx、DNS、CDN、V8 引擎、Linux、Electron、抓包工具、测试、部署、浏览器、数据可视化、物联网、技术杂谈、面试

HTML5

初级 ☆
- 语义化
- Audio 和 Video
- Web Storage
中级 ☆☆
- 离线存储
- 地理定位
- WebSocket
- HTML5 摄像头
- HTML5 全屏
- HTML5 拖放实现
- HTML5 全屏滑动组件
高级 ☆☆☆
- Communication
- Web Worker
- requestAnimationFrame
- requestIdleCallback
扩展
- HTML5 API 大盘点 ☆☆

CSS

初级 ☆
- CSS 实用概要
- CSS 实用 Tips
- CSS 三大特性
- 盒模型
- box-sizing
- IconFont
中级 ☆☆
- BFC
- Flex
- Grid layout
- PostCSS
- 预编译
  - SASS
  - LESS
  - Stylus
- CSS3 动画
  - Animate CSS
  - All Animation CSS3
  - Transform
  - Translate
- 如何检测页面滚动并执行动画
高级 ☆☆☆
- CSS4
- CSS3 动画原理
- 探究 CSS 解析原理
- 详谈层合成（composite）
- CSS Modules 使用详解
扩展
- 30s CSS ☆

JS

初级 ☆
- 原型与原型链
- 作用域与作用域链
- Event Loop
- 反思闭包
- call 和 apply
- 正则表达式
- XHR or Fetch API ?
- 为什么要有 ES6
- introduction to ES6 by example
- ES6 标准入门
- ECMAScript 6 - 阮一峰
中级 ☆☆
- JS 模板引擎
- 垃圾回收
- 堆和栈
- 继承
- 掌握 JS Stack Trace
- ES6
  - Generator
  - Promise
  - Module
  - Class
高级 ☆☆☆
扩展
- 何谓 JS 挖矿 ☆
- 30S JS ☆☆

主流框架

Angular
- 依赖注入 ☆
- 指令 Directive ☆☆
- 剖析 Angularjs 语法 ☆☆
Vue
- Mint-UI ☆
- Element.UI ☆
- VUE2 ☆☆
- VUEX ☆☆
- Axios ☆
- Vue-Router
  - Vue-Router 实现原理 ☆☆☆
- Vue-Loader ☆☆
- Vue.js 技术揭秘 ☆☆☆
React
- Ant Design ☆☆
- 虚拟 Dom ☆☆
- Diff 算法 ☆☆☆
- create-react-app ☆☆
- Dva ☆☆
- 探路 Roadhog ☆☆
- Redux ☆☆
- Redux-Saga ☆☆☆
- TakeLatest ☆☆☆
- React 16 新特性 ☆☆
- React-Router@4 ☆☆
- React 性能优化 ☆☆☆
- UmiJS ☆☆
- Next.js ☆☆

优化

初级 ☆
- 合并
- 压缩
- 混淆
- Css sprits
- 减少 HTTP 请求
- Gzip
- Keep-Alive
- DNS
中级 ☆☆
高级 ☆☆☆
- 彻底弄懂 HTTP 缓存机制及原理
- 缓存
  - HTML5 离线存储
  - HTML 和 HTTP 头文件设置
    - Meta
    - Expires
    - Last-Modified / If-Modified-Since
    - Etag / If-None-Match
  - Nginx 缓存
  - 关键路径渲染优化
工具
- YSlow
- Performance
- Google PageSpeed

Web服务器端

Nodejs
- 基础 web 框架
  - Express ☆☆
  - Koa ☆☆
  - hapijs ☆☆
  - restify
  - fastify
  - thinkjs
  - nextjs ☆☆
- 高度集成 web 框架
  - egg ☆☆☆
  - nest
  - thinkjs
  - loopback
  - sails ☆☆
  - PM2 初体验 ☆
  - Forever ☆☆
  - nohup ☆☆
  - Nodejs 事件循环机制: 结合libuv和 nodejs 官网的blog
  - Stream ☆☆
  - Buffer ☆☆
  - 多进程 ☆☆
  - eleme node-interview ☆☆☆
  - node debug ☆☆
  - 内存相关 ☆☆☆
  - js snapshot 相关 ☆☆☆
deno ☆☆
nexus 搭建 npm 私服 ☆☆☆
Nginx ☆☆☆
消息队列 ☆☆☆
nodejs 结合 dubbo 服务 node-zookeeper-dubbo ☆☆☆
thrifty -> nodejs实例 ☆☆
nodejs-learning-guide ☆☆☆

源码学习

产品设计

软件
- PS ☆
- AI ☆
- 精品 MAC 应用分享 ☆
视觉网站
- Behance ☆☆
- Dribbble ☆☆
原型工具
- Axure ☆
- Sketch ☆

前端类库

JS 类库
- jQuery ☆
- zepto ☆
- underscore ☆☆
- lodash ☆☆
UI 库
- Bulma
- EasyUI ☆
- Bootstrap ☆
- Meterial Design ☆☆
- Wired Elements(手绘风格 UI 库)

移动端

Native App
- React Native ☆☆
- Weex ☆☆
- NativeScript
Hybird App
- Ionic ☆☆
- Cordova ☆☆
- Phonegap ☆☆
Web App ☆
响应式布局
- rem ☆
webview
- 页面通信 ☆
- 原理 ☆☆
关于 Hbuilder ☆
移动端 Touchend 事件不触发解决方案 ☆

PWA

WebAssembly

小程序

Canvas

Canvas 实现单机版贪吃蛇 ☆☆☆

WebGL

SVG

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

graphql

graphql
apollo
apollo-blog 需要翻墙

模块化编程

算法

初探加密算法 ☆☆☆
算法分析密码: 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 ☆☆☆

数据结构

数组 ☆
栈 ☆
队列 ☆
链表 ☆☆
树
- 二叉树 ☆☆☆
图 ☆☆☆
堆 ☆☆☆
散列表 ☆☆☆
链表
- 单向链表 ☆☆☆
- 双向链表 ☆☆☆
- 环链表 ☆☆☆
...

数据库

MySQL ☆☆☆
Redis ☆☆☆
Memcached ☆☆☆

包管理

npm ☆
cnpm ☆
yarn ☆
homebrew ☆
bower ☆

Python

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

设计模式

单例模式 ☆
简单工厂模式 ☆
观察者模式 ☆
适配器模式 ☆☆
代理模式 ☆☆
桥接模式
外观模式
访问者模式
策略模式
模版方法模式
中介者模式
迭代器模式
备忘录模式
职责链模式
享元模式
状态模式
常用的 Javascript 设计模式

网络协议

TCP ☆☆☆
UDP ☆☆☆
HTTP 协议入门 ☆
HTTP2 ☆☆☆
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 事件模型 ☆☆

安全

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

Git

代码规范

ESLint ☆
JSHint ☆
styleLint ☆

Nginx

Nginx ☆☆☆

DNS

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

CDN

什么是 CDN？ ☆☆

V8 引擎

Linux

ls/cd/rm/cat/chmod/chown/useradd/df/du/ps/top/head/tail ☆☆
Linux ☆☆
掌握 Linux 命令 Grep ☆☆
Linux 实用命令 ☆☆
Mac 下查看端口占用情况 ☆☆
网络操作
- curl
- netstat
- lsof
- ifconfig
- ssh
- tcpdump
- iptables
grep ☆☆
sed ☆☆
awk ☆☆☆

Electron

抓包工具

Fiddler ☆☆
Charles ☆☆
Postman ☆☆
HttpWatch ☆☆

测试

单元测试
- Jasmine ☆☆☆
- mocha ☆☆☆
- chai ☆☆☆
- Karma ☆☆☆
软件测试
- 你了解软件测试吗？ ☆☆

物联网

技术杂谈

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

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

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

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

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

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

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

引擎V8推出“并发标记”，可节省60%-70%的GC时间

面试

30s 面试

MikuBlog/knowledge

F2E-Awesome

HTML5

CSS

JS

主流框架

优化

Web服务器端

源码学习

产品设计

前端类库

移动端

PWA

WebAssembly

小程序

Canvas

WebGL

SVG

graphql

模块化编程

算法

数据结构

数据库

包管理

Python

设计模式

网络协议

函数式编程

DOM

跨域

事件模型

安全

Git

代码规范

Nginx

DNS

CDN

V8 引擎

Linux

Electron

抓包工具

测试

部署

浏览器

数据可视化

前端工程化

物联网

技术杂谈

面试