Javascript 存储问题/抽认卡的JS数组或隐藏div？

我正在制作一个显示问题/抽认卡的网站。首先，我从服务器加载一组flashcard（最初我想分别加载每个flashcard，但这需要太多MySQL查询），然后用户可以逐个查看它们。例如，可能有30个甚至300个抽认卡。我将它们加载到一个单独的div中，并使用css display只显示堆栈中的第一个，而隐藏其他flashcard。然后可以使用jQuery将flashcard移动到末尾或从堆栈中移除。我想知道，将flashcard存储在一个javascript数组中是否更好，例如，打印包含第一个flashcard的数组的第一个元素？您认为哪种做法更好/更快？或者两者都一样好？

最终，你必须对不同的方法进行基准测试才能确定，因为存在许多难以预测效果的变量。视情况而定，这可能不值得麻烦。以下是一些基本注意事项：

如果你没有必要支持闪存卡的数量上限，考虑使用AJAX-Load一次一次的方法。后端的MySQL查询太多的问题可能需要通过MySQL调优或在后端缓存查询结果来解决
• 如果您的目标是特定的设备、操作系统或浏览器，请在该设备、操作系统或浏览器上测试性能。移动电话可能无法在大型JavaScript数组和许多DOM操作的情况下运行良好，或者非AJAX解决方案可能需要很长时间才能通过慢速网络加载，或者如果存在图像等内容，您可能会遇到文档大小限制，例如。不过这些是我编的。你需要实际测试一下

• 如果闪存卡的数量有一个已知的上限，并且它相当小，那么您考虑的一次性加载技术可能更具吸引力。有一次，我做了一个有10个问题的愚蠢的测验应用程序，因为测验的规模太小，所以我没有为此而使用AJAX。（我写这篇文章的目的是，如果那里的需求发生变化，我可以很容易地采用AJAX-y方法，但他们从来没有这样做过。）

• 考虑真正的可能性，这并不重要——性能上的差异将非常小，以至于你应该只做对你有用的事情。如果站点需要同时扩展到一百万用户，则情况并非如此。但是，如果是针对一个15人的班级，那么，你可能不想花太多时间进行基准测试。（我想这是最接近你提出的具体问题的实际答案。）

---

300张卡算不了什么。我怀疑你会看到任何性能提升。但是使用AJAX并在需要时加载每张卡可能也是一个好主意。您是否使用后端代码创建div，然后使用jQuery处理它们？