/frontend-tech-list

a frontend tech list for developers

前端技术清单

学习文章的知识往往是碎片化的。而前端涉及到的面很广,这些知识如果不进行有效梳理,则无法相互串联、形成体系。因此,我结合工作体会将抽象出了一些前端基础能力,并将看过、写过的一些不错的文章进行整理,形成了一份(纯)前端技术清单。

不论你是正在自学前端,还是对前端某些技术熟练掌握但某些还未涉足,我都希望这份清单能帮助你 review 一些前端的基础能力。

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

开卷有益。