月影：我对前端技术更新的看法以及未来发展趋势预测

作者 | 小智

前端开发如何看待“别更新了，学不动了”？Deno、TypeScript 等新轮子层出不穷，未来前端重点方向在哪？前端开发在大前端浪潮下如何持续学习、成长？带着这些问题，InfoQ 记者采访了 360 大前端团队奇舞团团长月影，他也将奇舞团的故事和个人经验毫无保留地分享给了大家。

奇舞团，一个开始于 9 年前的前端故事

2011 年 7 月 5 日，360 奇舞团成立，至今已有九年。这个由 360 公司应用开发部成立的前端团队，最初定位是支持 360 的部分核心业务和一些创新孵化类业务的前端工作。而今，她已经成为 360 技术中台的大前端团队，以 Web 前端为主，包含部分产品和 UI 设计、Android 和 iOS 开发等核心岗位，同时本身也升级成为了公司对内、对外的技术品牌和技术平台，而不仅仅只是一个技术团队。

每年的 7 月 5 日是奇舞团的奇舞节，这个推崇技术创新的团队，在支持好公司业务的同时，也孵化了优秀的开源项目和技术产品，目前旗下比较成熟的开源项目和技术产品有 SpriteJS、ThinkJS、声享、即视、众成翻译、奇舞学院等等。奇舞团同时还是国内前端行业具备技术影响力的团队，有自己的技术公众号“奇舞周刊”，还有 QiShare、aTaller 等优质的技术分享品牌。此外与图灵、博文视点等出版商保持良好的合作关系，近年来翻译了十余本技术相关的书籍，崇尚开放精神和自由分享，鼓励技术创作和翻译。

目前团队在使用技术栈上没有强制要求，不过大部分业务使用 Vue 和 React，BFF 和部分产品的服务端采用 Node.js 技术。由于产品和业务的技术特点，奇舞团对特定领域的一些技术也颇有研究，比如视频编解码、GPU 和 WebGL 渲染、Flutter、小程序等等。奇舞团的技术风格是崇尚创新，研究前沿技术，不怕重复造轮子，鼓励站在巨人的肩膀上对技术和解决方案进行持续改进。

SpriteJS 3.0 的特性和规划

SpriteJS 是由 360 奇舞团开源的跨平台高性能图形系统，它能够支持 web、node、桌面应用和小程序的图形绘制和实现各种动画效果，不久前刚发布了 3.0 版本。与 SpriteJS 2.0 相比，SpriteJS 3.0 是真正优先使用 WebGL2 和 WebGL 进行渲染的跨平台图形系统。3.0 版本针对可视化的 2D 渲染做了专门的优化，能够自动合并大量的元素进行渲染，从而大大提升渲染效率。与 2.0 相比，3.0 是更加纯粹的渲染引擎，弱化了 2.0 提供的文字排版、Flex 布局等功能，专注于提升图形渲染的性能。

SpriteJS 3.0 同样保持了对 DOM API 极高的相似度，因此对 d3.js 这样数据驱动文档的可视化工具非常友好，而在图形渲染方面，由于 3.0 使用 GPU 渲染并针对可视化做了大量优化，使得它的渲染性能要大大超过了 2.0，在极端情况下达到十倍甚至百倍的提升。在渲染大量元素的时候，3.0 基本上可以在普通的 PC 电脑上处理画布上数以百万计的元素节点，轻松实现酷炫的粒子动画视觉效果。

此外，SpriteJS 3.0 在现代浏览器中支持 Offscreen Canvas 和 WebWorker，能够在 Worker 线程中渲染，不会阻塞主线程而影响用户交互。

SpriteJS 3.0 通过扩展支持真正 3D 渲染，3D 扩展的底层是基于轻量级的 Ogl 框架，使用上简洁高效，性能优良。整体功能上虽然不如 ThreeJS 这样的老牌库，但胜在 API 设计更简单，尤其是配合 d3.js 使用，非常的方便，所以适合于大多数可视化开发的 3D 渲染场景。

