前后端开发概述

概述

​ 把一些前后端概念性比较强的理念放在这里，不放代码，不提供案例，仅供理解核心概念参考。

　　

2019、2020前端开发技术指南

本指南通过简单分类列出了技术选项，为前端开发者提供技术方向参考

如果你是一个基础的前端开发者，你应该具备以下技能或者推荐你具备以下技能：

​ 1.HTML&CSS。语义化的html元素、基础的css语法、flexbox&grid、CSS变量、浏览器开发者工具。

​ 2.响应式布局。响应式设计将不再是网页的加分项, 而是必须的。设置viewport、非固定宽度、媒体查询、移动端优先、柱状优先、使用rem替代px（或者等效计算，不能是纯px）。

​ 3.基础的部署工作。注册一个域名、管理共享主机或者虚拟主机、FTP, SFTP 文件上传、静态页面托管

​ 4.SASS预处理器。虽然不是必须的, 但是推荐去学, 基础知识的掌握很简单。结构化CSS、变量、嵌套样式表、继承、Mixin&函数。

​ 5.原生JavaScript语法。是基础中最重要的。包括但不限于js的基础变量类型、函数、条件判断、循环、计算符，DOM操作与事件、JSON、Fetch、ES6语法（箭头函数、promise、async/await、结构）。

​ 掌握或者基本掌握了以上技能，你可以做到：构建静态网站、构建UI布局、添加交互功能、部署和维护网站。然而这些作为前端开发的工具是远远不够的。

如果你是一个成熟的前端开发者，你应该具备以下技能或者推荐你具备以下技能：

​ 1.HTML & CSS框架。推荐bootstrap或者bulma。

​ 2.Git和其他工作流工具。基础的命令行、Git版本控制、npm(yarn)包管理、webpack或者gulp打包工具、编辑器插件(ESLint, Prettier, Live Server等)。

​ 3.前端框架。三大框架angular、vue、react至少熟悉或者掌握一个。这三大框架在大公司开发中非常流行，具有更有趣的交互和设计、可以实现前端代码组件化、对团队非常有利。

​ 4.状态管理。对于使用框架的大型前端项目, 你也许需要使用状态管理工具去管理你的应用级的状态。推荐框架有redux、vuex、apollo。

​ 掌握或者基本掌握了以上技能，你可以做到：构建一个优秀的前端应用、流畅和稳定的前端工作流、多人开发&熟练使用Git、请求后端APi

如果你是一个进阶的前端开发者，你应该具备以下技能或者推荐你具备以下技能：

​ 1.学习一门后端语言。成为一个全栈工程师或软件工程师, 你将需要学习一个服务端语言和相关技术。Nodejs、PHP、Python、C#、golang。学习的顺序为基础的后端语法、数据结构和工作流、包管理、http路由。

​ 2.服务端框架。不要重复造轮子, 学习一门框架去构建更好和更快的应用。Nodejs有express、koa、nest，python有django和flask，php有larvael和symphony，c#有asp.net。

​ 3.数据库。绝大多数觉得应用都会使用到数据库, 这里有一些选择:关系型（mysql、PostgreSQL）、非关系型（mongoDB）、轻量级（Redis、SQlite）、云数据库（Azure、AWS、Firebase）。

​ 4.服务端渲染。像React, Vue 和 Angular等框架都可以进行服务端渲染。

​ 5.内容管理系统。内容管理系统允许快速开发并为您的客户提供更新内容的能力. 在你需要快速开发网站的时候, 它们是很适合的. 特别是对于自由开发者.比较好用的CMS管理系统：基于PHP的(wordpress、drupal)、基于JS的(Ghost、keystone)、基于python的(Mezzazine)。

​ 6.安装和部署。学习语言和框架是一回事, 但是安装环境, 测试和部署又是另外一回事。部署(Linux, SSH, Git, Nginx, Apache)、平台(Digital Ocean, AWS, Heroku, Azure)、可视化(Docker, Vagrant)、测试(单元测试, 集成测试, 函数式测试, 系统测试)。

​ 掌握或者基本掌握了以上技能，你可以做到：设置全栈的开发环境和工作流、构建后端服务API和微服务、数据库操作、能够独立开发应用(前后端)、部署到云端。

