2020你应该知道的前端知识

概述

前端相比其它行业是一个特殊的行业,技术迭代速度之快，知识零散繁杂，由于东西多，它成了一个入门容易精通难的岗位，是其它行业所不能比拟，尤其在近几年以Node.js为核心的前端工程化、自动化发展过程中，前端发展更为迅猛，也正应为如此，前端的竞争变得越来越激烈，相同岗位的门槛也变得越来越高，岗位也显得重要起来，这也使得前端成为研发体系中的重要岗位之一，知识的零散，迭代速度的提升，这无论对于刚入门的新手还是有经验的工程师们来说对重点都不好把控，有时候甚至感到迷茫！对此，小编总结出前端2020你需要学习和掌握的前端知识库，让你从前端生态系统的发展模式，把握自己的未来，如果这篇文章对你有帮助，不要忘记点赞!

目录

• 第〇部分 前端基础
• 第一部分 JavaScript深度剖析
• 第二部分  前端工程化
• 第三部分  核心框架原理进阶
• 第四部分  Node.js全栈开发
• 第五部分  客户端开发
• 第六部分  商业级技术解决方案
• 第七部分  进阶技术专题
• 第八部分  前端性能优化
• 第九部分  前端项目部署
• 第十部分  前端面试技巧
• 第十一部分  工具拓展
• 第十二部分  未来展望

第〇部分 前端基础

• 前端开发的历史演变
• 前端MVC框架的兴起
• 前后端分离
• 全栈工程师
• 前端开发的未来
• HTML5语义化
• CSS3 动画及新属性
• flex 弹性布局
• grid布局
• 盒子模型
• 兼容性
• DOM操作技术
• JavaScript编程技术
• HTML&CSS
• 静态资源分析与编译
• 浏览器运行时
• 移动端
• 服务端
• 客户端
• 嵌入式
• 区块链
• 人工智能

第一部分 JavaScript深度剖析

第1章 ECMAScript新特性

• JavaScript与ECMAScript的区别和新特性
• 块级作用域、模板字符串、const、let
• 对象与数组的结构，rest操作符
• 函数(箭头函数、默认参数)
• 对象和数组的扩展用法
• Proxy、Reflect、Map、Set、Symbol概念及用法
• for...of、迭代器模式、生成器函数
• ES Modules模块化
• ES6-ES10……新特性
• AMD、CMD、ES6区别
• Promise、await、async
• class 类
• 新特性编译工具babel的使用与配置
• 新特性的Polyfill:CoreJS标准库

第2章 JavaScript异步编程

• JavaScript单线程设计
• 同步模块和异步模块的调用差异
• 回调函数的执行原理
• Promise异步方案的使用
• 处理异步任务的任务队列和事件循环
• javaScript内部的宏任务和微任务
• ES6 Generator迭代器的异步应用
• 使用Async/Await的异步代码

第3章 TypeScript高级编程

• 编程语言的数据类型
• JavaScript的自有类型
• Flow静态类型检查方案
• Flow静态工具配置及相关插件使用
• TypeScript基本语法
• TypeScript高级特性(泛型、接口)
• TypeScript内置对象标准库
• TypeScript类型申明

第4章 函数式编程范式

• 函数式编程的本质及应用场景
• 如何以函数式编程风格创建应用程序
• 用码构建功能复杂的程序
• 纯函数的定义及为什么要用纯函数
• 消除和副作用的意义
• 柯里化、compose、高阶函数的优点
• 不可变的数据结构
• 常见库(Lodash、Ramda.js)

第5章 JavaScript性能优化

• JavaScript中的垃圾收集
• JavaScript内存管理
• V8垃圾回收机制分类
• 引用计数、标记清除、标记整理和增量标记
• Preformance工具使用及注意事项
• 20个代码优化层面细节

第二部分 前端工程化

第6章 前端工程简介

• 什么是工程化
• 工程化组成
• 工程化在项目中的表现
• 工程化与工具之间的关系
• babel编译工具的安装与配置
• 持续集成
• 静态代码检查
• 单元测试
• 功能测试
• 持续集成服务 Travis CI

第7章 脚手架工具和工程化

