F2E-Awesome

• 更新时间：2018-05-23
• 说明：文档着重构建一个完整的「前端技术架构图谱」，方便 F2E 学习与进阶。你可以理解为「前端百科全书」、「前端面试宝典」或者其他。

标签体系

HMTL5、CSS、产品设计、移动端、PWA、WebAssembly、小程序、Canvas、WebGL、SVG、动画、JS、模块化编程、源码学习、算法、数据结构、主流框架、Nodejs、Python、设计模式、网络协议、函数式编程、优化、DOM、缓存、跨域、事件模型、安全、打包构建、Git、代码规范、Nginx、DNS、CDN、V8 引擎、Linux、Electron、抓包工具、测试、部署、浏览器、数据可视化、技术杂谈

HTML5

• Audio 和 Video
• Web Storage
• 离线存储
• WebSocket
• 地理定位
• HTML5 全屏滑动组件
• Communication
• Web Worker
• requestAnimationFrame
• requestIdleCallback
• HTML5 摄像头
• HTML5 全屏 API
• HTML5 拖放实现
• HTML5 API 大盘点。

CSS

• CSS 实用概要
• CSS 实用 Tips
• CSS 三大特性
• 盒模型
  • box-sizing
• BFC
• Flex
• Grid layout
• 探究 CSS 解析原理
• 详谈层合成（composite）
• CSS Modules 使用详解
• CSS 发展
• PostCSS
• CSS4
• IconFont

产品设计

• 软件
  • PS
  • AI
• 原型工具
  • Axure
  • Sketch

前端类库

• jQuery
• zepto
• underscore
• lodash
• EasyUI
• Bootstrap
• Meterial Design

移动端

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

PWA

• 官网
• 第一本 PWA 中文书
• PWA（Progressive Web App）初探总结
• 讲讲 PWA

WebAssembly

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

小程序

• 快速上手小程序
• 细数小程序的坑
• 小程序开发 Tips

Canvas

• Canvas

WebGL

• WebGl
  • Shader 语法
  • 向量，齐次坐标，向量空间，仿射空间
  • 矩阵变换

SVG

• 走进 SVG
• SVG 类库 snap.svg.js，像操作 DOM 一样操作 SVG 资源

动画

• CSS3 动画
  • Animate CSS
  • All Animation CSS3
  • Transform
  • Translate
• CSS3 动画原理
• JS 动画
  • requestAnimationFrame
• 如何检测页面滚动并执行动画

JS

• 原型与原型链
• 作用域与作用域链
• Event Loop
• 反思闭包
• 垃圾回收
• 堆和栈
• 继承
• 我所理解的 call 和 apply
• 掌握 JS 模板引擎
• js 之强大的正则表达式
• 掌握 JS Stack Trace
• ES6
  • Generator
  • Promise
  • Module
  • Class
  • XHR or Fetch API ?
• TypeScript
• 何谓 JS 挖矿
• JS 之强大的正则表达式
• 30S JS

graphql

• apollo
• apollo-blog 需要翻墙

模块化编程

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

源码学习

• Lodash 源码分析（一）“Function” Methods
• Webpack 源码
• React 源码剖析系列 － 不可思议的 react diff
• React 源码解析
• 解密 JQuery
• Promise 的实现及解析
• 浅析 Redux-Saga 实现原理
• Antd 源码解读
• 自己动手做一个 Vue
• vue-come-true
• Vue.js 源码学习笔记
• 高效阅读 Github 源代码
• ...

算法

• 掌握排序算法
• 初探加密算法

数据结构

• ...

主流框架

• Angular
  • 依赖注入
  • 指令 Directive
  • 剖析 Angularjs 语法
• Vue
  • Mint-UI
  • Element.UI
  • VUE2
  • VUEX
  • Axios
  • Vue-Router
  • Vue-Loader
• React
  • create-react-app
  • 探路 Roadhog
  • UmiJS
  • Redux
  • Diff 算法
  • 虚拟 Dom
  • Redux-Saga
  • TakeLatest
  • Dva
  • React 16 新特性
  • React-Router@4
  • React 性能优化
  • Ant Design
• 从头实现一个 koa 框架
• Express

web 服务器端

• Nodejs

  • 基础 web 框架

    • Express
    • Koa
    • hapijs
    • restify
    • fastify

  • 高度集成 web 框架

    • egg
    • nest
    • thinkjs
    • loopback
    • sails

  • PM2 初体验

  • Forever

  • nohup

  • Nodejs 事件循环机制: 结合libuv和 nodejs 官网的blog

  • Stream

  • Buffer

  • 多进程

  • eleme node-interview

  • node debug

  • 内存相关

    • js snapshot 相关

• npm

  • nexus 搭建 npm 私服

• Nginx

• 消息队列

• 数据库

包管理

• npm
• cnpm
• yarn
• homebrew
• bower

Python

• Python 入门指南
• Python 官方文档
• Cook Book
• 分布式
  • Celery
• Web 框架
  • Tornado
  • Jinja2
  • Flask
  • Django
• 移动端
  • 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 函数式编程术语大全
• ...

优化

• 方式
  • 精简、打包、优化
  • 减少 HTTP 请求
  • 缓存
  • 如何优化高德地图（AMap）Marker 动画
  • Web 优化之 Request
  • 高性能网站建设的 14 个原则
• 工具
  • YSlow
  • Performance

DOM

• JavaScript HTML DOM

缓存

• HTML5 离线存储
• HTML 和 HTTP 头文件设置
  • Meta
  • Expires
  • Last-Modified / If-Modified-Since
  • Etag / If-None-Match
• Nginx 缓存
• 彻底弄懂 HTTP 缓存机制及原理。

跨域

• JSONP
• CORS
• Nginx

事件模型

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

安全

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

打包构建

• Grunt
• Gulp
• Webpack
  • Webpack 4
• Browserify
• Parcel

Git

• Git 学习资源汇总
• Git 常规操作
• 如何配置 Git 对应多个 Repository
• Git 实践系列一：初探

代码规范

• ESLint
• JSHint

Nginx

• Nginx

DNS

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

CDN

• 什么是 CDN？

V8 引擎

• Google V8 引擎运用了哪些优秀的算法？
• V8 引擎详解
• Google 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

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

抓包工具

• Fiddler
• Charles
• Postman
• HttpWatch

测试

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

部署

• Docker
  • 私服推荐 Nexus
  • 大型企业级推荐 harbor
  • Docker 底层技术
• Jenkins

浏览器

• 浏览器工作原理
• what-happens-when(输入 URL 后浏览器发生了什么)
• 再谈 IE 浏览器兼容问题

数据可视化

• 图表
  • echarts
  • highcharts
  • g2
• 地图
  • Google Map
  • Mapbox
  • 高德
  • 百度
  • 腾讯
  • 蜂鸟室内地图

前端工程化实践

技术杂谈

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

  张云龙，全民直播CTO，也是个前端工程师