如果你是一个展望未来的前端开发者，下面这些技术也许是你应该关心或者下一步发展的技能：

​ 1.原生应用开发。ReactNative、Flutter、Ionic、NativeScirpt。

​ 2.使用Electron开发桌面应用.Electron是一个使用JavaScript构建跨平台的桌面应用工具。

​ 3.GraphQL & Apollo.GraphQl是对于API的一种革命性新方法，查询语言比标准RESET严格得多。

​ 4.TypeScript.TypeScript是一个JavaScript的超集, 它添加了静态类型等很多特性。

​ 5.无服务架构.无需创建和管理自己的服务器

​ 6.PWA.Progressive Web Apps是一个web app但是在功能和样式上给用户带来原生应用使用体验的一项技术.

​ 7.AI和机器学习.AI和机器学习已经被广泛应用在所有的程序和技术中, 甚至包括web开发中.

​ 8.区块链技术.现在许多公司使用区块链技术进行数字交易, 因为它们更安全和有效率.

​ 9.Web Assembly

https://segmentfault.com/a/1190000017483325

2021前端开发技术指南

1. HTML

• DOCTYPE
• HTML, XHTML, XML 差异性
• HTML5 新特性 及 语义化标签
• meta, img, script 等标签及其标签属性
• 有兴趣可以了解 W3C 和 WHATWG HTML5 差异

2. CSS

• CSS 基础
• CSS 布局
• CSS 动画
• CSS 预处理器（sass, less, stylus）

3. JavaScript

• JavaScript 基础
• ES6
• 面向对象编程 和 函数式编程

4. 前端框架

• Vue

  • 路由（Vue-Router）
  • 状态管理（Vuex）

• React

  • JSX
  • Class Component, Hooks
  • 路由（React-Router, React-Router-Dom）
  • 状态管理（Redux, Mobx, Context API）

• Angular

  • 状态管理（Service, NgRx, RxJS）

• Svelte

  • 路由（svelte-spa-router）
  • 状态管理（Context API）

5. 前端工程化

• 包管理工具（npm, yarn）
• JavaScript 编译器（babel）
• 代码检测工具（ESlint）
• 自动化打包工具（webpack, rollup, parcel, gulp）

6. 服务端渲染 SSR

• Nuxt（Vue）
• Next（React）
• Sapper（Svelte）

7. 静态站点生成器 SSG

• Gridsome（Vue）
• Gatsby（React）

8. TypeScript

• 和 JavaScript 的差异
• 基础类型
• OOP（模块，类，接口，继承，泛型等）

9. 用 JS 去做服务器端

• Node.js

  • 单线程、事件驱动、非阻塞I/O
  • 框架（Express, Koa，Nest）
• Deno

10. 桌面应用程序 Electron

Electron.js是可以通过HTML，CSS，JavaScript开发跨平台的桌面应用程序。

• 基础语法，API
• 编译
• 性能优化
• 调试
• 部署

11. 移动端开发

• React Native
• Flutter
• Ionic

12. 前端架构 JAMStack

JAMStack（JAM 代表 JavaScript，API 和 Markup）

是一种使用 Static Site Generators (SSG) 技术、不依赖 Web Server 的前端架构。

13. WebAssembly

WebAssembly 是一种新的编码方式，可以在现代的网络浏览器中运行底层字节码。

https://segmentfault.com/a/1190000038774393?utm_source=sf-related

前端两年应有技术栈

一、打好基础不用说

HTML、CSS、JavaScript 三大件，完全掌握。不懂得就直接查 MDN。HTML重点掌握语义化。区分块级和内联标签。其他查文档就好了。还有就是定义 head 里面一些meta 了解下。

CSS。重点看盒子模型，定位，层级，过渡，动画和 transform。知道原理和规则。大部分工作都是照着设计稿化。掌握上面几个99%还原也不难。接下来重点学习几种常见的布局。完了之后去搞flex。最后搞下sass、less。基本就差不多了。

JavaScript。重点来了，红宝书看一遍掌握基础，进阶去看《你不知道的 JavaScript》。就这两套足够了，别搞那么多。每个知识点搞懂。ES6基本没啥问题。下面几个问题优搞懂，优先级如下：

