更好的是一次性加载 javascript 导航层次结构还是逐级加载？
我正在为一个网站开发一些自定义 jQuery/javascript 导航，我很好奇设计决策对性能的影响。
它的工作方式是每个选项最多有 8 个子选项，这个层次结构可以深 4 层。我相信这会产生 8^4 或 4096 个可能的导航项（可能更少，但这是最大值）。这些关系是在服务器端定义的。
目前我正在处理测试数据，因此只有大约 50 个导航项。加载页面时，我创建每个导航项，然后仅显示当前选择所需的内容。
我是否应该考虑重写此代码以仅加载通过 AJAX 调用或其他方式进行选择时所需的项目？我担心如果我当前的方法达到 4096 个导航项，可能无法很好地扩展。
I am working on some custom jQuery/javascript navigation for a site and I am curious about the performance implications of a design decision.
The way it works is for every option there are up to 8 child options, this hierarchy can go 4 levels deep. I believe this makes for 8^4 or 4096 possible navigation items (probably less but this is the max). These relationships are defined on the server side.
Currently I am working with test data, so there are only about 50 navigation items. When the page loads, I create every navigation item and then only display what is needed for the current selection.
Should I consider rewriting this to only load the items that are needed when a selection is made via an AJAX call or something? I am concerned that my current approach may not scale well if it goes up to 4096 navigation items.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如果确实有可能拥有 4096 个导航项，那么您必须执行您所描述的操作。简单地将项目加载到 DOM 中将需要相当长的时间，进一步的处理将导致更大的延迟和糟糕的体验。
对于少数项目，可能不值得您花时间过度设计解决方案。然而，大量项目的性能提升预计将是显着的。
以下是 Telerik Treeview 中按需加载的示例。我并不提倡购买控件（控件很好，但价格昂贵），但它是一个很好的例子，说明了一切都是可能的。自己编写代码并不困难，而且如您所见，这可以带来出色的用户体验。
我的两分钱：如果你有时间，请现在就做，以免以后事情变得更加复杂/困难。
If having 4096 navigation items is a real possibility then you'll have to do something like what you're describing. Simply loading the items into the DOM will take considerable time and further processing will cause greater delays and a poor experience.
For a small number of items, it probably isn't worth your while to over-engineer the solution. However, the performance gains on a large number of items would be expected to be significant.
Here is an example of on-demand loading in a Telerik Treeview. I'm not advocating purchasing the controls (great controls but expensive) however it is an excellent example of what is possible. Coding this on your own wouldn't be difficult to do and, as you can see, makes for a great user experience.
My two cents: if you have the time, do it now before things get even more complicated/difficult to do later.
同时下载它们绝对是一个选择，尽管将它们加载到 DOM 中是另一回事。如果您确实达到了 4096 的可能性限制，您可以考虑将页面加载减少 1-2 MB（考虑到图像大小，不要太多）。除非您正在查看更多数据（可能有 16 个节点，8 个级别深 16^8），否则这将是一个合理的担忧。
您始终可以加载 2 深 (8^2 = 64)，然后当他们打开面板时，加载该面板的所有内容。他们需要点击的第二层应该给您足够的时间来加载其余的值。
Downloading them all at the same time is definitely an option, though loading them into the DOM is another story. If you really reach the 4096 possibility limit, you can be looking at pushing down 1-2 megabytes a page load (not to much considering image sizes). Unless you are looking at more data (maybe 16 nodes, 8 levels deep 16^8), then it would be a valid concern.
you could always load 2 deep (8^2 = 64), then when they open a panel, load everything for that panel. The second layer they need to click through should give you enough time to load the rest of the values.