• 脚手架设计思想与目标
• 脚手架工具的本质作用
• 常用的脚手架工具
• Yeoman的使用及自定义Generator
• Yeoman Sub Generator 特性
• 用Yeoman创建自己的脚手架
• Plop生成器的基本使用
• 使用 Plop提高项目创建同类文件的效率
• 脚手架工作原理剖析
• 搭建自己的脚手架
• 搭建自己的组件库
• 封装公用的插件
• 发布到npm

第8章 自动化构建

• 如何使用自动化构建提高开发效率
• 自动化构建工具有哪些
• npm scripts vs scrpits hooks
• Grunt工具的配置使用及扩展开发
• Gulp工具的配置使用及扩展开发
• 基于Gulp创建自动化构建流程
• 封装独立的自动化构建工具
• FIS3的使用及常用的插件和扩展

第9章 自动化测试

• 自动化测试的主要分类: 单元测试、集成测试、E2E测试
• 性能测试与压力测试
• 常见的自动化测试框架与实现原理
• Mocha、Jest、Enzyme、Cypress、Nightmare、Puppeteer
• 前端项目自动化测试的最佳实践（基础设施、公共组件测试

第10章 自动化部署（CI / CD）

• 持续集成与持续部署
• 基于 GitHub / GitLab自动化工作流搭建
• 常见的CI实践:Jenkins、GitLab CI、Travis CI、Circle CI
• 开源项目: GitHub Actions
• 基于常用CI系统实现静态部署/Node类项目的自动部署

第11章 模块开发与Webpack

