8年前端总结和感想（转）~

我是牛奶，本文是我前端工作 8 年的一些总结和感想

主要记录下个人点滴、前端知识点、场景应用、未来的憧憬以及个人规划，供自己以后查漏补缺，也欢迎同道朋友交流学习。

自我介绍

我是一名工作在非知名公司的 8 年前端，双非普通本科，自动化专业（非计算机）。目前也在努力的提升自己，积极找工作状态。虽然工作已经 8 年了，但没待过超 10 人的前端团队，更没有开发过千万级、亿级流量的应用的经历，也是一种遗憾。

16 年才工作那会儿使用原生 JS 和 JQ 比较多，经常写 CSS 动画，主要做企业建站，自学了 PHP 和 ReactNative，还学过 krpano 的使用；17 年到 19 年，主要使用 react、 React Native做 H5 和跨端开发，也维护过老 NG2.x 项目；19年到22年主要使用 vue、react 做hybrid APP及小程序，自学了electron、node、MongoDB；22 年至今主要从事 B 端的开发，C端也有部分，也主要是 react 和 vue 相关技术栈；

前端应用场景

前端是直面浏览器的，也可以说是直面用户的，我们的应用场景远广泛于后端，用到的 UI 组件库、插件、基础框架、基础语言也非常繁杂，所以在面试和自我学习提升的时候需要准备的东西非常多，有种学不动的感觉。

常见的应用场景就是 PC web 浏览器，需要我们掌握一些兼容不同版本和不同浏览器的知识点，一般采取渐进增强或者优雅降级去处理；当然现在很多公司已经不做IE的兼容了，复杂度降低很多；同时大部分新项目都会使用 postcss 去 autoprefixer，给 css 加兼容的前缀。其他的就是做后台的表单为主了，用的基本上都是 antd design 或 element ui。当然复杂点的要涉及到网页编辑器、Low Code、No Code等。

另一个主要场景就是手机浏览器和 APP 了，H5 WebAPP 会遇到 Android、IOS的一些样式和行为需要兼容、列表和图片懒加载问题，还有调用原生的 SDK 进行地图、OCR、拍照、扫一扫等功能进行开发；为了更好的体验，还会选择 RN、flutter 进行跨端开发；复杂的处理场景一般涉及原生端，例如聊天室、直播等。

另一个场景就是小程序，其实还是写H5，主要是使用微信或者支付宝等相关 SDK 去实现，看官网就行了，文档也比较全。

还有一些是做 H5 小游戏，要求数学逻辑思维和算法更好点，初级一点的用 canvas+css3 去做，好一点的用游戏引擎去做，一般是 egret、 Laya、 createjs、 threejs、 cocos。

还有一些场景是做TV端的，有的是基于PC浏览器的，有些是套壳APP，一般使用 AntV、 echarts做图表数据展示，3D一般用 threejs去做。

还有一些做桌面应用的，一般来说桌面应用大多基于 C，但一些简单应用前端可以使用 electron 去进行桌面端开发，一般也用于大屏可视化，做数据展示的，当然我们熟悉的 vscode 也基于 electron 开发。

还有一些是做 AR、 VR、 3D全景图的，一般使用 WebGL3D引擎：threejs、 babylon.js、 playcanvas等，还可以用 css3d-engine、 krpano、 pano2vr去做。

还有一些场景是做 web3 的 DAPP（去中心化应用程序），大部分是做区块链和数字藏品的，推荐的技术是 Solidity、 web3.js、 Ethers.js。

前端网络

我们前端不管是开发 PC、 H5、小程序、 HyBrid App 还是其他应用，始终离不开是浏览器和 web-view，与浏览器交互就要了解基础的 HTTP、网络安全、 nginx方面的知识。

浏览器

浏览器的发展简史和市场份额竞争有空可以自行了解，首先我们要了解计算机架构：

底层是机器硬件结构：简单的来说就是电脑主机+各种IO设备；复杂的来说有用于输入的鼠标键盘，用于输出的显示器、打印等设备，用于控制计算机的控制器和 CPU（核心大脑），用于存储的硬盘、内存，用于计算的CPU和GPU；
中层是操作系统：常见的就是 Windows、 MAC OS、 Linux、 CentOS，手机就是安卓和 IOS（当然还有华为的鸿蒙）；可以了解内存分配、进程和线程管理等方面知识。
上层就是我们最熟悉的应用程序：有系统自带的核心应用程序、浏览器、各个公司和开发者开发的各种应用。

前端开发必要了解的就是chrome浏览器，可以说大部分开发基于此浏览器去做的。需要了解进程和线程概念、了解chrome多进程架构（浏览器主进程、GPU进程、网络进程、渲染进程、插件进程）。

其中最主要的是要了解主进程，包含多个线程：GUI渲染线程、JS引擎线程（V8引擎）、定时触发器线程、事件线程、异步HTTP请求线程。其中V8引擎又是核心，需要了解其现有架构：