this 用法，相关原理 原型/原型链 闭包 面向对象相关 同步异步/回调/promise/async、await 模块化 CommonJS, AMD 先搞这懂这些比较难的概念，对你JS理解更加深入。接下来在开始看框架方面

二、框架方面

前期要会用，后期要懂原理。

新人先搞 Vue。Vue 算是比较简单的框架了，上手容易。照着官方文档来问题不大。原理方面要提高自己认识。学习怎么看源码。github常去逛逛。

学习框架之前，我其实特别建议，新人先去了解 Babel 和 webpack 不仅仅是使用。一些原理方面的东西工作中也会用到。babel 里面会有教你如何编译代码。webpack教你如和打包文件。自己手写编译器和打包工具也不是特别难。反正对之后看vue、react源码帮助挺大。

搞完 Vue 全家桶，去了解下 React，React hooks 学习下新的理念。再回过头来看Vue。你会发现他们是如此的相似去又不同。

多去实践总结，对整体框架理解会越来越深刻。

三、如何看源码

新人刚开始看源码，会陷入两个困境中。一是无从下手。二是看了之后感觉没啥收获。

这个也很正常。一般我们熟知的框架都有个几千甚至上万个PR。太大细节会干扰你。掌握整个节奏和流程。学习原理也比较吃力。就连找个入口都像大海捞针一样。建议从下面几个方面入手：

• 挑简单的上手。别一开始就搞 vue、react、webpack。太难，会直接劝退新人。不要为了面试而去读。反而效果不好，面试稍微问深入一点就答不出来了。平时有兴趣多琢磨琢磨。按照难易程度，函数库 < 组件库 < 框架 < 工程化 分别典型代表 lodash < vant < vue < webpack
• 手撸简易模型。像vue, webpack, babel 都有简易项目给你撸。有的创始人（尤哥）还直播手撸。国外的更多，youtube 一搜一大堆。就算不看源码，照着写出了简易 demo 对原理和理解提升都是很大的。
• 调试开源项目。先把项目拉下来。在vscode里面跑下，核心函数多打几个断点。看看里面变量是怎么diff的。对理解更深刻了。

看了源码是别人的，学到了是自己的。学习时候边记笔记，边思考原理，总结经验。下面来谈谈前端工程化怎么弄。

四、前端工程化

现在最流行的打包工具 webpack 用起来。当然直接用 vue-cli2、vue-cli3、create-react 都是可以的。但是 webpack 相关还是得掌握。

首先重点搞下babel、webpack。学习下编译，打包的原理。自己配置下 webpack。尝试自己去写下下 webpack 的 loader 和 plugin。学习这些之前要懂一点 node.js， node.js 不需要全部学习。一般就日常用到读写文件fs接口，path 路径接口。这些 api 都不难写几个 demo 就懂了。基本上webpack 里面配置文件也没用到多少 node 的东西。最后自己学会配置webpack的配置文件。

如果想深想去优化打包体积和速度，就需要去了解很多webpack插件。webpack 里面最核心的就是插件了。

当然前端工程化不仅仅是这些，CI/CD可持续集成, Umi 了解下。shell各种脚本自动化命令、代码生成技术了解下。

五、性能优化的方案

一般来说。性能优化没什么系统化的文档供人学习。完全靠一些经验和自己的实践。

我们常提到性能好坏是由什么来衡量呢？

访问页面地址 --> 页面首次加载数据 --> 渲染出完整页面的时长

非首次情况下，命中缓存的加载缓存数据 --> 渲染出完整页面的时长。

一般我从下面几个方面着手去做，一般问题都不大。

减小资源（静态资源，后端加载的数据）大小

• 压缩代码HTML/CSS/JS
• 压缩图片、音视频大小
• Tree-Sharking 消除无用代码

以上webpack都可以搞定

避免同一时间的过多次数请求

• CSS 实现雪碧图：使用background-position共享一张图
• 图片懒加载：监听滚动后offsetTop, 使用src 替换 src（真实路径）
• 列表懒加载（分批加载）：监听滚动后offsetTop， 发送请求加载下一页的数据
• 路由懒加载
• 代码分包分块加载（webpack）
• 预加载技术
• 小程序分包、预下载等。