在未来，SpriteJS 会考虑进一步压榨渲染性能，比如使用 Web Assembly 重写矩阵运算库，让底层运算的性能进一步提升，改良一些渲染的算法，在内存方面尽量直接映射数据并操作 ArrayBuffer，以节约内存。在应用方面，考虑实现 Vue 3 的 runtime，直接支持 Vue 3 的应用。在 3D 方面，减少与 ThreeJS、BabylonJS 的能力上的差距，让 3D 渲染能力变得更强大。

如何看待 Deno、TS 和未来的前端重点方向？

最近几年流行的编程语言很多都号称是 JavaScript 的替代语言，比如 TypeScript。前端三大框架现在也基本都增加了对 TypeScript 的支持，这背后的本质原因是什么？

月影认为，近几年 JavaScript 的语言标准发展很快，这背后依托的依然是 Web 应用领域的高速发展，JavaScript 是 Web 领域事实上的“原生语言”和技术标准，很多编程语言都是 JS 的衍生语言。在他看来，TypeScript 是一个很优秀的编程语言，其静态类型对一些规模较大的项目提高代码的可维护性很有帮助，因此现在写 TS 的开发者越来越多，三大框架增加对其支持是顺其自然的事。

奇舞团很多项目也有采用 TS，内部也鼓励大家尝试和使用 TS 技术。SpriteJS 也提供了 TypeScript 的 typings，方便 TS 开发者使用。

近期，Deno 也发布了正式的 1.0 版本。月影认为它是一个很好的 Runtime，在 Node.js 之后走了另外一条道路，规避了 Node.js 设计上的不足之处。月影认为未来 Deno 不见得会取代 Node，很有可能出现一种两者并存共同发展的态势。但是 Deno 的设计本身就是建立在对 Node 的思考和改进之上的，所以学习它，对于理解 Node.js 的精髓也非常有帮助。他表示个人对 Deno 的接触不多，但是有机会会去深入地学习和使用它。

有趣的是，日前 Deno 官方公布的一份文档指出，出于对当前环境的实际考虑，Deno 将停止在内部代码中继续使用 TypeScript。文档中提到的问题涉及 TypeScript 编译时间、结构以及代码组织方式等。未来，Deno 项目将使用纯 JavaScript 编写内部代码。

Deno 将停止使用 TypeScript，并公布五项具体理由

https://www.infoq.cn/article/U72qTZtGaZTTFAzZiHbZ

月影表示自己这两年的主要精力放在可视化领域，主要是可视化渲染方面，他认为可视化是值得前端工程师重视的一个领域。随着 Web 技术的发展，视觉特别是 WebGL/GPU 相关的应用场景会越来越丰富，对技术要求也会越来越高。与前端其他大部分技术不同，WebGL 的上手门槛比较高，需要对数学、图形学有比较扎实的基础，而图形学和视觉呈现技术本身的天花板非常高，未来这块一定会有非常大的发展空间。

AI 以及 VR/AR 也是未来前端的发展方向，对于 VR/AR，主流浏览器也开始支持 webXR 技术，应当予以关注，而且无论 AI 还是 XR 这些领域，其实也和 GPU 息息相关，所以它们和可视化技术也是有关联的。

跨端技术，从 RN 到 Flutter，经过了很多的发展，但是还远未成熟，而跨端本来就有很多应用场景，未来依然有很大的成长空间。PC 端的 Electron 也不容忽视，作为跨平台应用开发，它是一个非常好用的工具。

Web Assembly、JS Binding，一些跨界交叉的领域往往有些前沿的东西，同样值得前端开发者关注。

别更新了，学不动了？

曾经有位前端技术专家表示，“前端十八个月难度翻一番”，此言道出了前端领域更新换代之快背后的前端开发血泪史。也因此，“别更新了，学不动了”这句话成为了不少前端开发玩梗的口头禅。

月影表示他个人属于技术发展的越多越快越兴奋的类型。他喜欢研究技术，尝试新东西，不怕学习，更没有学不动这种感觉。

我一直觉得，如果一个行业的新东西层出不穷，说明这个行业一直在高速发展，这本身对于从业者来说是一个非常好的事情，因为这说明这个行业中有更多的机会和成长空间。

对于一些前端开发的担忧，他也能够理解。他认为，如果你 不盲目 地去追求所谓的“时髦”技术，不去刻意担心自己是否落伍，而是去多观察这个行业，找到技术发展内在的规律和脉络，那么你就知道该如何前进，不会有任何恐慌。