了解 JS 编译成机器可以识别的机器码的过程：简单的说就是把 JS 通过 Lexer 词法分析器分解成一系列词法 tokens，再通过 Parser 语法分析为语法树 AST，再通过 Bytecode Generator 把语法树转成二进制代码 Bytecode，二进制代码再通过实时编译 JST 编译成机器能识别的汇编代码 MachineCode 去执行。

代码的执行必然会占用大量的内存，那如何自动的把不需要使用的变量回收就叫作 GC 垃圾回收，有空可以了解其算法和回收机制。

HTTP

对于Http，我们前端首先需要了解其网络协议分层： OSI七层协议、 TCP/IP四层协议 和 五层协议，这有助于我们了解应用层和传输层及网络层的工作流程；同时我们也要了解应用层的核心 http1.0、 http1.1、 http2.0 及 https 的区别；还要了解传输层的 TCP、 UDP、 webSocket。

在前后端交互方面必须了解 GET 和 POST 的请求方式，以及浏览器返回状态 200、 3xx、 4xx、 5xx的区别；还有前后端通信传输的 request header 头、响应报文体 response body，通信的 session 和 cookie。
网络安全方面需要了解 https，了解非对称算法 rsa 和对称算法 des，登录认证的 JWT（JSON Web Token）；同时也需要了解怎么防范 XSS、 CSRF、 SQL注入、 URL跳转漏洞、 点击劫持 和 OS命令注入攻击。

Nginx

我们的网页都是存储在 web 服务器上的，公司一般都会进行 nginx 的配置，可以对资源进行 gzip 压缩，redirect 重定向，解决 CROS 跨域问题，配置 history 路由拦截。技术方面，我们还要了解其安装、常用命令、反向代理、正向代理和负载均衡。

前端三剑客

前端简单的说就是在写 html、 css 和 js 的，一般来说 js 我们会更多关注，其实 html 和 css 也大有用处。

html

html 的历史可以自行了解，我们需要更关注 文档声明、各种 标签元素、 块级元素及非块级元素、 语义化、 src与href的区别、 WebStorage和 HTML5的新特性。复杂的页面和功能会更依赖于我们的 canvas。

css

css 方面主要了解布局相关 盒子模型、 position、 伪类和伪元素、 css选择器优先级、各种 水平垂直居中方法、 清除浮动、 CSS3新特性、 CSS动画、 响应式布局相关的 rem、 flex、 @media。当然也有部分公司非常重视用户的交互体验和 UI 效果，那会更依赖我们 CSS3 的使用。

JS

js 在现代开发过程中确实是最重要的，我们更关心其底层原理、使用的方法、异步的处理及 ES6 的使用。

在底层方面我们需要了解其 作用域及作用域链、 闭包、 this绑定、 原型和原型链、 继承和类、属性描述符 defineProperty 和事件循环 Event Loop。
在使用方面我们需要了解 值和类型 的判断、内置类型的 null、 undefined、 boolean、 number、 string、 object 和 symbol，其中对象类型是个复杂类型，数组、 函数、 Date、 RegExp等都是一个对象；数组的各种 API 是我们开发中最常用的，了解 Dom操作 的API也是必要的。
ES6 方面要了解 let、const声明、 块作用域、 解构赋值、 箭头函数、 class、 promise、 async await、 Set、 WeakSet、 Map、 WeakMap、 proxy 和 Reflect。
TypeScript 在前端的使用越来越广泛，如果要搞 NodeJS 基本上是标配了，而且也是大厂的标配，还是有必要学习下的。要了解 TypeScript 的安装配置、基本语法、Type、泛型<T>、Class、Interface、Enum、命名空间 和 模块。

前端框架

我们在开发过程中直接操作 dom 已经不多了，有的公司可能还要部分维护 JQ，但大多都在使用 React、 Vue、 Angular这三个基础前端框架，很多其他跨平台框架及 UI 组件库都基于此，目前来说国内React和Vue是决定的主流，我本人就更擅长React。

React

开发 react，也就是在写 all in js，或者说是 JSX，那就必须了解其底层 JSX 是如何转化成虚拟节点 VDom 的。在转换 jsx 转换成 VDom，VDom在转换成真实 Dom，react 的底层做了很多优化，其中大家熟悉的就是 Fiber、 diff、 生命周期 以及 事件绑定。

那我们写 react 都是在写组件化的东西， 组件通信的各种方式也是需要了解的；还要了解 PureComponent、 memo、 forwardRef等组件类的方法；了解 createElement、 cloneElement、 createContext等工具类的方法；了解 useState、 useEffect、 useMemo、 useCallback、 useRef等hooks的使用；还有了解 高阶组件HOC 及自定义 hooks。

了解 react16、 react17、 react18做了哪些优化。

Vue

vue 方面，我们需要了解 MVVM 原理、 template的解析、数据的 双向绑定、vue2 和 vue3 的响应式原理、其数据更新的 diff 算法；使用方面要了解其生命周期、组件通信的各种方式和 vue3 的新特性。

前端工程化

