Open alienzhou opened 5 years ago
2018 眼看就要过去了，今年的你相较去年技术上有怎样的收获呢？
记得年初的时候我给自己制定了一个学习计划，现在回顾来看完成度还不错。但仍有些遗憾，一些技术点没有时间去好好学习。
在学习中我发现，像文章这样的知识往往是碎片化的，而前端涉及到的面很多，如果不将这些知识有效梳理，则无法形成体系、相互串联。最后有一种东懂一块，西了解一点的感觉。因此，我结合工作体会抽象出了一些前端基础技术能力，并将这段时间学习或产出的一些不错的内容根据这些能力进行整理，形成了一份前端技术清单（github 地址）。
不论你是正在自学前端遇到了瓶颈，还是对某些技术熟练掌握但某些还未涉足，都希望这份清单能对你有所帮助。
由于个人精力有限，一些技术点的归纳可能有失偏颇，或者目前并未纳入进来，因此 github 上的清单内容 也会不断更新。目前只包含纯前端基础内容，NodeJS 、客户端泛前端、小程序、可视化等内容先留着坑吧。
清单内容↓↓↓
温故而知新，不知则习之，是以牢固根基。
process.nextTick()
button
软件规模的扩大带来了工程化的需求，前端也不例外。随着 NodeJS 的出现，前端工程师可以使用熟悉的 JS 快速开发所需的工具。工具链生态的繁荣也是前端圈繁荣的一个写照。
性能优化其实就是在理解浏览器的基础上“因地制宜”，因此可以配合1.3节“浏览器”部分进行理解。
强烈推荐把 Google Web 上性能优化 Tab 中的文章都通读一遍，其基本涵盖了现代浏览器中性能优化的所有点，非常系统。下面也摘录了其中一些个人认为非常不错的篇幅。
很多安全风险老生常谈，但是往往到出现问题时，才会被重视或者意识到。
rel=noopener
自动化测试是软件工程的重要部分之一，但却极容易被忽视。
如果说基础知识是道，那框架与工具可能就是术；学习与理解它们，但千万不要成为它们的奴隶。
前端领域新技术、新方向层出不穷，这里汇总一些新技术方向；作为开发者需要多了解但是不要盲从
在业务中往往还有一些与“业务无关”的场景需求，不论是什么业务几乎都会遇到；因此，在变与不变中，我们更需要去抽象出这些问题。
开卷有益。
注：其中部分外文文章可能需要“科学上网”
记得年初的时候我给自己制定了一个学习计划，现在回顾来看完成度还不错。但仍有些遗憾，一些技术点没有时间去好好学习。
在学习中我发现，像文章这样的知识往往是碎片化的，而前端涉及到的面很多，如果不将这些知识有效梳理，则无法形成体系、相互串联。最后有一种东懂一块，西了解一点的感觉。因此，我结合工作体会抽象出了一些前端基础技术能力，并将这段时间学习或产出的一些不错的内容根据这些能力进行整理，形成了一份前端技术清单（github 地址）。
不论你是正在自学前端遇到了瓶颈，还是对某些技术熟练掌握但某些还未涉足，都希望这份清单能对你有所帮助。
清单内容↓↓↓
0. 年度报告
1. 基础拾遗
1.1. JavaScript
process.nextTick()[英]1.2. CSS
button元素的按钮 [英]1.3. 浏览器
2. 工程化与工具
2.1. webpack
2.2. Gulp
2.3. Linter
2.4. 静态类型（Typescript/Flow）
2.5. Babel
2.6. CSS预处理与模块化
3. 性能优化
强烈推荐把 Google Web 上性能优化 Tab 中的文章都通读一遍，其基本涵盖了现代浏览器中性能优化的所有点，非常系统。下面也摘录了其中一些个人认为非常不错的篇幅。
3.1. 加载性能
3.2. 运行时性能
3.3. 前端缓存
3.4. 性能调试与实践
3.5. 性能指标
4. 安全
4.1. XSS
4.2. CSRF
4.3. CSP
4.4. HTTPS
4.5. 安全实录
rel=noopener[英]：打开一个新页面是如何带来安全隐患的5. 自动化测试
5.1. 单元测试
5.2. 端到端测试 (E2E)
5.3. 其他
6. 框架与类库
6.1. React
6.2. Vue
6.3. Redux
6.4. RxJS
7. 新技术/方向
7.1. PWA
7.2. CSS Houdini
7.3. Web Components
7.4. 微前端（Micro Frontends）
7.5. HTTP/2
7.6. WebAssembly
8. 业务相关
8.1. 数据打点上报
8.2. 前端监控
8.3. A/B测试
8.4. “服务端推”
8.5. 动效
9. 不归类的好文