---
title: "前端开发中阶"
date: 2018-12-29
lastmod: 2020-01-05
weight: 2
type: docs
icon: #
description: "中阶路线图"
# search related keywords
---

## 中阶路线图

{{< embed-pdf-view url="/images/frontend.pdf" >}}


### 研发链路（工程化基础）

- 脚手架 (Scaffold)
  - CLI（command-line interface）
    - commander
    - inquirer
    - ora
    - chalk
    - emoji
  - 初始化（Boilerplate）
    - create-react-app
    - umi
    - vue-cli
- 包管理
  - NPM
  - Yarn
- 开发
  - dev-server
  - hot-reload
  - mock
  - proxy
- 构建
  - 构建器
    - gulp
    - Webpack
    - snowpack
    - vite
  - JS 编译
    - tsc
    - babel
    - esbuild
  - CSS 编译
    - Sass
    - Less
    - Stylus
    - PostCSS
- 代码规范
  - 业界流行规范
    - Airbnb Style Guide
    - StandardJS
    - Google Style Guide
    - 阿里巴巴前端规约
  - CSS 命名规范
    - BEM
    - OOCSS
    - SMACSS
  - 工具
    - ESLint
    - stylelint
    - commitlint
    - Prettier（代码格式化）
    - husky 和 lint-staged（流程控制）
    - F2ELint（阿里前端规约配套的Lint工具）
- 测试
  - 单元测试
    - jasmine
    - mocha
    - jest
    - enzyme
  - E2E 测试
    - Selenium
    - karma
    - cypress
    - Puppeteer
    - Appium
  - 覆盖率测试
    - istanbul
- CI/CD
  - TravisCI
  - CircleCI
  - Codecov
  - Jenkins

### 库

- 原则
  - DRY
- CSS
  - 作用域
    - scoped css
    - css modules
    - css-in-js
  - 样式库
    - normalize.css
    - Bootstrap
    - Tailwind
    - Bulma
- JS
  - 工具类
    - history
    - path-to-regexp
    - lodash
    - fastclick
    - date-fns
  - 网络
    - axios
    - got
  - 数据流
    - rxjs
    - Immer
  - 模板引擎
- 动画
  - CSS 动画
  - JS 动画
  - Lottie
- 设计规范/组件
  - Material Design
  - Apple Human Interface Guidelines
  - Ant Design
  - WeUI
  - mini-ali-ui
- 文档
  - jsdoc
  - bisheng
  - dumi
  - Storybook

### 框架

- React
  - 基础
    - JSX
    - 生命周期
    - Hooks
    - Immutable
  - 组件
    - AntDesign
    - material-ui
  - 状态管理
    - Redux
    - Dva
    - Mobx
    - xState
  - 路由
  - 样式
    - classnames
    - styled-components
  - 框架
    - Next.js
    - Gatsby
    - react-admin
    - Ant Design Pro 
  - 周边生态
    - React Native
    - preact、remax、rax、taro

### 性能优化

- 指标
  - 真实指标
    - First Contentful Paint (FCP)
    - Largest Contentful Paint (LCP)
    - First Input Delay (FID)
    - Cumulative Layout Shift (CLS)
  - 实验室指标
    - Total Blocking Time (TBT)
    - Time to Interactive (TTI)
- 评估工具
  - Chrome DevTools
  - LightHouse
  - PageSpeed Insights
  - WebPageTest
- 优化方案
  - 压缩
    - 代码压缩
    - 文本压缩（gzip、Brotli、Zopfli等）
    - Tree-shaking
    - Code-splitting
  - 图片优化
    - 小图优化（css sprite、iconfont、dataURI、svg）
    - 图片格式选择
    - 压缩（如tinypng）
    - 响应式
  - 加载策略
    - 懒加载
    - DNS预解析、预加载、预渲染
    - 离线化（ServiceWorker、AppCache、离线包等）
    - HTTP缓存
    - 数据缓存（localStorage、sessionStorage）
    - 资源加载（顺序、位置、异步等）
    - 请求合并
    - HTTP2
    - CDN
    - 服务端渲染
  - 执行渲染
    - CSS代码优化（选择器、启用GPU、避免表达式等）
    - JS代码优化及评估
  - 感官体验优化
    - 骨架屏
    - Snapshot
    - Loading

### 工作原理

- 浏览器
  - DOM Tree、CSSOM
  - 渲染、绘制
  - 会话
  - 事件循环
  - 垃圾回收
  - Webkit 深入
- JavaScirpt引擎
  - V8
  - SpiderMonkey
  - JavaScriptCore

### 综合能力

- 知识管理
  - Markdown
  - 脑图
  - wiki
  - GitBook
- 软件工程
  - 过程模型
  - 需求分析
  - 概念设计
  - 体系结构设计
  - 项目管理
- 交互设计
  - 交互原型
  - 视觉还原
- 开源项目
  - GitHub
  - OpenJS
  - Apache

## 相关学习资源

- [A curated list of command line apps](https://github.com/agarrharr/awesome-cli-apps)
- [常用的前端库](https://github.com/sorrycc/awesome-f2e-libs)
- [Learn best practices for the modern web and hone your skills with hands-on codelabs](https://web.dev/learn/)
- [Speed Launch Metrics Survey](https://docs.google.com/document/d/1Ww487ZskJ-xBmJGwPO-XPz_QcJvw-kSNffm0nPhVpj8)
- [Measure performance with the RAIL model](https://web.dev/rail/)
- [Front-End Performance Checklist 2021](https://www.smashingmagazine.com/2020/01/front-end-performance-checklist-2020-pdf-pages/)
- [Tutorial: Intro to React](https://reactjs.org/tutorial/tutorial.html)
- [A collection of awesome things regarding the React ecosystem](https://github.com/enaqx/awesome-react)
- [Ant Design 开源项目经验分享](https://g.yuque.com/alibabaf2e/tk6gqe/cu88os)
- [业界流行的前端规范](https://github.com/dustinspecker/awesome-eslint)
- [The State of JavaScript](https://2020.stateofjs.com/zh-Hans/)
- [Echo JS](https://www.echojs.com/)
- [Frontend Focus](https://frontendfoc.us/)
- [Hacker News](https://news.ycombinator.com/)