最好一次加载javascript导航层次结构还是逐级加载？

Question

我正在为网站开发一些自定义jQuery / javascript导航，我对设计决策的性能影响感到好奇。

它的工作方式是每个选项最多有8个子选项，这个层次结构可以达到4个级别。我相信这会产生8 ^ 4或4096种可能的导航项目（可能更少，但这是最大值）。这些关系在服务器端定义。

目前我正在使用测试数据，因此只有大约50个导航项。当页面加载时，我创建每个导航项目，然后只显示当前选择所需的内容。

我是否应该考虑将其重写为仅加载通过AJAX调用进行选择时所需的项目？我担心，如果它达到4096个导航项目，我目前的方法可能无法很好地扩展。

Answer 1

如果有4096个导航项是真正的可能性，那么你将不得不做类似于你所描述的事情。简单地将项目加载到DOM中将花费大量时间，进一步处理将导致更大的延迟和糟糕的体验。

对于少数项目，过度设计解决方案可能不值得。但是，预计大量项目的性能提升将是显着的。

以下是Telerik Treeview中按需加载的示例。我不是主张购买控件（很棒的控制但价格昂贵），但它是可能的一个很好的例子。对您自己进行编码并不困难，正如您所看到的，可以提供出色的用户体验。

我的两分钱：如果你有时间的话，现在就做好以后事情变得更加复杂/以后很难做到。

Answer 2

同时下载所有内容绝对是一种选择，尽管将它们加载到DOM中是另一回事。如果你真的达到4096可能性限制，你可以考虑下载1-2兆字节的页面加载（考虑图像大小不是太多）。除非您正在查看更多数据（可能是16个节点，8个级别16 ^ 8），否则这将是一个有效的问题。

你总是可以加载2深（8 ^ 2 = 64），然后当他们打开一个面板时，加载该面板的所有内容。他们需要点击的第二层应该给你足够的时间来加载其余的值。