• 模块化标准与规范
• ES Modules标准的支持情况
• Webpack打包工具的基本使用
• Webpack的配置详解
• Webpack打包过程和打包结果分析
• Webpack资源模块的加载(Loader)
• Webpack的插件机制
• 开发Webpack插件
• 开发Webpack Loader
• Webpack周边生态(Dev Server、HMR、Rroxy)
• Webpack高级特性(Tree-shaking、sideEffects)
• Webpack打包过程及打包结果优化
• 深度剖析Webpack实现原理(AST语法树）
• 其他常见工具(Rollup、Parcel)
• Webpack、Rollup、Parcel的区别与特点

第12 章规范与标准化

• 常见的代码Lint工具(ESLint、Stylelint)
• 创建项目团队的专属Lint规则
• 通用代码格式化工具Prettier
• 将工具集成到Webpack使用
• 配合Git Hook保证代码仓库中代码质量
• 结合脚手架、自动化、模块化、规范化搭建现代化前端工程

第三部分 核心框架原理进阶

第13章 Vue.js原理深度剖析

• Vue.js基础框架学习
• Vue CLI基础剖析
• 数据响应式实现原理
• 虚拟DOM和diff算法
• 模板编译实现原理
• Vue Router源码分析

第14章 Vue高级进阶

• 封装自己的Vue组件库
• Vue项目性能优化
• Vuex数据流管理方案
• 使用Typescript开发Vue.js应用
• 服务端渲染(SSR)的实现、同构开发
• Nuxt.js集成SSR框架
• 静态站点生成(SSG)方案及Gridssome
• Vue.js3.0 Composition APIs
• Vue.js+Vue Router+vuex+Typescript实战项目开发

第15章 React设计原理理解

• React的基本用法
• React框架基础、JSX语法
• 分析Virtual-DOM项目的实现原理
• React核心算法: Fiber
• React框架设计哲学
• React框架核心源码解读

第16章 React进阶与实战

• React的应用架构
• 封装React自定义组件
• React组件的性能优化
• 受控制和非受控制组件的选用标准
• React组件的自动化测试
• React 16.8Hooks特性的使用及方案实现原理分析
• CSS-in-JS方案及emotion库
• React应用的UI框架及Chakra-UI
• 使用Typescript开发React应用
• React数据流方案:Redux、Mobx
• Redux常用中间件以及中间件开发
• 原生服务端渲染(SSR)的实现、同构开发
• Next.js集成式SSR框架
• 静态站点生成(SSG方案及Gatsby框架
• React+React Router+Redux+Ant Design+Typescript实战

第17章 Angular企业实战开发

• Angular9基础
• Angular数据绑定及实现原理
• Angular组件封装及父子组件通信
• Angular幅度模块及服务注入
• Angular路由模块
• RxJS响应式编程库
• NgRx状态管理工具

第四部分 Node.js全栈开发

第18章 Node.js高级编程

• Node的基本用法
• 非阻塞IO、EventLoop、事件队列
• CommonJS原理解析
• 核心模块、自定义模块、第三方模块
• 文件系统、Buffer对象、字符编码
• 压缩、解压缩、加密和签名算法
• 网络编程、TCP/IP、HTTP服务
• cookie和session原理
• Restful API
• Express 框架搭建Web应用
• Koa2 框架搭建Web应用
• 多进程和集群搭建
• 搭建反向代理服务器

第19章 NoSQL数据库

• NoSQL数据库特性及优势介绍
• MongoDB的安装、连接、操作
• mongoose模块以及常用的操作API
• Redis快速上手及它所适合的场景
• 使用Node.js操作Redis

第20章 Web开发框架

• Express完成基本的服务端应用开发
• Express路由、模板引擎、错误处理
• Express中间件机制的设计思想
• Express中间件使用以及自定义中间件
• Express应用程序的进程管理器
• Express安全与性能的最佳实践
• Express+Handlebars+Mongoose实战
• Koa应用与实践、AOP面向切面编程
• Koa中间件实现、源码深度剖析
• Koa中间件模型与Express差异
• PM2部署Node.js应用

第21章 GraphQL API开发

• 基于Koa开发 RESTful API
• 应用最佳接口实践:GraphQL
• GraphQL规格标准与设计优势
• GraphQL快速开发库:Apollo
• API鉴权标准、jsonwebtoken及相关API
• Docker Compose + GitLab CI自动化部署Node.js应用

第22章 企业级框架

• Egg.js 项目架构与脚手架工具
• Egg.js 中间件机制、洋葱圈模型
• Egg.js 路由、控制器、服务
• Egg.js 插件机制以及插件开发
• Egg.js 定时任务调度
• Egg.js + Mongoose + Nunjucks + TypeScrip项目实战
• Nest.js 基本概念和内部组成
• 使用Nest.js 框架构建高效且可伸缩的服务端应用
• Nest.js 面向切面编程，依赖注入的实践
• Adonis.js框架介绍

第五部分 客户端开发

第23章 小程序与快应用

• 原生小程序MINA框架回顾
• 基于mpvue开发的小程序应用
• 基于mpvue框架打包快应用和H5
• 京东Taro 多端统一解决方案
• uni-app多端统一解决方案

第24章 Hybrid App 开发

• 基于 WebView UI 的基础方案
• Cordova / Ionic 通用混合App开发框架
• Cordova实现原理分析以及它的常用插件
• H5配合原生的WebView开发混合式App
• 通过 JSBridge 完成H5与原生Native的双向通讯
• 原生App开发相关知识

第25章 React Native

• React Native 开发环境搭建
• 初始环节搭建以及相关配置
• 热更新的开发体验
• 使用 Flexbox实现界面布局
• 常用的界面布局和长列表实现
• 接入第三方Naive组件(Objective-C / Swift / Java
• React Native架构实现原理

第26章 Flutter 原生App开发

• Flutter概述以及  Windows / macOS 环境搭建
• Dart 语言快速上手、包管理工具
• Flutter 快速上手、开发体验、路由和导航
• UI开发: 内置Material Design 和 Cupertino（iOS风格）Widget
• 常用的Widget、表单组件、布局方式
• 数据响应:界面状态管理
• 网络编程以及第三方包
• Native 功能和SDK的调用
• Flutter项目实战

第27章 Electron桌面应用开发

• Electron运行时基本结构分析
• 快速上手、常用API、基础案例
• 主进程与渲染进程之间的差异以及互相通信
• 常见桌面应用程序的功能实现
• Electron结合 React / Vue.js 之类的前端框架
• Electron应用的调试(主进程与渲染进程)以及相关工具Spectron / Devtron
• 集成打包工具:electron-builder / electron-packager / electron-forge
• 实战案例:模仿 Microsoft To Do

第六部分 商业级技术解决方案

第28章 Serverless无服务端方案

• BaaS / FaaS / PaaS 服务
• Serverless架构与实现原理
• Serverless应用场景与局限性
• 国外常见的Serverless服务ZEIT NowNetlify
• 国内常见的Serverless服务(阿里云、腾讯云)

第29章 中途岛、中间层方案

• BFF架构的优势及常见方式
• 基于 Node.js中间层架构
• 实现更合理的前后端分离架构
• 中间层的目标与职责
• 后端细粒度接口聚合
• 服务端模板渲染
• 前端路由设计

第30章 首屏提升性能方案

• 白屏加载和首屏加载时间的区别
• 骨架屏:渲染一些简单元素进行占位
• 使用PWA开发可离线化应用
• 客户端缓存策略
• 利用script的async和defer异步加载
• 前端资源分块、按需加载

第31章 数据埋点方案

• 数据埋点的原理分析
• 页面访问量统计
• 功能点击量统计
• 埋点系统的实现

第32章 长列表无线滚动方案

• 触底加载更多的实现
• 长列表渲染卡顿问题的原因
• 高性能长列表渲染思路:虚拟列表
• 不同框架长列表无线滚动的实现
• 高性能滚动及页面渲染优化

第33章 API接口鉴权方案

• JSON Web Token方案介绍
• jsonwebtoken 模块及相关API
• JWT创建与签发、解码与验证
• Node.js鉴权中间件实现
• Axios统一鉴权模块
• React / Vue.js框架下客户端路由鉴权

第34章 更过常见方案

• 渐进式加载方案
• RBAC权限管理解决方案
• 接口Mock方案
• OSS云存储方案
• H5直播方案
• 多语言化方案
• 防盗链方案
• CDN加速方案
• 加密方案
• 日志方案等

第七部分  进阶技术专题

第35章 微前端架构与实践

• 微前端诞生的背景和解决的问题
• 微前端下的工程化实践
• 微前端如何同时支持 React / Vue.js / Angular等不同框架
• 如何开发一个简单的微服务架构
• 常用的微服务架构使用及配置

第36章 PWA渐进式Web应用

• PWA使用场景分析
• 服务端/客户端离线缓存技术
• 浏览器多线程环境
• 通过 Service workers 让PWA离线工作
• ServiceWorkers 的生命周期
• 基于PWA的消息推送、应用更新
• 渐进式加载

第37章 数据可视化

• 相关知识储备:CanvasȄSVG
• 数据可视化的目标
• 数据可视化的常用方式
• 相关库:D3.js、AntV、Charts.js

第38章 现代化架构剖析

• Web应用主流框架概览
• 域名、DNS、负责均衡等相关概念
• Web应用服务端、数据库服务器
• 缓存服务、任务队列服务
• 云存储、CDN

第39章 Web Components

• Custom Elements
• Shadow DOM
• HTML Templates
• Web Components案例
• Vue组件转化成原生组件

第40章 前端扩展

• CSS预处理(less、scss、styles、sass)
• CSS架构(BEM、CSS-in-JS、emotion、styled-components)
• 移动端真机调试
• Web安全专题(HTTPS、XSS / CSRF、CSP)
• 前端应用性能
• Web Assembly

第八部分  前端性能优化

第41章 浏览器端优化

• Webpack分模块优化
• CND优化
• 代码压缩优化

第42章 服务器端优化

• 开启服务端压缩
• Nginx集群
• 服务端缓存

第九部分  前端项目部署

第43章 单页面应用部署

• Nginx部署
• Tomact部署
• 自动化部署

第44章 服务端渲染项目部署

• pm2部署

第十部分  前端面试技巧

第45章 面试必备的技能

• HTML
• CSS
• Javascript/ECMASCRIPT
• TYPESCRIPT
• Webpack

第46章 如何下好一份简历

• 基本信息
• 项目经验
• 个人特长
• 发展规划

第十一部分  工具拓展

第47章 常用版本管理工具

• Git
• SVN

第48章 包安装工具

• npm
• cnpm
• yarn

第十二部分  未来展望

第49章 前端未来展望

• Python
• go
• 算法
• 数据结构
• 面经
• 面试题
• 沟通技巧
• 各种不断变化技术框架和工具以及相关原来
• 读源码技巧