关于做前端的发展方向

做前端也有时间了，或多或少迷茫在重复的页面搭建之中，那么在前端方面，除了做做网页，还有哪些进阶的方面可以发展，这里想和大家探讨一下。

先申明，这里的前端指的是常用 html、css 和 js 的开发人员，android、ios、uwp 等其他不包含在内，当然中间会有相通的地方也可以一起讨论。我根据自己的经验和知识先写几个，不做深入、可能有谬误的地方：

1. 工程化 这个可能是比较容易造轮子的方面，我理解工程化的目的是提升开发效率、降低维护成本和及提供自测、监控及排查错误的能力，让开发人员能够从重复、繁重的劳动中解放出来。目前在各个环节或多或少都有一些较为成熟的解决方案，然而还是有很多可以挖掘的地方。

2. 图像处理 首先是 opengl、webgl 的基础知识，建模和顶点的优化一般通过三方软件完成，需要一点基础的数学知识、如矩阵、向量、归一化的概念，理解投影矩阵、变换矩阵等原理，接着是后处理，如滤镜、识别。滤镜就是 glsl 的算法问题，关于 vertex 和 fragment 的操作，首先是顶点变换，其次是颜色处理，这其中要了解关于色彩、色域的基本知识、rgb、hsl 的应用与转换，接着可以做一些基本的 PS 图形操作，如变亮、变暗、增强对比度，这也会帮助你理解 ps 中曲线的意义。最后就是磨各种算法了...图像识别可以需要了解一些轮廓算法、聚类算法等，这个就比较专业化... 当然处理图像你不一定真的需要 webgl，css 也提供了很多 api 可以给你使用，如 mask、blend mode、filter 等，组合使用你可以获得许多意想不到的想过。 当然我个人觉得你用 canvas 2d 去实现一些 css 或者 webgl 很方面的效果能够更加加深你对这方面的理解，举个很简单的例子，用 canvas 2d 实现 css 中的 border 和 border-radius。 只有你对这些理解深刻了，你才能在项目性能遇到瓶颈的时候找到根结和优化的方法所在。 会图像处理就可以玩很多啦，譬如在 b 站你可以给视频加奇怪的效果，如果 b 站愿意存储你写的特效代码，cdn 只需要同一份视频源，就可以变出更多的视频来。

3. 语音处理 与图像处理是通用的，数学、线代是基础，然后是通信方面的知识，至少要知道频域、时域及滤波器的概念，然后就可以通过算法针对性地对声音做处理。应用方向很多啦，可以是声音的合成、实时声音的美化，如降噪、变声等，其实就是对振幅、频率的变换。也可以做语音识别。至少自己写一个在线谱曲（当然如果你有 nb 的音源）或者后处理的软件。

4. 视频处理 视频处理的后处理可以看作图像处理和语音处理的结合，除此之外就是视频的编码、解码，参照 ffmpeg。在对这些有一定的基础了解之后，就能理解 media source api 中的 source、decoder、destination 等含义，知道在哪里可以实现你的需求，本质上流程不会有太大的差别。

5. webassembly 这方面比较宽泛，难以概述，你都可以在里面跑操作系统了，理论上你可以做任何事。当然现在比较应用多的场景还是针对一些有性能要求的场景，如物理引擎、加密解密、二维码识别等。webassembly 只是一个工具，在你专业领域内的任何实现都可以通过它在 web 上找到桥接的路径。

6. 服务端 这方面做的不多，我的理解目前主要是通过 nodejs 去实现一些中间层以及服务端渲染，做一些比较轻量化的解决方案，重头部分可能还得和其他语言的解决方案做结合。说到服务端渲染，目前还是输出 html 的形式，未来的一条路径是离线“真”渲染，在 5G、6G 可能的后时代，网页、视频、3D 的渲染全部在服务端完成，前端只是提交交互的行为，与服务端的通信主要是图形数据，就像看视频一样，当然这个比较遥远，到时候甚至可能会有专门的语言去做这个事情。

7. 客户端 这里的客户端范围比较广泛，不仅指 pc、包括手机系统如安卓、ios，还有智能眼镜、语音助手、贩卖机（ yes 我做过）等各种可能的终端系统。这里面有几个点，第一个是硬件的通信、底层的部分可能是通过 c 实现，js 更多做的还是交互、逻辑和数据的处理。第二个是运行环境，在终端上必须有能够执行 js 的环境，如何通过不同的终端能够编译、部署、执行，找到一种通用的跨多端的解决方案。

8. 游戏 这部分其实结合了上面将的几个点，而且现在一些主流的游戏引擎如 unity 等都有直接导出 html5 的方案，但是如果真要从 js 入手，从零开始手撸一个引擎，那可能要先了解譬如 sprite、scene、stage、camera、world 等通用概念，然后是考虑用 mvc，还是 ecs 架构。这方面可以先从一个流行的游戏编辑器入手，你可以从 unity 借鉴、也可以从魔兽编辑器借鉴。话说魔兽编辑器虽然是上古时代的东西，但是真的很有一些借鉴意义。关于游戏要说的太多，这方面专业的游戏从业者应该可以给到更多的借鉴意义。

9. 其他 webrtc 等，其他可以补充。

以上都是一些概览的概览，仔细看下，其实瓶颈都不在前端，而在于其他方面的专业知识。所以在前端在技术方面有更多的技术，还是要多看、多学习，特别是其他行业和专业的知识。可能你觉得在大学或者大专学习的一些不起眼的技术在前端方面别有一番天地呢？