**互动生产力进化之路 | 618 淘系前端技术分享**

2020年618大促已经过去，作为淘系每年重要的大促活动，淘系前端在其中扮演着什么样的角色，如何保证大促的平稳进行？又在其中应用了哪些新技术？淘系前端团队特此举办了 618 系列征文，为大家介绍 618 中的前端身影。

本篇来自于 淘系互动 前端团队，今年我们带来了名为“幸运列车”的全新互动游戏。在技术架构和前端优化方面做了一次大升级，与往年相比，其整体性能和可扩展性都得到了极大提升。下面，我们从架构、性能、可扩展性、开发体验四个方面来介绍此次“幸运列车”游戏中的前端技术演进。

技术架构

本届“幸运列车”游戏采用无服务架构设计，技术栈主要包含 Serverless（Serverless Framework）、Node.js、Egg.js，相比于传统的 LAMP 架构，无服务架构具有免运维、按需付费、极致弹性等优点。在架构设计上，我们把游戏的前后端拆分成了两部分，前端只负责渲染 UI，而与业务逻辑相关的代码都部署在后端，后端则通过 Serverless 的 HTTP 触发器来进行服务发现。

性能优化

针对前端性能优化，我们主要从减少首屏加载时间、优化渲染机制、降低内存占用三个方面进行改进。在减少首屏加载时间方面，我们对资源进行按需加载，只加载用户当前看到的内容，减少不必要的资源请求；同时，我们还对资源进行了压缩，减小了资源的大小。在优化渲染机制方面，我们采用虚拟 DOM + Diff 算法，只更新需要更新的 DOM 节点，提高了渲染效率；同时，我们还使用 WebGL 进行 3D 渲染，提升了渲染效果。在降低内存占用方面，我们使用内存泄露检测工具，及时发现并修复内存泄露问题；同时，我们还对资源进行缓存，避免重复加载，降低了内存占用。

可扩展性

在可扩展性方面，我们主要从代码复用、组件化、微服务三个方面进行改进。在代码复用方面，我们把游戏中公共的代码提取出来，形成一个公共组件库，其他模块可以通过依赖该组件库来实现代码复用；同时，我们还把游戏中的各个模块拆分成一个个独立的微服务，通过 HTTP 协议进行通信，提高了系统的可扩展性。

开发体验

在开发体验方面，我们主要从代码规范、自动化测试、持续集成三个方面进行改进。在代码规范方面，我们制定了统一的代码风格规范，并使用代码检查工具来确保代码风格的一致性；同时，我们还使用代码生成工具，减少了重复性的代码编写，提高了开发效率。在自动化测试方面，我们使用单元测试、集成测试、端到端测试来保证代码的质量；同时，我们还使用自动化测试平台，实现自动化的测试执行，提高了测试效率。在持续集成方面，我们使用持续集成工具，实现了代码的自动编译、测试、部署，提高了开发效率。

总结

通过以上四方面的技术演进，“幸运列车”游戏的前端性能和可扩展性都得到了极大提升，开发体验也得到了优化。未来，淘系互动前端团队将继续探索新的技术，为用户带来更丰富的互动体验。