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

Question

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

在页面中有一堆隐藏的div（移动浏览器上的性能问题等）是否有任何缺点？我更喜欢这样做，因为用户体验显然会变得更加快捷。

Answer 1

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

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

在将引用它们的html添加到dom之前，不会请求资产（图像等）。