F2E-Awesome

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

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

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

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

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

技术就是核心竞争力；前端反思录（二）—不要让软实力成为短板；前端反思录（三）—谈谈个人规划；注意：为了更好的维护，我在 Github 增加了F2E-Awesome，本篇文章就不再同步更新啦！

一、不要小瞧 HTML5

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

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

二、CSS3

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

三、你真的懂移动端吗

Native AppReact NativeHybird AppIonicCordovaPhonegapWeb AppWeex关于 Hbuilder移动端 Touchend 事件不触发解决方案

四、PWA（渐进式 Web 增强）

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

五、WebAssembly

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

六、小程序

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

七、Canvas、SVG、WebGL

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

八、动画

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

九、JS 从哪里下手

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

十、模块化编程

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

十一、强迫自己学习源码

Lodash 源码分析（一）“Function” MethodsWebpack 源码React 源码剖析系列 － 不可思议的 react diffReact 源码解析解密 JQueryPromise 的实现及解析浅析 Redux-Saga 实现原理Antd 源码解读自己动手做一个 Vuevue-come-trueVue.js 源码学习笔记

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

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

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

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

十三、框架学习必不可少

Angular依赖注入指令 Directive剖析 Angularjs 语法VueMint-UIElement.UIVUE2VUEXAxiosVue-RouterVue-LoaderReactcreate-react-app探路 RoadhogReduxDiff 算法虚拟 DomRedux-SagaTakeLatestDvaReact 16 新特性React-Router@4React 性能优化Ant Design从头实现一个 koa 框架Express

十四、努力向全栈奋斗

Nodejs，Express，Koa，Mongo，RedisNginxPM2 初体验Nodejs 事件循环机制StreamBuffer多进程内存相关消息队列数据库

十五、Python

Python 入门指南Python 官方文档Cook BookTornadoJinja2Cook Book分布式Celery移动端Kivy数据分析Pandas可视化MatplotlibSeabornPlotlyBokeh机器学习TensorflowPyTorchMxNet

十六、设计模式

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

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

十七、关于 HTTP

TCPUDPHTTP 协议入门HTTP2HTTPS

十八、函数式编程

什么是函数式编程思维？我眼中的 JavaScript 函数式编程参数个数 Arity高阶组件 Higher-Order Functions (HOF)偏应用函数 Partial Application柯里化 Currying闭包 Closure自动柯里化 Auto Currying函数合成 Function CompositionContinuation纯函数 Purity副作用 Side effects幂等 IdempotentPoint-Free Style断言 Predicate约定 Contracts范畴 Category

当然，还有很多，需要学习的小伙伴们可以深度 JavaScript 函数式编程术语大全这篇文章。

十九、优化

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

二十、DOM

JavaScript HTML DOM

二十一、兼容

再谈 IE 浏览器兼容问题

二十二、缓存

HTML5 离线存储HTML 和 HTTP 头文件 设置MetaExpiresLast-Modified / If-Modified-SinceEtag / If-None-MatchNginx 缓存

当然，缓存的方式还有很多，上面主要列出一些常用的，推荐阅读：彻底弄懂 HTTP 缓存机制及原理。

二十三、跨域

JSONPCORSNginx

二十四、事件模型

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

二十五、Web 安全

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

二十六、项目构建

GruntGulpWebpackWebpack 4Parcel

二十七、版本管理 Git

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

二十八、代码规范

ESLintJSHint

二十九、应该知道 Nginx

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

三十、DNS

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

三十一、CDN

什么是CDN？静态资源存储

三十二、V8 引擎

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

三十三、Linux

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

三十四、跨平台桌面端 Electron

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

三十五、测试

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

三十六、部署

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

三十七、监控

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

三十六、抓包工具

FiddlerCharlesPostman

三十七、总结

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

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