利用缓存（空间换时间）

• CDN 内容分发：获取更近网络节点缓存下来的静态资源
• 浏览器缓存（自带）
• 部分资源保存在LocalStorage或者APP缓存中（手动操作）

其他

• SSR 服务端渲染：解决SPA框架带来JS动态渲染页面带来的延迟和白屏问题。

这些都可以去实践的，难度不大。难度大的地方可能是 dom 节点成千上万的时候渲染的性能问题。这个场景遇到的很少，方案很多。不同人有不同解决方案，有功夫可以自己去尝试尝试。

上面提到很多点都可以深入到很深。由于篇幅原因，点到即止。

六、学习移动端web开发

前端现在为什么这么火？各个公司都还挺缺优秀的前端。原因在于技术红利。

移动端web流行起来之后，特别是H5和小程序，带动了多少前端就业，前端迅速取代了安卓和iOS 的大量岗位。

回到正题：所以作为前端人，移动web一般是都要接触的。不同于PC 端。

移动端有哪些东西呢？不需要全部懂，差不多知道就行了。要用的时候再去学。

• 绝对单位换相对单位：px => rem / vw / rpx
• 弹性布局：使用flex、grid布局
• hairline （1px的粗线处理）：使用伪元素 + transform: scale(倍数) 缩放线框
• WebView 环境了解下
• 安卓iOS 兼容踩坑：点击延迟、穿透、滚动不流畅、安全区域等等。
• 小程序开发相关踩坑
• JSBridge: H5 与App 通信
• H5动画制作
• 跨平台框架：react native、weex、flutter 等等

简单的说移动web 就是：html/css/js 跑在手机app 里面的WebView（web运行环境）。

小程序/公众号就是在这个基础上，将自己APP里面的WebView 租售给其他人使用。

微信APP ----- 提供SDK ----> 微信webview ----- 提供运行环境-----> 公众号h5 / 小程序

为什么微信可以容纳几乎无限的H5/小程序页面呢？

因为公众号/小程序的代码都存储在云端，通过不同的路由就可以给几乎无数的开发者使用。

使得微信成为一个运行环境+入口的存在。

https://mp.weixin.qq.com/s/dW9-6iTB8xoSUwRrS7IVNQ

淘系前端工程师要求

这是我在掘金上看到的一个关于淘系前端工程师P6/P7的JD，可以参考

熟练掌握JavaScript。

初级：

• JavaScript各种概念都得了解，《JavaScript语言精粹》这本书的目录都得有概念，并且这些核心点都能脱口而出是什么。这里列举一些做参考：
• 知道组合寄生继承，知道class继承。
• 知道怎么创建类function + class。
• 知道闭包在实际场景中怎么用，常见的坑。
• 知道模块是什么，怎么用。
• 知道event loop是什么，能举例说明event loop怎么影响平时的编码。
• 掌握基础数据结构，比如堆、栈、树，并了解这些数据结构计算机基础中的作用。
• 知道ES6数组相关方法，比如forEach，map，reduce。

中级：

• 知道class继承与组合寄生继承的差别，并能举例说明。
• 知道event loop原理，知道宏微任务，并且能从个人理解层面说出为什么要区分。知道node和浏览器在实现loop时候的差别。
• 能将继承、作用域、闭包、模块这些概念融汇贯通，并且结合实际例子说明这几个概念怎样结合在一起。
• 能脱口而出2种以上设计模式的核心思想，并结合js语言特性举例或口喷基础实现。
• 掌握一些基础算法核心思想或简单算法问题，比如排序，大数相加。

熟悉各种Web前端技术，包括HTML/XML/CSS等，有基于Ajax的前端应用开发经验。

初级：

• HTML方面包括但不限于：语义化标签，history api，storage，ajax2.0等。
• CSS方面包括但不限于：文档流，重绘重排，flex，BFC，IFC，before/after，动画，keyframe，画三角，优先级矩阵等。
• 知道axios或同级别网络请求库，知道axios的核心功能。
• 能口喷xhr用法，知道网络请求相关技术和技术底层，包括但不限于：content-type，不同type的作用；restful设计理念；cors处理方案，以及浏览器和服务端执行流程；口喷文件上传实现；
• 知道如何完成登陆模块，包括但不限于：登陆表单如何实现；cookie登录态维护方案；token base登录态方案；session概念；

