首先，我不得不提一下「一万小时定律」：

人们眼中的天才之所以卓越非凡，并非天资超人一等，而是付出了持续不断的努力。

怎么理解呢？要成为某个领域的专家，需要 10000 小时，按比例计算就是：如果每天工作八个小时，一周工作五天，那么成为一个领域的专家至少需要五年－这就是一万小时定律。

1 万小时的锤炼是任何人从平凡变成世界级大师的必要条件。

原谅我开篇的啰嗦，本系列文章我将从三个层次来说明：

1. 技术就是核心竞争力；
2. 前端反思录（二）—不要让软实力成为短板；
3. 前端反思录（三）—谈谈个人规划；

注意：为了更好的维护，我在 Github 增加了F2E-Awesome，本篇文章就不再同步更新啦！

一、不要小瞧 HTML5

• Audio 和 Video
• Web storage
• 离线存储
• WebSocket
• 地理定位
• Communication
• Web Worker
• Web Workers + 5 cases
• requestAnimationFrame
• requestIdleCallback
• 摄像头
• 全屏
• HTML5 拖放实现
• HTML5 摄像头
• HTML5 全屏
• HTML5 拖放实现
• HTML5 全屏滑动组件
• HTML5 之地理定位（Geolocation）
• HTML5 之消息通知（Web Notification）
• HTML5 之音频合成（SpeechSynthesis）

更多详情可以参考我之前的一篇文章：HTML5 API 大盘点。

二、CSS3

• CSS 实用概要
• CSS 实用 Tips
• CSS 三大特性
• 盒模型
• box-sizing
• BFC
• Flex
• Grid layout
• PostCSS
• 探究 CSS 解析原理
• 详谈层合成（composite）
• CSS Modules使用详解
• CSS4
• CSS3 动画原理
• 探究 CSS 解析原理
• 详谈层合成（composite）
• CSS Modules 使用详解
• 如何检测页面滚动并执行动画
• 移动端无缝滚动动画实现
• 30s CSS ☆
• 新手引导动画的 4 种实现方式

三、你真的懂移动端吗

• Native App
• React Native
• Hybird App
• Ionic
• Cordova
• Phonegap
• Web App
• Weex
• 关于 Hbuilder
• 移动端 Touchend 事件不触发解决方案

四、PWA（渐进式 Web 增强）

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

五、WebAssembly

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

六、小程序

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

七、Canvas、SVG、WebGL

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

八、动画

• CSS3 动画
• CSS3 动画原理
• JS 动画
• 如何检测页面滚动并执行动画

九、JS 从哪里下手

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

十、模块化编程

• 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 源码学习笔记

源码对我来说也算是一个痛，一直没有耐下性子来看源码，所以这里也算是一个友善的建议吧。

• 要有读源码的意识，知道为什么要读。
• 不要在意源码的细枝末节，先顺着主干去捋一遍。
• 如果实在看不懂的话，可以找一些源码分析的文章。
• 请不要忽略源码中的代码测试部分，这里你可以看到函数的输入输出，以便理解。

十二、算法和数据结构对前端同等重要

• 算法
• 算法练习
• 贪心算法
• 动态规划
• 搜索
• 图论
• 计算几何
• 数学
• 大数问题
• 矩阵计算
• 分类
• 数组
• 栈
• 队列
• 链表
• 树
• 二叉树
• 图
• 堆
• 散列表
• 链表
• 单向链表
• 双向链表
• 环链表
• Data Structures for Beginners ☆☆

十三、框架学习必不可少

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

十四、努力向全栈奋斗

• Nodejs，Express，Koa，Mongo，Redis
• Nginx
• PM2 初体验
• Nodejs 事件循环机制
• Stream
• Buffer
• 多进程
• 内存相关
• 消息队列
• 数据库

十五、Python

• Python 入门指南
• Python 官方文档
• Cook Book
• Tornado
• Jinja2
• Cook Book
• 分布式
• Celery
• 移动端
• Kivy
• 数据分析
• Pandas
• 可视化
• Matplotlib
• Seaborn
• Plotly
• Bokeh
• 机器学习
• Tensorflow
• PyTorch
• MxNet

十六、设计模式

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

这里只列出大概，详细请参考：常用的 Javascript 设计模式。

十七、关于 HTTP

• TCP
• UDP
• HTTP 协议入门
• HTTP2
• HTTPS

十八、函数式编程

• 什么是函数式编程思维？
• 我眼中的 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

二十一、兼容

• 再谈 IE 浏览器兼容问题

二十二、缓存

• 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 安全

• Web 安全之 XSS 和 CSRF
• Web 安全的三个攻防姿势
• XSS 的原理分析与解剖
• 对于 XSS 和 CSRF 你究竟了解多少
• CSRF 攻击的应对之道

二十六、项目构建

• Grunt
• Gulp
• Webpack
• Webpack 4
• Parcel

二十七、版本管理 Git

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

二十八、代码规范

• ESLint
• JSHint

二十九、应该知道 Nginx

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

三十、DNS

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

三十一、CDN

• 什么是CDN？
• 静态资源存储

三十二、V8 引擎

• Google V8 引擎运用了哪些优秀的算法？
• V8 引擎详解
• Google V8

三十三、Linux

• Linux
• 掌握 Linux 命令 Grep
• Linux 实用命令
• Mac 下查看端口占用情况

三十四、跨平台桌面端 Electron

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

三十五、测试

• 你了解软件测试吗？
• 单元测试
• Jest☆☆☆
• Jasmine ☆☆☆
• mocha ☆☆☆
• chai ☆☆☆
• Karma ☆☆☆
• 软件测试
• 你了解软件测试吗？ ☆☆
• 自动化测试
• selenium_webdriver ☆☆
• Appium移动自动化测试 ☆☆
• Appium移动自动化测试 ☆☆
• UI自动化测试 ☆☆☆

三十六、部署

• Docker
• Docker 构建统一的前端开发环境 ☆☆
• 私服推荐 Nexus ☆☆☆
• 大型企业级推荐 harbor ☆☆☆
• Docker 底层技术 ☆☆☆
• 精简 Docker 镜像的五种通用方法
• 什么是 Kubernetes ☆☆
• Jenkins ☆☆☆

三十七、监控

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

三十六、抓包工具

• Fiddler
• Charles
• Postman

三十七、总结

文中零零散散提到了一些概念，可能还不够全，我会持续补充的。如果你只关心技术，看这篇就够了，但是如果还要看一些除了技术以外的范畴，请关注我的另外两篇文章：

• 前端反思录（二）—不要让软实力成为短板
• 前端反思录（三）—谈谈个人规划