我正在为一个站点的一些自定义jQuery/javascript导航工作，我很好奇设计决策的性能影响。更好地加载JavaScript导航层次结构一次或逐级加载？
它的工作方式是每个选项最多有8个子选项，这个层次结构可以有4个深度。我相信这使得8^4或4096个可能的导航项目（可能更少，但这是最大的）。这些关系是在服务器端定义的。
目前我正在处理测试数据，所以只有大约50个导航项目。当页面加载时，我创建每个导航项目，然后仅显示当前选择所需的内容。
我是否应该考虑重写这个函数来仅载入通过AJAX调用进行选择时所需的项目？我担心，如果目前的方法达到4096个导航项目，可能无法很好地扩展。
如果有4096个导航项目是一个真正的可能性，那么你将不得不做一些你所描述的事情。只需将项目加载到DOM中需要花费相当长的时间，并且进一步的处理将导致更大的延迟和糟糕的体验。
对于少数项目，它可能不值得您一边过度设计解决方案。但是，大量项目的业绩增长预计会很大。
以下是Telerik Treeview中的按需加载示例。我并不是主张购买这些控件（很棒的控件，但很贵），但它是一个很好的例子。您自己编写代码并不难，您可以看到，它为用户提供了绝佳的体验。
我的两分钱：如果你有时间，现在就做，现在做的事情在事情变得更复杂/以后很难做到。
同时下载它们绝对是一种选择，但将它们加载到DOM是另一回事。如果你真的达到了4096的可能性限制，你可以看一下页面加载1-2兆字节（而不是考虑图像大小）。除非您正在查看更多数据（可能是16个节点，8个深度16^8），否则这将是一个值得关注的问题。
你总是可以加载2个深度（8^2 = 64），然后当他们打开面板时，加载该面板的所有内容。他们需要点击第二层应该给你足够的时间来加载其余的值。
+0总体：-1每页加载100万个额外字节;这绝对是太多 - 特别是因为图像只加载*一次*。 +1“提前一级预加载”，这就隐藏了等待时间。 – Piskvor 2011-05-24 17:25:50
我会拿我能得到的，你能扩展'只装载一次的图像'吗？ – Ben 2011-05-24 21:33:54
默认配置中的大多数服务器（Apache，IIS）都会发送包含静态元素（例如图像）的缓存标头，这有助于浏览器确定是否需要每次从服务器加载它们，或者本地副本是否足够。动态生成的JS默认没有缓存支持，它很少被实现者添加，因此大多数AJAX请求都是在每个页面加载时完成的，即使缓存版本足够。 – Piskvor 2011-05-24 21:45:57
如果没有更好的理解你系统的工作方式，这很难回答。例如，您是在前面创建所有DOM元素，还是仅在导航扩展时才创建？你需要通过JSON从服务器加载4096个元素，还是动态地创建了其中的很多元素？ – nrabinowitz 2011-05-24 17:21:53
这取决于网站导航的*期望*大小，超过理论最大值：大多数网站的导航无处可见*数千个项目（说实话，如果您的站点有4个导航级别，总共有4096个项目，那么是一个完整的UX噩梦）。如果您真的担心这个问题，可以静态加载几个最高级别，然后根据需要通过AJAX加载剩下的级别。 – Piskvor 2011-05-24 17:22:08
@Piskvor，我不指望他们达到最大值，但我仍然认为他们是相当大的。我对“导航”的使用也可能有点误导。只有叶子项目实际上会把某个人带到某个地方，而叶子可能会被重用... – 2011-05-24 17:28:40