中级：

• HTML方面能够结合各个浏览器api描述常用类库的实现。
• css方面能够结合各个概念，说明白网上那些hack方案或优化方案的原理。
• 能说明白接口请求的前后端整体架构和流程，包括：业务代码，浏览器原理，http协议，服务端接入层，rpc服务调用，负载均衡。
• 知道websocket用法，包括但不限于：鉴权，房间分配，心跳机制，重连方案等。
• 知道pc端与移动端登录态维护方案，知道token base登录态实现细节，知道服务端session控制实现，关键字：refresh token。
• 知道oauth2.0轻量与完整实现原理。
• 知道移动端api请求与socket如何通过native发送，知道如何与native进行数据交互，知道ios与安卓jsbridge实现原理。

高级：

• 知道移动端webview和基础能力，包括但不限于：iOS端uiwebview与wkwebview差异；webview资源加载优化方案；webview池管理方案；native路由等。
• 登陆抽象层，能够给出完整的前后端对用户体系的整体技术架构设计，满足多业务形态用户体系统一。考虑跨域名、多组织架构、跨端、用户态开放等场景。
• mock方案，能够设计出满足各种场景需要的mock数据方案，同时能说出对前后端分离的理解。考虑mock方案的通用性、场景覆盖度，以及代码或工程侵入程度。
• 埋点方案，能够说明白前端埋点方案技术底层实现，以及技术选型原理。能够设计出基于埋点的数据采集和分析方案，关键字包括：分桶策略，采样率，时序性，数据仓库，数据清洗等。

熟练掌握React前端框架，了解技术底层。同时了解vue以及angular等其他框架者优先。

初级：

• 知道react常见优化方案，脱口而出常用生命周期，知道他们是干什么的。
• 知道react大致实现思路，能对比react和js控制原生dom的差异，能口喷一个简化版的react。
• 知道diff算法大致实现思路。
• 对state和props有自己的使用心得，结合受控组件、hoc等特性描述，需要说明各种方案的适用场景。
• 以上几点react替换为vue或angular同样适用。

中级：

• 能说明白为什么要实现fiber，以及可能带来的坑。
• 能说明白为什么要实现hook。
• 能说明白为什么要用immutable，以及用或者不用的考虑。
• 知道react不常用的特性，比如context，portal。
• 能用自己的理解说明白react like框架的本质，能说明白如何让这些框架共存。

高级：

• 能设计出框架无关的技术架构。包括但不限于：
• 说明如何解决可能存在的冲突问题，需要结合实际案例。
• 能说明架构分层逻辑、各层的核心模块，以及核心模块要解决的问题。能结合实际场景例举一些坑或者优雅的处理方案则更佳。

熟练掌握react生态常用工具，redux/react-router等。

初级：

• 知道react-router，redux，redux-thunk，react-redux，immutable，antd或同级别社区组件库。
• 知道vue和angular对应全家桶分别有哪些。
• 知道浏览器react相关插件有什么，怎么用。
• 知道react-router v3/v4的差异。
• 知道antd组件化设计思路。
• 知道thunk干嘛用的，怎么实现的。

中级：

• 看过全家桶源码，不要求每行都看，但是知道核心实现原理和底层依赖。能口喷几行关键代码把对应类库实现即达标。
• 能从数据驱动角度透彻的说明白redux，能够口喷原生js和redux结合要怎么做。
• 能结合redux，vuex，mobx等数据流谈谈自己对vue和react的异同。

高级：

• 有基于全家桶构建复杂应用的经验，比如最近很火的微前端和这些类库结合的时候要注意什么，会有什么坑，怎么解决

熟悉常用工程化工具，掌握模块化思想和技术实现方案。

初级：

• 知道webpack，rollup以及他们适用的场景。
• 知道webpack v4和v3的区别。
• 脱口而出webpack基础配置。
• 知道webpack打包结果的代码结构和执行流程，知道index.js，runtime.js是干嘛的。
• 知道amd，cmd，commonjs，es module分别是什么。
• 知道所有模块化标准定义一个模块怎么写。给出2个文件，能口喷一段代码完成模块打包和执行的核心逻辑。