上面写到了前端框架，在使用框架开发的过程中，我们必不可少的在整个开发过程向后端看齐，工程化的思想也深入前端。代码提交时可以使用git的钩子hooks进行流水线的自动化拉取，然后使用 webpack、 rollup、 gulp以及 vite 进行代码编译打包，最后使用 jenkins、 AWS、 阿里云效等平台进行自动化部署，完成整个不同环境的打包部署流程。

webpack

在代码编译打包这块儿， webpack是最重要的，也是更复杂的，所以我们有必要多了解它。

在基础配置方面，我们要了解 mode、 entry、 output、 loader 和 plugin，其中 loader 和 plugin 是比较复杂的，webpack 默认只支持 js，那意味着要使用 es6 就要用 babel-loader，css 方面要配置 css-loader、 style-loader、 less-loader、 sass-loader等，图片文件等资源还要配置 file-loader；

plugin 方面要配置 antd 的相关配置、清空打包目录的 clean-webpack-plugin、多线程打包的 HappyPack、分包的 splitChunks 等等配置。

在不同环境配置方面要基于 cross-env 配置 devServer 和 sourcemap。

在构建优化方面要配置按需加载、 hash、 cache、 noParse、 gzip压缩、 tree-shaking 和 splitChunks等。

幸运的是，现在很多脚手架都自动的帮你配置了很多，并且支持你选择什么模版去配置。

环境部署

环境部署方面，第一家公司我用的软件 FileZilla 进行手动上传 FTP 服务器，虽然也没出过啥错，但不智能，纯依靠人工，如果项目多，时间匆忙，很容易部署错环境，而且还要手动备份数据。后面学了点终端命令，使用 SSH 远程上传文件，其实还没有软件上传来的直接，也容易出错。后面换了公司，也用上了 CI/CD 持续集成，其本质就是平台帮你自动的执行配置好的命令，有 git 拉取代码的命令、npm run build的打包命令，最后 SSH 远程存到服务器的目录文件，并重启 nginx 的 web 服务器。

CI/CD 可让持续自动化和持续监控贯穿于应用的整个生命周期（从集成和测试阶段，到交付和部署）。

后端服务

为了更好的完成整个应用，了解后端技术也是必要的，我们可以从nodejs、MongoDB、MySQL等入手。如果有余力，了解java、c#、c++也可以帮助我们更好的开发安卓和IOS应用。前后端都通了话，不管对于我们工作、面试、接活儿或者做独立开发者都是很必要的。

node

node 这方面，我们了解常用模块和 Event Loop 是必要的，框架可以选择 express、 koa、 egg。

形而上学

了解完上面的文章，基本上你就了解了整个前端大体的开发流程、所需的知识点、环境的部署、线上网络安全。但如果需要进阶且不局限于前端和后端，我们需要了解数据结构、 设计模式、 算法 和 英语。

数据结构

常见的数据结构有8种： 数组、 栈、 队列、 链表、 树、 散列表、 堆 和 图。

设计模式

设计模式方面我们需要了解：

六大原则： 单一职责原则、 开放封闭原则、 里氏替换原则、 依赖倒置原则、 接口隔离原则 和 迪米特原则（最少知道原则）
创建型设计模式： 单例模式、 原型模式、 工厂模式、 抽象工厂模式 和 建造者模式
结构型设计模式： 适配器模式、 装饰器模式、 代理模式、 外观模式、 桥接模式、 组合模式 和 享元模式
行为型设计模式： 观察者模式、 迭代器模式、 策略模式、 模板方法模式、 职责链模式、 命令模式、 备忘录模式、 状态模式、 访问者模式、 中介者模式 和 解释器模式

算法

算法方面我们需要了解：

基础概念： 时间复杂度 和 空间复杂度
排序方法：初级排序的 选择排序、 插入排序 和 冒泡排序，高级排序的 快速排序、 归并排序、 堆排序
搜索： 深��优先搜索 和 广度优先搜索
其他： 递归、 分治、 回溯、 动态规划 和 贪心算法

英语

学生时代，觉得英语离我们挺远，进社会就用不到了。现在发现学好英语非常有用，我们可以入职福利待遇比较好的外企、可以更好的看懂文档、甚至起个文件名和变量名都好的多。最近我也在用多邻国学英语，目标是能进行简单的商务交流和国外旅游，还能在未来辅导下孩子英语作业。

前端未来

目前，初级前端确实饱和了，各个公司对前端已经不像我入职第一家公司那样简单就可以找到工作的了，尤其是在这个各种卷的环境里，我们不得不多学习更多前端方面的知识。对于初学者，我建议更多的了解计算机基础、js原理、框架的底层；对于已经工作一俩年想提升的，不妨多学点跨端、跨平台技术，还有后端的一些技术；对于工作多年想让未来路子更宽的，不得不内卷的学习更多的应用场景所需要的知识。

关于AI，我觉得并不是会代替我们的工具，反而缩小了我们和资深前端的距离。我们可以借助AI翻译国外的一些技术文档，学习更新的技术；可以帮我们进行代码纠错；还可以帮助我们实现复杂的算法和逻辑；善用 AI，让它成为我们的利器；