显示隐藏的DIV和通过AJAX获取内容

Question

我正在使用fancyBox向我正在构建的应用程序的用户显示菜单/对话框。显示在框中的内容是HTML - 我可以在JS中生成所有内容，并将其放入隐藏的div中以在需要时显示，或者在打开fancyBox时进行AJAX调用以获取内容。

在页面中有一堆隐藏的div（移动浏览器等的性能问题）有什么缺点吗？我宁愿这样做，因为用户体验显然会变得更快。

Answer 1

通常，您应该尽快加载信息，因为完成请求是大多数Web应用程序的主要瓶颈。这里的问题不仅仅是html，还包括除html之外的所需资源（例如图像，视频等）。这些会占用内存，并且可能会减慢初始页面加载时间，因为您可能会通过加载尚未显示的图像来阻止可见的图像加载。为了解决这些问题中的任何一个是否是一个问题，您实际上没有其他选择，只能在目标设备上进行测试。然而，在你的情况下，你实际上并没有通过获取资源来保存任何内存，因为它们最终还是会在某个时候被抓取，因此浏览器必须能够处理所有被加载的内容 - 因此你一开始可能会有他们。如果页面加载时间是一个问题，您仍然可以推迟加载资源，但只有在dom渲染之前，而不是等到需要隐藏的div时。这样你就不会阻止页面加载，但当你需要它们时仍然拥有资源。例如，在JQuery的：

$(function() { 
    $('#hiddenDiv').html(hiddenContent); 
}); 

资产（图像等）将不被要求，直到HTML引用它们已经被添加到DOM。