在任何一个领域或方向，知识体系都可以大体上分为基础知识和领域知识，而领域知识又可以分为通用领域知识和专用领域知识。二者的变化是不一样的，基础知识的变化最慢，其次是通用领域知识，然后是专用领域知识。

用可视化这个方向来举例，基础知识是数学和图形学知识，比如向量、矩阵运算、三角剖分这些知识属于基础知识，它们基本上不会随着时间发生很大变化。JavaScript、WebGL 这种属于通用领域知识，它们会改变，会慢慢发展，比如从 WebGL1.0 发展到 WebGL2.0，从 ES2019 发展到 ES2020，但不会变化、发展得那么快。而类似 ThreeJS、BabylonJS、SpriteJS、d3.js，这些属于专用领域知识，很有可能一个大版本升级，就会有很大的变化。

学习这些知识，也是有不同的方法的。一般来说，如果是基础知识，随便什么时候都可以学，而且越早学习越好。基础知识就像是你的内功，学好它们，融会贯通之后，学习其他的知识都是事半功倍的。如果是通用的领域知识，一旦你下决心从事这个领域，也是能够尽早学习它比较好，不过由于这些知识是领域相关的，如果能一边学习，一边通过实践来打磨，就会掌握得更快。专用领域知识，不一定要很早去学，有一个技巧是，当你用到的时候再去学习它们。如果你没有用到，你可以知道有这门技术，能做什么就行了，不用花大量时间和精力去钻研它们。

有些同学觉得技术更新太快，学不过来，通常是被这些专用领域知识给“迷惑”了。比如大家都说前端工程化里的代码打包很重要，于是今天学习了 webpack，明天又去学习 rollup，而实际上这种专用领域知识，只需要知道它们能做什么，在用到的时候再去详细学习就好了。

给前端开发的一些真诚建议

月影作为前端领域的多年从业者，技术管理者，也为 InfoQ 的读者朋友给出了自己的经验总结和真诚建议。

首先，确定你自己真正喜欢和热爱前端开发这门职业。大多数同学成为前端工程师，内心是真正喜欢这个职业的。但是，之前也听到过有同学，因为觉得在程序员中前端比较“简单”，或者觉得自己数学或算法基础不好，做前端对这些要求不高，再或者就是觉得前端工程师算是份体面的职业，所以选择它，内心中并没有真正热爱这个职业。如果你心中没有真正热爱前端，仅仅把它当做一份谋生的工作的话，那么你可能在这个职业道路上走不了多远，也无法达到很高的高度。所以如果有这种情况，你需要反思一下自己是否真的适合前端开发这个职业。

如果你确实热爱这份职业，考虑长远的发展，最好选择一个好的平台，一个技术氛围好的团队，一份节奏合适的工作，这里的节奏合适指的是忙闲交替，既不会长时间持续特别忙，又不会特别闲。在这样的节奏下，项目积累再加上自己的学习沉淀，可以比较快速地成长，而技术氛围好的团队，可以让自己的学习沉淀速度更快。

要在专业上达到一定的高度，每个人的情况是不一样的，要根据自己的情况来规划。不过有一些共通点，一般来说，自我的成长需要能够找到并突破前端领域的“边界”，这个边界可以是某个有深度的领域，深入到其中的技术前沿，也可以是某个交叉领域比如与服务端的交界，与移动客户端的交界等等，在这些边界上做出突破，就可以步入前端专家的行列。

前端专家除了技术能力，也需要打造自己的个人影响力，锻炼自己的领导力，要让自己心态开放、眼界开阔，不排斥新技术，拥抱开源，多参与社区，这样的话，在职业之路上就可以到达一个比较高的高度。

最后，希望各位都能成为优秀的前端专家，让我们一起将前端行业变得更好。

为你推荐

InfoQ Pro 是 InfoQ 专为技术早期开拓者和乐于钻研的技术探险者打造的专业媒体服务平台。扫描下方二维码关注 InfoQ Pro，即可在【充电计划】中获取技术 PPT 下载链接，每周更新哟~持续关注我们，还有更多技术分享活动与干货资料，就等你来！

点个在看少个 bug 👇