中级：

• 知道webpack打包链路，知道plugin生命周期，知道怎么写一个plugin和loader。
• 知道常见loader做了什么事情，能几句话说明白，比如babel-loader，vue-loader。
• 能结合性能优化聊webpack配置怎么做，能清楚说明白核心要点有哪些，并说明解决什么问题，需要哪些外部依赖，比如cdn，接入层等。
• 了解异步模块加载的实现原理，能口喷代码实现核心逻辑。

高级：

• 能设计出或具体说明白团队研发基础设施。具体包括但不限于：
• 项目脚手架搭建，及如何以工具形态共享。
• 团队eslint规范如何设计，及如何统一更新。
• 工具化打包发布流程，包括本地调试、云构建、线上发布体系、一键部署能力。同时，方案不仅限于前端工程部分，包含相关服务端基础设施，比如cdn服务搭建，接入层缓存方案设计，域名管控等。
• 客户端缓存及预加载方案。

有良好的编码习惯，对前端技术有持续的热情，个性乐观开朗，逻辑性强，善于和各种背景的人合作。

初级：

• 知道eslint，以及如何与工程配合使用。
• 了解近3年前端较重要的更新事件。
• 面试过程中遇到答不出来的问题，能从逻辑分析上给出大致的思考路径。
• 知道几个热门的国内外前端技术网站，同时能例举几个面试过程中的核心点是从哪里看到的。

高级：

• 在团队内推行eslint，并给出工程化解决方案。
• 面试过程思路清晰，面试官给出关键字，能够快速反应出相关的技术要点，但是也要避免滔滔不绝，说一堆无关紧要的东西。举例来说，当时勾股老师面试我的时候，问了我一个左图右文的布局做法，我的回答是：我自己总结过7种方案，其中比较好用的是基于BFC的，float的以及flex的三种。之后把关键css口喷了一下，然后css就面完了。

具有TS/移动设备上前端开发/NodeJS/服务端开发等经验者优先。

根据了解的深度分初/中/高级。

知道TS是什么，为什么要用TS，有TS工程化实践经验。

知道移动端前端常见问题，包括但不限于：rem + 1px方案；预加载；jsbridge原理等。

能说出大概的服务端技术，包括但不限于：docker；k8s；rpc原理；中后台架构分层；缓存处理；分布式；响应式编程等。

掌握图形学，webgl或熟练使用threejs框架，熟练canvas相关渲染及动画操作的优先。

初级：

• 学习过图形学相关知识，知道矩阵等数学原理在动画中的作用，知道三维场景需要的最基础的构成，能用threejs搭3d场景，知道webgl和threejs的关系。
• 知道canvas是干嘛的，聊到旋转能说出canvas的api。
• 知道css动画，css动画属性知道关键字和用法(换句话说，电话面试会当场出题要求口喷css动画，至少能说对大概，而不是回答百度一下就会用)。
• 知道js动画，能说出1~2个社区js动画库，知道js动画和css动画优缺点以及适用场景。
• 知道raf和其他达到60fps的方法。

中级：

• 如果没有threejs，你也能基于webgl自己封装一个简单的threejs出来。
• 聊到原理能说出四元数，聊到鼠标操作能提到节流，聊到性能能提到restore，聊到帧说出raf和timeout的区别，以及各自在优化时候的作用。
• 知道怎样在移动端处理加载问题，渲染性能问题。
• 知道如何结合native能力优化性能。
• 知道如何排查性能问题。对chrome动画、3d、传感器调试十分了解。

高级：

• 搭建过整套资源加载优化方案，能说明白整体方案的各个细节，包括前端、客户端、服务端分别需要实现哪些功能点、依赖哪些基础能力，以及如何配合。
• 设计并实现过前端动画引擎，能说明白一个复杂互动项目的技术架构，知道需要哪些核心模块，以及这些模块间如何配合。
• 有自己实现的动画相关技术方案产出，这套技术方案必须是解决明确的业务或技术难点问题的。为了业务快速落地而封装一个库，不算这里的技术方案。如果有类似社区方案，必须能从原理上说明白和竞品的差异，各自优劣，以及技术选型的原因。