用于快速呈现数千个DOM元素的Javascript库[关闭]

Posted 2021-03-28

我最近玩javascript，我正在创建一个网页游戏（纯html + CSS + JS，没有服务器后端）。这个游戏的主要目的是在2D地图上行走。 （类似于https://alexnisnevich.github.io/untrusted/）。

我目前的筹码是：

• 用TypeScript编写的代码
• AngularJS用于渲染
• 并且很少+丑化以进行一些缩小

我创建了一些基本功能，现在我将地图大小从10x10（100个DOM元素）增加到100x100（10 000个DOM元素）。这是Angular遭受的地方。 ng-repeat指令需要大约5秒来渲染这么多元素（100x100对我来说是小地图，我想要一些更大的环境让用户进入）

问题：

1. 我似乎选择了糟糕的库进行渲染。对于成千上万的元素，Angular真的很慢。有没有更快的库可以渲染更多的元素（并重新渲染那些已经改变的？它可能没有检查，我没有问题手动触发更改元素上的渲染）
2. 或者我选择DOM元素作为地图错误？我应该使用画布吗？我使用DOM元素的主要原因是因为我想要所有这些事件，地图上的每个字段都是可点击的，并且当鼠标悬停在该元素上时提供工具提示。用帆布可以这样做吗？有什么好的用于创建画布2D游戏的库（我从未使用过画布）？

答案

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

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

这表示框架仍有空间。但这应该只用于设置和浏览器兼容性。 JQuery专为此而设计（不是为了速度）。使用JQuery加载和设置页面，然后使用游戏循环不要使用jquery。仅将其用于游戏的非性能部分。

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

• 不要使用DOM或CSS。创建一个canvas元素并输出所有内容。你将不得不使用它，但每次你触摸DOM，你会杀死20多个游戏精灵/实体/瓷砖。
• 使用画布2D API或webGL（webGL更快但具有更复杂的API）直接使用。
• 不要使用SVG或画布2D矢量渲染调用（例如ctx.lineTo，ctx.arc）它们非常慢。如果您需要基于矢量的图形，请考虑学习webGL API
• 直接使用HTML5音频和视频API。它们坚固且易于使用。在学习如何使用现有API时，您将花费相同的时间学习如何使用框架
• 管理你的内存使用量。在游戏循环期间，您根本不应该招致垃圾收集（GC）。例如，如果你有一个重生实体，那么就很有可能只创建一个新对象并取消引用旧对象。大多数框架都是这样做的。这会影响性能。在游戏过程中不要取消引用。不是删除实体并创建新实体，而是使用新属性分配其属性。

更新2018以下几点仍然部分适用，但在写入和此更新之间的时间内，ES6功能已有一些改进。虽然仍然没有达到速度，但它们不再是速度慢的数量级。

• ES6具有一系列新功能，类，forEach，let，destructuring，spread operator等等。不要使用任何这些。他们是如此令人难以置信的低效率，他们是你的游戏的死亡之吻。它们非常糟糕，使用polyfill（Javascript函数来替换内置函数）要快一整个数量级（10倍+）。使用for从不Array.forEach，Array.map等.for循环比内置迭代器快100倍。对于块范围接缝来说，“让”是一个好主意但没有浏览器对此进行优化。使用let声明的变量同样快。它是块作用域的开始，需要解释器分配内存，并且作用域结束时它取消引用并引发GC。
• 许多人仍然相信面向对象的OO编程，许多框架使用OO作为其代码的基础。 OO有它的位置，那个地方是大型团队编写的，多次修订的企业（企业）项目。 OO适用于程序员/代码猴子，与用户/游戏玩家无关。必须强制Javascript符合OO范例，并且这样做会引入开销，这会对您的游戏产生负面影响。 Javascript是为“add hoc”结构而设计的，它非常擅长。学习使用闭包，如果你想编写快速游戏，不要陷入OO范式。

所以现在我已经让你远离你看IDE的框架，并想知道我从哪里开始。从这里开始MDN并学习如何使用现有的API而不是一些框架，它需要相同的努力才能学习，但最终你将更接近硬件编码并生成更快的游戏。

那么物理，复杂的分层动画，多人状态管理和通信呢？ Github是一个很好的起点，小型目标API是最好的。不要只是下载一个git并将其添加到你的游戏中。下载并撕开它，删除任何你不想要的东西，只需要你需要的东西，重新编写它以满足你的需要和你的需要。

所以你还想要一个框架？好吧，我不怪你，我有40年的时间来编写游戏，很容易说你自己做。

我推荐Phaser我已经仔细研究了它，虽然没有完全优化，它有良好的社区支持，编写得很好，易于理解，并提供最接近我见过的游戏框架的硬件解决方案。

最后一件事。不要写一个会在阳光下的每个设备上运行的游戏，手机游戏永远不会在PC上运行，反之亦然。响应式设计适用于网页“页面”，不适合高性能游戏，除非您有多年的编码经验，或者您只是在日常工作之间填写时间。

并且记住程序员写游戏，游戏设计师的梦想。