8年前端总结和感想
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 浏览器，需要我们掌握一些兼容不同版本和不同浏览器的知识点，一般采取渐进增强或者优雅降级去处理；当然现在很多公司已经不做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。可以详看我写的javascript随笔
- 在使用方面我们需要了解
值和类型的判断、内置类型的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。可以详看我写的(ES6+)随笔
TypeScript在前端的使用越来越广泛，如果要搞NodeJS基本上是标配了，而且也是大厂的标配，还是有必要学习下的。要了解TypeScript的安装配置、基本语法、Type、泛型<T>、Class、Interface、Enum、命名空间和模块。可以详看我写的typescript随笔
前端框架
我们在开发过程中直接操作 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随笔 和 使用rollup搭建工具库并上传npm
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，还有我最近刚学的NestJS也非常不错。
形而上学
了解完上面的文章，基本上你就了解了整个前端大体的开发流程、所需的知识点、环境的部署、线上网络安全。但如果需要进阶且不局限于前端和后端，我们需要了解数据结构、 设计模式、 算法 和 英语。
数据结构
常见的数据结构有8种： 数组、 栈、 队列、 链表、 树、 散列表、 堆 和 图。
可以详看我写的算法随笔-数据结构(栈)
可以详看我写的算法随笔-数据结构(队列)
设计模式
设计模式方面我们需要了解：
- 六大原则：
单一职责原则、开放封闭原则、里氏替换原则、依赖倒置原则、接口隔离原则和迪米特原则（最少知道原则） - 创建型设计模式：
单例模式、原型模式、工厂模式、抽象工厂模式和建造者模式 - 结构型设计模式：
适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式和享元模式 - 行为型设计模式：
观察者模式、迭代器模式、策略模式、模板方法模式、职责链模式、命令模式、备忘录模式、状态模式、访问者模式、中介者模式和解释器模式
算法
算法方面我们需要了解：
- 基础概念：
时间复杂度和空间复杂度 - 排序方法：初级排序的
选择排序、插入排序和冒泡排序，高级排序的快速排序、归并排序、堆排序 - 搜索：
深度优先搜索和广度优先搜索 - 其他：
递归、分治、回溯、动态规划和贪心算法
可以详看我写的算法随笔-基础知识
英语
学生时代，觉得英语离我们挺远，进社会就用不到了。现在发现学好英语非常有用，我们可以入职福利待遇比较好的外企、可以更好的看懂文档、甚至起个文件名和变量名都好的多。最近我也在用多邻国学英语，目标是能进行简单的商务交流和国外旅游，还能在未来辅导下孩子英语作业。
前端未来
目前，初级前端确实饱和了，各个公司对前端已经不像我入职第一家公司那样简单就可以找到工作的了，尤其是在这个各种卷的环境里，我们不得不多学习更多前端方面的知识。对于初学者，我建议更多的了解计算机基础、js原理、框架的底层；对于已经工作一俩年想提升的，不妨多学点跨端、跨平台技术，还有后端的一些技术；对于工作多年想让未来路子更宽的，不得不内卷的学习更多的应用场景所需要的知识。
关于AI，我觉得并不是会代替我们的工具，反而缩小了我们和资深前端的距离。我们可以借助AI翻译国外的一些技术文档，学习更新的技术；可以帮我们进行代码纠错；还可以帮助我们实现复杂的算法和逻辑；善用 AI，让它成为我们的利器；
感想和个人规划
前端很复杂，并不是像很多后端所说的那么简单，处理的复杂度和应对多样的客户群都是比较大的挑战。资深的前端能很快的完成任务需求开发、并保证代码质量，并搭建更好的基础架构，但就业行情的不景气让我一度很迷茫，我们大龄程序员的出路在哪里，经验就不值钱了嘛？
对于未来，我会更多的学习英语、学习后端，向独立开发者转型。
谨以此文，献给未来的自己和同道中人！
来源：juejin.cn/post/7387420922809942035
