Javascript库可快速呈现数千个DOM元素

Question

我最近一直在使用JavaScript，并且正在创建一个网络游戏（纯HTML + CSS + JS，没有服务器后端）。该游戏的主要目的是与角色一起在2D地图上行走。（类似于https://alexnisnevich.github.io/untrusted/）。

我当前的堆栈是：

• 用TypeScript编写的代码
• AngularJS渲染
• 和LESS +丑陋的一些缩小

我创建了一些基本功能，现在将地图大小从10x10（100个DOM元素）增加到100x100（10000 DOM元素）。这就是Angular受苦的地方。ng-repeat指令需要大约5秒钟的时间来渲染这么多元素（而100x100对我来说是一张小地图，我希望用户可以进入更大的环境）

问题：

1. 看来我选择了不良的库进行渲染。当涉及到成千上万的元素时，Angular确实很慢。是否有任何更快的库可以渲染更多元素（并重新渲染那些已更改的元素？它可能没有检查，我手动启动对已更改元素的渲染没有问题）
2. 还是我选择DOM元素作为地图错误？我应该改用帆布吗？我使用DOM元素的主要原因是因为我想要所有这些事件，地图上的每个字段都是可单击的，并且当鼠标悬停在该元素上时会提供工具提示。用帆布可以做到吗？有什么好的用于创建画布2D游戏的库（我从未使用过画布）？

Answer 1

我已经写了十几个HTML5游戏。为了获得最佳结果，请不要使用框架/库。与通常以十分之一的速度运行的本机应用程序相比，Javascript速度较慢。由于游戏需要大量重复的渲染操作，因此任何额外的开销都会对性能产生负面影响。

JavaScript和HTML5已经带有出色的内置API，可用于渲染，音频，视频，用户输入（键盘，鼠标，触摸等）和资源管理。框架和库只是添加了另一种抽象级别，通常，此抽象层旨在提供广泛的功能集，而大多数游戏或游戏的特定部分不需要或不使用大多数此功能。每个不需要的条件，函数调用和内存分配都会对性能产生负面影响。

也就是说，框架仍然有空间。但这仅应用于设置和浏览器兼容性。jQuery是为此目的（而不是为了速度）而设计的。使用JQuery加载和设置页面，然后进入游戏循环，请勿使用jquery。仅将其用于游戏的非性能部分。

为了获得最佳性能，您的目标是每秒60帧。

• 不要使用DOM或CSS。创建一个canvas元素，然后输出所有内容。您将不得不使用它，但是每次触摸DOM时，您都会杀死20多个游戏精灵/实体/实体。
• 直接使用canvas 2D API或webGL（webGL更快，但具有更复杂的API）。
• 不要使用SVG或canvas 2D矢量渲染调用（例如ctx.lineTo，ctx.arc），它们的速度会非常慢。如果您需要基于矢量的图形，请考虑学习webGL API
• 直接使用HTML5音频和视频API。它们功能强大且非常易于使用。您将花费与学习如何使用现有API相同的时间来学习如何使用框架
• 管理您的内存使用情况。在游戏循环中，您完全不需要招致垃圾回收（GC）。例如，如果您有一个重新生成的实体，则很想创建一个新的对象并取消引用旧的对象。大多数框架都采用这种方式。这会影响性能。在游戏过程中请勿取消引用。与其删除实体并创建一个新实体，不如为其分配属性。

更新2018 年以下几点仍然部分适用，但是在编写和进行此更新之间的时间里，有关ES6功能已有一些改进。尽管仍不能全速发展，但它们不再慢几个数量级。

• ES6具有很多新功能，包括class，forEach，let，destructuring，spread运算符等。请勿使用任何这些。它们是如此令人难以置信的低效，以至于它们是游戏的死亡之吻。它们是如此糟糕，以至于使用polyfill（用Javascript函数代替内置函数）要快一个数量级（10倍以上）。使用fornever Array.forEach， Array.map等等。for循环比内置迭代器快100倍。对于块范围接缝，“让”是一个好主意，但没有浏览器对此进行了优化。使用用let声明的变量同样快。这是块作用域的开始，需要解释器分配内存，作用域结束时它会取消引用并导致GC。

• 许多人仍然相信面向对象的OO编程，许多框架使用OO作为其代码的基础。OO有它的地方，那个地方是大型团队编写的，多个修订的企业（企业）项目。面向对象面向程序员/代码猴子，与用户/游戏玩家无关。必须迫使Javascript符合OO范式，并且这样做会引入开销，开销会对游戏产生负面影响。Javascript是为“临时”结构设计的，它非常擅长。如果您想编写快速的游戏，请学习使用闭包，不要陷入OO范式。

因此，现在我已经使您脱离了查看IDE的框架，不知道该从哪里开始。从MDN开始， 并学习如何使用现有的API，而不是某些框架，这将需要花费相同的精力来学习，但最终，您将更加接近硬件进行编码，并产生更快的游戏。

物理，复杂的分层动画，多人状态管理和通讯呢？Github是一个很好的起点，小型目标API是最好的。不要只是下载一个git并将其添加到您的游戏中。下载并将其拆开，删除不需要的任何内容，仅处理所需的内容，将其重写以适合您的需求和仅满足您的需求。

所以您仍然想要一个框架？好吧，我不怪你，我从事游戏已有40年的历史，可以很容易地说一遍。

我建议我对Phaser进行仔细的研究，尽管尚未完全优化，但它具有良好的社区支持，编写良好且易于理解，并提供了我所见过的最接近游戏框架的硬件解决方案。

最后一件事。不要编写会在阳光下在所有设备上运行的游戏，手机游戏永远无法在PC上正常运行，反之亦然。响应式设计是针对网页“页面”的，而不是针对高性能游戏的，除非您具有多年的编码经验，或者您只是在找点乐子来填补日常工作之间的时间。

并记住程序员编写游戏，游戏设计师梦dream以求。