如何构建 HTML/JS iPad 应用程序以获得最佳性能？

Posted 2023-03-12

【中文标题】如何构建 HTML/JS iPad 应用程序以获得最佳性能？

【英文标题】：How to structure a HTML/JS iPad application for best performance?

【发布时间】：2011-05-06 14:23:15

【问题描述】：

我正在开发一个基于 html 的 iPad 应用程序，它在 UI 中大量使用 javascript。 GUI 将类似于杂志，即被分割成屏幕/视图，然后用户通过触摸事件和 webkit 转换在这些屏幕/视图之间导航。所有这些都在 iPad 上本地运行（通过 PhoneGap 等原生包装器）。

假设该应用程序将拥有 50-100 个这样的屏幕 - 充满标准的 Web 元素，如文本、图像、表格和表单。

如何构建以获得最佳性能？以下两种方法中哪一种更可取，为什么？

在 DOM 中只有 3 个即时（当前、上一个、下一个）视图/屏幕，然后在用户向前/向后导航时将新的（并删除旧的）附加到 DOM 中？

在开始时生成整个 50-100 个 HTML 屏幕，然后隐藏（显示：无）除上述 3 个之外的所有 HTML

那么基本上什么在内存/性能方面效果更好？一方面，连续的 DOM 操作可能代价高昂（更糟糕的是，会使应用程序屏幕之间的过渡变得生涩） - 而另一方面 - 不知道在单个文档 DOM 中是否预生成多达 100 个 HTML 屏幕不会让 Mobile Safari 窒息而死。当然，即使这些屏幕在 DOM 中，大多数时候它们都是 display:none - 但是移动 safari 垃圾收集器有那么好吗？有人试过吗？

顺便说一句，这不是图像内存问题/泄漏类型问题。我知道这个问题，无论我走哪条路，都会通过小虚拟图像卸载技巧来处理它。这只是关于 HTML 视图 - 如果您愿意，可以使用骨架。

【参考方案1】：

如果内容要在启动时全部下载到设备上，并且所有内容都在本地缓存，那么一定要使用第一种方法，因为它的内存占用要小得多。

但是，如果内容是动态下载的，我会在 1 和 2 之间混合使用...可能会在任一方向上预取并渲染接下来的两到三张幻灯片，或者可能在每个方向上一张和一张用于页面上的每个链接。

【讨论】：

谢谢。一切都是本地的 - 没有下载（除了那些无论如何只下载一次然后缓存的图像）。但是，您确定恒定的 DOM 追加/删除比在插入的屏幕之间导航更可取（我认为这也可能有助于使硬件加速的 transform3d 过渡更平滑？）？不应该 display:none 有助于减少内存占用吗？