年终回顾,为你汇总一份「前端技术清单」

65,171 阅读10分钟

喜欢的朋友欢迎关注我的博客RSS 订阅

记得年初的时候我给自己制定了一个学习计划,现在回顾来看完成度还不错。但仍有些遗憾,一些技术点没有时间去好好学习。

在学习中我发现,像文章这样的知识往往是碎片化的,而前端涉及到的面很多,如果不将这些知识有效梳理,则无法形成体系、相互串联。最后有一种东懂一块,西了解一点的感觉。因此,我结合工作体会抽象出了一些前端基础技术能力,并将这段时间学习或产出的一些不错的内容根据这些能力进行整理,形成了一份前端技术清单(github 地址)。

不论你是正在自学前端遇到了瓶颈,还是对某些技术熟练掌握但某些还未涉足,都希望这份清单能对你有所帮助。

由于个人精力有限,一些技术点的归纳可能有失偏颇,或者目前并未纳入进来,因此 github 上的清单内容 也会不断更新。目前只包含纯前端基础内容,NodeJS 、客户端泛前端、小程序、可视化等内容先留着坑吧。

清单内容↓↓↓

0. 年度报告

1. 基础拾遗

温故而知新,不知则习之,是以牢固根基。

1.1. JavaScript

1.2. CSS

1.3. 浏览器

2. 工程化与工具

软件规模的扩大带来了工程化的需求,前端也不例外。随着 NodeJS 的出现,前端工程师可以使用熟悉的 JS 快速开发所需的工具。工具链生态的繁荣也是前端圈繁荣的一个写照。

2.1. webpack

2.2. Gulp

2.3. Linter

2.4. 静态类型(Typescript/Flow)

2.5. Babel

2.6. CSS预处理与模块化

3. 性能优化

性能优化其实就是在理解浏览器的基础上“因地制宜”,因此可以配合1.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. 安全实录

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. 不归类的好文

开卷有益。

注:其中部分外文文章可能需要“科学上网”